Mandala UI Split Button Component


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


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 -


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


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.