@mandala-ui/split-button NPM

Mandala UI SplitButton Component

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

Check the MonoRepo README for installation.

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.

if using the whole library:

import { SplitButton } from 'mandala';

if only using this component:

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

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	-