Pills is a component designed for:
- Switching between states, such as tabs, views, or screens with uniform content.
- Filtering data in lists, tables, and charts.
Component consists of the following:
Sizes and margins
|Size (height in px)||Margins|
Addons (icons, flags, badges, counters) have the same margin as the addons inside the Button.
The default appearance used in most cases across our design system.
Adding new item
This type exists only in design, and the component doesn't cover this case yet.
Pills as summary
In some products, pills can act as a block with shared metrics. Their differences from the default pills are:
- Increased height due to content.
- Additional controls inside, usually for adding/moving data by clicking on a link.
|Skeleton (initial loading of the page)|
Usage in UX/UI
Pills are used for:
- Actions with data: filtering, sorting, navigation (displaying data chunks).
- Changing the view/presentation of data.
Pills can be used in:
Number of pills
The minimum number of pills in the component is 2, and the maximum is unlimited. However, keep in mind that it might be challenging for the user to navigate the selection with too many items. In such cases, you can:
Clicking on the last pill with an ellipsis in the dropdown displays a list of items that did not fit. The selected item from this list will be placed before the pill with an ellipsis.
Examples of wrong usage
Don’t use buttons instead of pills:
Don’t use pills instead of buttons:
If words are too long, you can shorten them into abbreviations that users can understand:
Don’t use a single