@mandala-ui/split-button

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