Pill
Use the Pill component to indicate information is contextual and grouped under a single taxonomy. It renders text with a coloured background. Useful for showing transaction status.
Usage Example#
Live Editor
Result
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| alignItems | string (optional) | 'center' | |
| bg | string (optional) | '#FFF' | |
| borderRadius | integer (optional) | 3 | |
| color | string (optional) | 'dark-gray' | |
| display | object (optional) | 'inline-flex' | |
| fontSize | integer (optional) | 1 | |
| fontWeight | integer (optional) | 2 | |
| height | string (optional) | '2rem' | |
| lineHeight | string (optional) | 'solid' | |
| px | integer (optional) | 3 | |
| py | integer (optional) | 1 |
Pill uses COMMON, TYPOGRAPHY groups of Styled System props.