Pills is a component used for:
- switching of states (tabs/views/screens with uniform content);
- filtering data in lists/tables/graphs.
Sizes and paddings
|Size (height in px)||Paddings|
Addons (icon, flag, badge, counter) have the same padding as the addons inside the Button.
It is used in most cases in our products.
Advanced pills (king-size 👑)
In some products, the pills can act as a block with shared metrics. Pills can be made "main" if they contain the target figures of the report. What is their difference from the usual pills:
- they are higher in height due to the content;
- they may have additional controls inside (usually adding/moving data by clicking on a link).
Pill for adding new item
Note that this type is design-only yet.
|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.
Use pills in:
Number of pills
Minimum in the component is 2, maximum – is unlimited. But keep in mind that it will be difficult for the user to navigate the selection if there are too many items. In this case, you can:
- collapse pills in DropdownMenu;
- collapse the last pills into a pill with an ellipsis.
By clicking on the last pill with an ellipsis in the dropdown, it is possible to display a list of items that did not fit. The item selected from this list put before pill with ellipsis.
Examples of wrong use
Do not use buttons instead of pills:
Do not use pills instead of buttons:
If words are too long, you can shorten them into abbreviations that users can understand:
Do not use one Pills.Item: