@paprika/pill
Description
DEPRECATED - The Pill component is for showing metadata like status, type, or levels.
Installation
yarn add @paprika/pill
or with npm:
npm install @paprika/pill
Props
Pill
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| a11yText | string | false | null | |
| children | node | true | - | |
| isDisabled | bool | false | false | |
| onClick | func | false | null | |
| pillColor | [ Pill.types.color.BLACK, Pill.types.color.BLUE, Pill.types.color.GREEN, Pill.types.color.GREY, Pill.types.color.ORANGE, Pill.types.color.LIGHT_BLUE, Pill.types.color.LIGHT_ORANGE, Pill.types.severity.NO_RISK, Pill.types.severity.LOW_RISK, Pill.types.severity.MEDIUM_RISK, Pill.types.severity.HIGH_RISK] | false | Pill.types.color.GREY | |
| size | [ Pill.types.size.SMALL, Pill.types.size.MEDIUM] | false | Pill.types.size.MEDIUM |
Pill
The <Pill> component is a decorate or interactive component that provides additional metadata such as: status, type or levels.
If an onClick handler is passed, it is rendered as a <RawButton>, otherwise it will be a decorated <div>.
Fore more information about the <Pill>, visit our starling site.
Usage
For a decorative pill
import Pill from "@paprika/pill";
<Pill pillColor="mediumRisk">Medium risk</Pill>;Or a interactive pill
import Pill from "@paprika/pill";
<Pill pillColor="mediumRisk" onClick={clickHandler}>
Click me
</Pill>;Pill with an icon
import Pill from "@paprika/pill";
import Icon from "@paprika/icon/lib/Upload";
<Pill pillColor="mediumRisk" size="small">
<Icon />
Medium risk with icon
</Pill>;