@mandala-ui/split-button

1.1.1 • Public • Published

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

mandala-bottom

Package Sidebar

Install

npm i @mandala-ui/split-button

Weekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

112 kB

Total Files

12

Last publish

Collaborators