Pill
Pill is used to highlight the count of an item.
Usage
Code
Pill is used to highlight number of items. For status and text, use a Badge.
Appearances
Solid
Solid Pill is 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 Pill is 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.
Subtle Style
Subtle style is favorable when a lot of pills have to be used to show count against entities. In that case, solid style becomes a bit overwhelming e.g. count in vertical navigation items.
Structure
| Property | Value(s) |
|---|---|
| Height | 20 px |
| Max width | 160 px |
| Corner radius | 10 px |
| Padding (top, right, bottom, left) | 2px, 6px, 2px, 6px |
Configurations
| Property | Value(s) | Default value |
|---|---|---|
| Appearance |
| Stone |
| Subtle |
| False |
Usage
Pills vs Badges
Pills are used to display count of entities while badges are used for tagging entities.
Was this page helpful?