Chip

Preview

A compact capsule you can select or remove, for filters, tags and multi-select entry. For moving between views use Tab.

Click it. Selecting swaps bg/white-0 for bg/strong-950, turns the label text/white-0 and drops the outline.

Which types does Chip have?

Chip has five types, each leading with a different element. The axis changes the element in front of the label and nothing else: no color, no height, no radius.

The bigger box costs left padding: 12 on Type Default, 6 on the four that lead with 20, so the chip measures 99 then 97. Brand leads with a company mark from the Brands set, Slack by default.

How does a selected Chip look?

Selected fills the whole capsule, so a row of chips reads at a glance. It is one boolean axis.

Both tokens invert with the theme: a selected chip is a near black capsule with white text in light and a white capsule with near black text in dark. Selected True keeps the dark fill in Default, Pressed and Focused, and only the overlay and the ring change.

Which states does Chip have?

Four states, on an unselected and a selected chip; there is no Hover, so a pointer hover on a specimen shows Pressed. Disabled fades the outline, the label and both icons, and a selected chip drops to bg/soft-100.

Focused uses the focusRing/brand effect style: from the edge out, a 1 pt brand/base stroke, a gap in the surface color and a 2 pt ring in brand/base. The fill turns bg/soft-100 when the chip is unselected.

Selected Pressed lays state/pressed/on-strong at 10 percent over the dark fill. The close x is fg/soft-500 in every state but Disabled, so it stays visible on a selected chip and in dark mode.

Disabled unselected keeps bg/white-0 and moves the outline to border/soft-100. Disabled selected drops to bg/soft-100 and is the one selected chip that does not take bg/strong-950.

Pressed keeps the outline on Type Default and drops it on the other four. Focused pushes the left padding from 6 to 8 on Emoji, Flag and Brand but not on Avatar, so those three measure 99 where they rest at 97.

40 variants: State by Type by Selected, with no holes.

How do I hide the icon or the close button?

Turn Icon off for a plain filter and Close Button off when the chip is a label. Both booleans are true by default.

The widths are arithmetic: 12 of padding, a 16 box, the label wrapper at 6 plus 31 plus 6, another 16 box, 12 of padding. Drop either box and 16 goes with it.

Properties

Three variant axes and four instance properties. Four states by five types by two selections make 40 variants, and the set holds all of them.

Source: the Chip page of the Appetite UI Figma file, read on October 2, 2026.

Tokens

Every value the component reads, resolved through its aliases to the Foundations primitive.

Geometry runs on dimensions/radius/full 9999, dimensions/spacing/3 12, dimensions/spacing/1-5 6 and dimensions/icon/stroke 1.5 on the icon boxes.

How does Chip differ on iOS and Material 3?

iOS has no chip control, and Material 3 has one with four types and a 32 high rounded rectangle. Appetite UI Chip is a capsule on both platforms.

The 44 high hit frame meets the iOS minimum touch target of 44 pt, set by platform/min-touch-target in the Platform collection. On Android, where the minimum is 48 dp, add 4 dp of hit area in code.

When should I use a Chip?

Use chips to filter a list, choose from a set or show an entry someone added.

Keep the label short enough to stay on one line. The chip hugs its text and never wraps, so a long label pushes the row into a horizontal scroll.