@mandala-ui/split-button

Mandala UI SplitButton Component

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

$3

Check the MonoRepo README for installation.

$3

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.

$3

if using the whole library:
``js
import { SplitButton } from 'mandala';
`
if only using this component:
`js
import SplitButton from '@mandala-ui/split-button';
`

$3

* 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