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.
Import component
import { Pill } from 'rimble-ui';

Examples

Different ways to use the Pill component in your product.
Unselected
Pending
Custom colour
Pending
Failed
Confirmed

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptionalnone
coloroptional
'dark-gray'
fontFamilyoptional
'sansSerif'
fontSizeoptional
1
fontWeightoptional
2
lineHeightoptional
'solid'
heightoptional
2
pxoptional
3
pyoptional
1
borderRadiusoptional
3
displayoptional
'inline-flex'
alignItemsoptional
'center'
Styled System Props
Pill uses COMMON, TYPOGRAHY groups of Styed System props.
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute

Pill

On this Page