Pill
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
alignItems
(optional)
Default value:
'center'
bg
(optional)
Default value:
'#FFF'
borderRadius
(optional)
Default value:
3
color
(optional)
Default value:
'dark-gray'
display
(optional)
Default value:
'inline-flex'
fontSize
(optional)
Default value:
1
fontWeight
(optional)
Default value:
2
height
(optional)
Default value:
'2rem'
lineHeight
(optional)
Default value:
'solid'
px
(optional)
Default value:
3
py
(optional)
Default value:
1
Styled System Props
Pill uses COMMON, TYPOGRAPHY groups of Styled System props.
