@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

    Install

    npm i @mandala-ui/split-button

    DownloadsWeekly Downloads

    12

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    112 kB

    Total Files

    12

    Last publish

    Collaborators