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