Pills
Pills are used to highlight number of items.
Usage
Code
Pills are used to highlight number of items. For status and text, use a Badge.
Types
Solid
Solid Pills are used to highlight number of items in reference to a particular component so that the component gets recognized easily. eg Pill over the notification icon.
Subtle
Subtle Pills are used when many pills are used in reference to a group of components. In that case, solid pills become a bit overwhelming. eg Pills in vertical navigation items.
Appearance
A pill comes in 9 appearances.
Properties
| Property | Value(s) | Default value |
|---|---|---|
| Appearance | Stone | |
| Subtle (optional) | - | |
| Max width | 160px | - |
| Corner radius | 20px | - |
| Padding (top, right, bottom, left) | 2px, 6px, 2px, 6px | - |
Usage
Pills vs Badges
Pills are used to display count of entities while badges are used for tagging entities.
