Live code
Storybook
Usage
Pill
Pills can be used to show count or label.
Basic Usage
import { Pill } from '@alma-oss/spirit-web-react';
<Pill>3</Pill>
Color Variants
Pill supports selected, neutral, and emotion color variants.
<Pill color="selected">333</Pill>
<Pill color="neutral">333</Pill>
<Pill color="success">3</Pill>
<Pill color="informative">3</Pill>
<Pill color="warning">3</Pill>
<Pill color="danger">3</Pill>
Subtle Variant
Use the isSubtle prop to switch the Pill to its subtle color scheme:
<Pill color="success" isSubtle>
3
</Pill>
Content Length
Pill works well for short labels and numeric counts, but it can also render longer content when needed:
<Pill color="selected">333</Pill>
API
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | — | ✓ | Content of the Pill |
| color | [EmotionColorNamesType | selected | neutral] | selected | ✕ | Color of the component |
| isSubtle | bool | false | ✕ | Whether the Pill uses subtle colors |
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