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

Appearance

Sizes

Pills sizes and margins

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

Addons

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

Behaviour

The Pills component can work in two modes: manual or automatic tab activation. We recommend using auto behavior in forms, while manual behavior is better for navigation and layout changes.

Pills usage behavior

Behavior	Example of usage	Description
auto		Pills.Items are automatically activated when they receive focus, just like in the Radio component.
manual		Pills.Items are activated by pressing Space or Enter.

Usage 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.

For a live example, refer to the Custom pills.

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: