Description

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 composition

Component consists of the following:

1. Pill.Item
2. Pill.Item.Addon
3. Pill.Item.Text

Sizes and margins

Pills sizes and margins

Size (height in px)	Margins
M (28px)
L (40px)

Addons (icons, flags, badges, counters) have the same margin as the addons inside the Button.

Cases

Default

The default appearance used in most cases across our design system.

Adding new item

TIP

This type exists only in design, and the component doesn't cover this case yet.

States for adding new item case in Pills

State	Appearance
Normal
Hover

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.

Interaction

States for Pills

State	Appearance example
Skeleton (initial loading of the page)
Normal/Active
Hover
Disabled
Disabled Pills.Item
Loading

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:

• Lists;
• Tables;
• Charts;
• Local filters in widgets, etc.

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:

• Collapse pills into a DropdownMenu with an Ellipsis icon;
• Use Select instead.

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 Pills.Item: