Components / Navigation / ChipsOpen in Figma

Chips

Ready

Narrows a list to one group at a time, with the count in each label.

Platforms Phone · TabletGroup NavigationUpdated 26 Oct 2026

When to use

  • A list can be cut into a few groups by one property, such as status or type.
  • People benefit from seeing how many records are in each group before tapping.

When not to use

If people need toUse
Switch between main views of a screenPrimary tabs
Combine several filters at onceFilter screen
Choose a value in a formDropdown

Anatomy

All - 22Label - 8Label - 6
  1. Selected chip · one at a time
  2. Default chip · required
  3. Label with count · required: label, dash, count

Variants

VariantPurposeFigma
Fits the rowThree or four chipsDesigned
Scrolls sidewaysMore chips than fit; the row clips at the screen edgeDesigned

States

StateWhenWhat changesFigma
SelectedThe group on screenTeal ink fill, white 14 MediumDesigned
DefaultOther groupsPage fill, Teal ink 14 RegularDesigned
PressedFinger is downA 5% black layer over the chipTemporary rule

Behaviour

  • Exactly one chip is selected; "All" is first and selected when the screen opens.
  • Tapping a chip filters the list below at once; the search keeps its text.
  • Counts follow the records in each group; a chip with 0 stays in the row.

Phone and tablet

PhoneTablet
Row padding12 top and bottom, 16 sides12 top and bottom, 20 sides
Chip size32 tall32 tall

Content

PartRule
LabelGroup name, space, dash, space, count: "All - 22"
Order"All" first, then the order of the workflow

Do and don't

All - 22Label - 8
DoPut the count inside the label.
All22Label
Don'tAdd badges or extra colours for the count.
Primary tabsSecondary tabSearch and filterList layout
← Secondary tabBottom navigation →