@mandala-ui/split-button

Mandala UI Split Button Component

Stats

StarsIssuesVersionUpdatedCreatedSize
@mandala-ui/split-button
1.1.13 years ago4 years agoMinified + gzip package size for @mandala-ui/split-button in KB

Readme

Mandala UI SplitButton Component

Mandala is a React component library that utilizes a declarative CSS library for styling.

Installation

Check the MonoRepo README for installation.

Description

SplitButton is effectively an on off switch. It takes a function on click and an isOn prop to toggle the state of it from another component.

Usage

if using the whole library:

import { SplitButton } from 'mandala';

if only using this component:

import SplitButton from '@mandala-ui/split-button';

Props

  • backgroundColor - the color of the surface area of the switches
  • disabled - sets the button as disabled and reduces opacity 40%
  • isOn - prop to switch which side of the switch is on
  • offColor - the color of the off section when the switch is off
  • onClick - function for onClick
  • onColor - the color of the on section when the switch is on
  • pill - sets the radius of the ends to 100%
  • radius - the border radius of the button (1-4, clamped), is disabled if pill is set to true
  • showLabels - shows the "on" and "off" text labels
propName propType defaultValue isRequired
backgroundColor string 'white' -
disabled string 'black' -
isOn boolean false -
offColor string 'black' -
onClick function null -
onColor string 'black' -
pill boolean false -
radius boolean false -
showLabels boolean false -

TODO:

  • callback for analytics, etc
  • colored border
  • border width

mandala-bottom

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.