Skip to content

Updated

Copy page

Segmented control

A segmented control switches between two to five views of the same content, one segment selected at a time. Material 3 calls it a segmented button.

Copy page

Updated

On this page
  1. In the kit
  2. Names
  3. In practice
  4. Related

In the kit

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

Charts, live componentsKit geometry, light and dark

Segmented Control, period

Chart, Bar

Revenue this week11,72012.4%vs last week
MonTueWedThuFri2.6kSatSunAvg 1.7k
Analytics393 x 852 each, Light and Dark
Fitness app Analytics screen: a Week, Month and Year switch, Training time 382 min up 12.4% on last week, a stacked bar chart of Strength, Cardio and Mobility for each day, and a Weight progress card with 74.6 kg against a 72.5 kg targetFitness app Analytics screen in dark mode: a Week, Month and Year switch, Training time 382 min up 12.4% on last week, a stacked bar chart of Strength, Cardio and Mobility for each day, and a Weight progress card with 74.6 kg against a 72.5 kg target
Analytics

What does each system call it?

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

Names, system, name
SystemName
AppleSegmented control
Material 3Segmented button
Appetite UISegmented Control

In practice

Use it to change how one thing is shown, Week, Month or Year, and tabs to move between different things.

In Appetite UI it sets the period on the fitness Analytics and Progress screens, Pay or Receive on the finance Pay sheet, Delivery or Pickup on the food delivery Home and Today, Upcoming or Done on the tasks My work screen.