--- title: Chip description: Chip is a compact capsule for filtering a list or showing an added entry. Appetite UI Figma component: five types, four states and tokens. group: Components source: https://www.appetiteui.com/docs/chip dateModified: 2026-10-08 --- # Chip Updated: October 8, 2026. Chip is a compact control for filtering a list, choosing from a set, or showing an entry someone added. ## Preview A compact capsule you can select or remove, for filters, tags and multi-select entry. For moving between views use Tab. Specimen: Chip, Type Default, State Default, Selected False. 99 x 32, capsule, padding 6 and 12, in a 99 x 44 hit frame. Click it. Selecting swaps bg/white-0 for bg/strong-950, turns the label text/white-0 and drops the outline. The chip is a capsule with a border/sub-200 outline, and a 44 high hit frame surrounds the 32 high chip, so the tap target is bigger than the shape. ## 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. Specimen: Type Default, Avatar, Emoji, Flag, Brand. 16 box on Default, 20 on the other four. 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. Specimen: Selected False, Selected True. bg/white-0 to bg/strong-950, label to text/white-0. 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. Specimen: State Default, Pressed, Focused, Disabled, on Selected False and Selected True. bg/white-0, bg/weak-50, bg/soft-100 with the ring, then text/disabled-400 inside a border/soft-100 outline. 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. Specimen: Both true, Icon false, Close Button false, both false. 99, 83, 83, 67. 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. | Property | Type | Default | | --- | --- | --- | | `State` | Default \| Pressed \| Focused \| Disabled | Default | | `Type` | Default \| Avatar \| Emoji \| Flag \| Brand | Default | | `Selected` | False \| True | False | | `Text` | Text | Chip | | `Icon` | Boolean | true | | `Close Button` | Boolean | true | | `Icon Swap` | Instance swap, the Icons set | circle | 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. | Token | Light | Dark | Applied to | | --- | --- | --- | --- | | `bg/white-0` | #FFFFFF | #0E0E0F | Fill at rest and while disabled, and the gap in the focus ring | | `border/sub-200` | #D1D1D6 | #48484A | 1 pt inside outline, unselected | | `border/soft-100` | #E9E9EA | #2F2F31 | Outline while disabled | | `bg/weak-50` | #F4F5F5 | #242427 | Pressed, unselected | | `bg/soft-100` | #E9E9EA | #48484A | Focused unselected, and the selected disabled chip | | `bg/strong-950` | #0E0E0F | #FFFFFF | Selected, except while disabled | | `state/pressed/on-strong` | #FFFFFF at 10% | #030712 at 10% | Overlay on a selected chip while pressed | | `brand/base` | #155DFC | #2B7FFF | Focused stroke and ring | | `text/sub-700` | #48484A | #C7C7CC | Label, unselected | | `text/white-0` | #FFFFFF | #0E0E0F | Label, selected | | `text/disabled-400` | #AEAEB2 | #8E8E93 | Label, disabled | | `fg/soft-500` | #8E8E93 | #AEAEB2 | Leading icon and close x | | `fg/disabled-400` | #AEAEB2 | #8E8E93 | Both icons while disabled | | `colors/gray/200` | #D1D1D6 | #D1D1D6 | Avatar disc, one mode | 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. | Appetite UI | iOS counterpart | Material 3 counterpart | What differs | | --- | --- | --- | --- | | Chip | None. iOS filters with a segmented control, a menu or a bordered button. | M3 / Chip, 32 high at radius 8, Type Assist, Filter, Input and Suggestion by Selected | Appetite UI is a capsule at radius 9999 with an avatar, emoji, flag or brand lead and adds Pressed, Focused and Disabled. The Material 3 set draws no state variants. | 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. - Do: Use a row of chips as a filter set and let selection carry the state. Drop the close button when nothing is being removed. - Avoid: Do not move between views with chips. That is Tab, which owns the underline, the swipe and the screen it belongs to. 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. [Touch target size on iOS and Android: 44 pt, 48 dp and the WCAG minimum](https://www.appetiteui.com/blog/touch-target-size-ios-android). ## In the screens and the glossary - Glossary: [Chip](https://www.appetiteui.com/academy/glossary/chip) - Screens: [Search and filter screens](https://www.appetiteui.com/screens/patterns/search-and-filters)