Live code
Storybook
Usage
Pill
Pills can be used to show count or label.
import { Pill } from '@lmc-eu/spirit-web-react';
<Pill color="primary">3</Pill>
<Pill color="secondary">3</Pill>
<Pill color="tertiary">3</Pill>
<Pill color="inverted">3</Pill>
<Pill color="selected">333</Pill>
<Pill color="unselected">333</Pill>
<Pill color="success">3</Pill>
<Pill color="informative">3</Pill>
<Pill color="warning">3</Pill>
<Pill color="danger">3</Pill>API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | — | ✔ | Content of the Pill |
| color | [Action Color dictionary | Emotion Color dictionary | selected | unselected] | selected | ✕ | Color of the component |
On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.
For detailed information see Pill component