Chips

Chips allow users to filter content or make a choice from a set of options within a compact area.

Choice chips

Small

Medium (default)

Large

Choice chips allow single selection from a group, like radio buttons. One chip should be pre-selected by default.

Filter chips

Small

Medium (default)

Large

Filter chips allow multiple selections from a group, like checkboxes. Users can select as many as needed.

Pill shape

Choice (single)

Filter (multiple)

Pill-shaped chips with fully rounded corners for a softer look.

Outline variant

Choice (single)

Filter (multiple)

Outline variant with a neutral active state, useful when green selection is too prominent.

With icons

Default

Pill

Chips can include icons alongside text for added visual context.

Disabled

Individual chips can be disabled while keeping the group interactive.

Interactive demo

Apparel sizes

Selected: M, L

Example of chips used for size selection, similar to the account sizes page.