Skip to content

Updated

Copy page

Chip

A chip is a compact capsule that filters a list, picks from a set or shows an entry someone added. It is a Material 3 component with no counterpart on the kit’s Apple pages.

Copy page

Updated

On this page
  1. In the kit
  2. Names
  3. iOS and Android
  4. In practice
  5. Related

In the kit

Where it appears in Appetite UI: Booking app, Results, and the components live. The theme switch shows the dark frame.

Search and filters, live componentsKit geometry, light and dark

Search, Field

Chip, filters

Stepper and Button

2
Results393 x 852 each, Light and Dark
Booking app Results screen: Ruka, Finland with 12 to 17 Feb and 3 guests above Filters, Price, Cabin and Sauna chips, a map with six price pins from $120 to $240 and the $180 pin selected, and a sheet that opens on 24 cabins and a Lakeside cabin cardBooking app Results screen in dark mode: Ruka, Finland with 12 to 17 Feb and 3 guests above Filters, Price, Cabin and Sauna chips, a map with six price pins from $120 to $240 and the $180 pin selected, and a sheet that opens on 24 cabins and a Lakeside cabin card
Results

What does each system call it?

The same idea under its Apple, Material 3 and Appetite UI name.

Names, system, name
SystemName
AppleNo chip on the kit’s Apple pages
Material 3Chip, 32 high at radius 8
Appetite UIChip

What value does it take on iOS and Android?

Read from the kit’s Platform collection and its Material 3 pages, as the docs print them.

Counterparts, component, iOS, Material 3, what differs
ComponentiOSMaterial 3What differs
ChipNo counterpartM3 / Chip, 32 high at radius 8The Apple pages have no chip

In practice

Chips work when the options fit on one line and change the content right under them. Behind more than a line of them, a filter sheet is clearer.

Appetite UI uses chips across its screens: the categories over the finance history, the price pins and filters over the booking map, the sort and filter chips of a food delivery category and the suggestions in the AI chat.