1.1.1 • Published 6 years ago
@mandala-ui/tag v1.1.1
Mandala UI Tag Component
Mandala is a React component library that utilizes a declarative CSS library for styling.
Installation
Check the MonoRepo README for installation.
Description
Tag is just a simple element to show metadata in a small font
Usage
if using the whole library:
import { Tag } from 'mandala';
if only using this component:
import Tag from '@mandala-ui/split-button';
Props
backgroundColor
- the color of the surface area of the switchesdisabled
- sets the button as disabled and reduces opacity 40%isOn
- prop to switch which side of the switch is onoffColor
- the color of the off section when the switch is offonClick
- function for onClickonColor
- the color of the on section when the switch is onpill
- sets the radius of the ends to 100%radius
- the border radius of the button (1-4, clamped), is disabled ifpill
is set totrue
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