Updated
Rating
Rating shows a score out of five, and collects one when someone is asked to give it.
Updated
Preview
Stars in two jobs. Display reports a score you cannot change, Interactive collects one. Neither iOS nor Android ships a rating control, so both are yours to build.
Source: the Rating and Rating / Score sets of the Appetite UI Figma file, read on October 2, 2026.
Display sits inline beside a name or a place. Interactive stands alone and expects room around it.
The score reads 4.2 while four stars are filled, because stars cannot draw a decimal.
Display
Read only and inline, in three variants: Rating 5, 4 and 3. Stars, a score and a count.
The star row is a fixed 88 wide whatever the score, so only the text after it changes the width of the row. Empty stars are gray silhouettes.
Display ships Rating 5, 4 and 3, and the count is part of every variant. For a score of 2 or 1, override the star fills on an instance of Rating 3.
How does the Interactive Rating work?
It is the input version: 212 wide and 84 tall, with five 36 stars and a hint that names the score in words. Press the stars.
Empty stars switch technique here: the same path stroked at 2.5 rather than filled, so they read as outlines. That keeps the 36 stars from looking heavy.
The hint names the step in words: the file draws Tap to rate, Fair and Excellent. The live stars also say Terrible, Poor and Good for the steps in between.
Interactive ships Selected 0, 3 and 5. Build the other steps by filling more stars on an instance.
When should I use Rating / Score?
Use it for cards and list rows where five stars would be too heavy: one star and a number. The full component stays on Rating.
Size sm
39 x 20, star 13
Size md
42 x 20, star 16
Rating / Score is a separate set with one axis, Size, and one text property, Score, which defaults to 4.9. Size sm draws a 13 star and md a 16 star beside a 14 pt number, 4 apart.
It has no count and no stars to fill, so it is a read only summary.
Properties
Rating has three variant axes and six variants. Rating / Score has one axis and a text property.
| Property | Type | Default |
|---|---|---|
Style | Display, Interactive | Display |
Rating | 5, 4, 3, 0 | 3 |
Selected | 0, 3, 5, None | None |
Size | sm, md, on Rating / Score | sm |
Score | Text, on Rating / Score | 4.9 |
| Combination | Reads | Size |
|---|---|---|
| Display, Rating 5, 4 and 3 | Selected is always None | 156, 152 and 144 x 28 |
| Interactive, Selected 0, 3 and 5 | Rating is always 0 | 212 x 84 |
| Rating / Score, Size sm and md | Score text | 39 and 42 x 20 |
Rating holds the value for Display and Selected holds it for Interactive, and each is dead in the other style. Widths move with the text, and the star row is 88 in every Display variant.
Score, count and hint are text overrides, so a real number means editing the instance. There is no half star, so 4.6 shows four stars and the number carries the rest.
Tokens
Four colors, and the gold is the odd one out.
| Token | Light | Dark | Applied to |
|---|---|---|---|
colors/yellow/400 | #FFB900 | #FFB900 | Filled stars, one value in both modes |
bg/soft-100 | #E9E9EA | #48484A | Empty stars, as a fill in Display and a 2.5 stroke in Interactive |
text/strong-950 | #0E0E0F | #FFFFFF | The score |
text/sub-700 | #48484A | #C7C7CC | The count and the hint |
The gold is a primitive with a single mode, so it stays #FFB900 while everything around it themes. There is no semantic token for it, so a second gold needs a primitive of its own.
Source: the Foundations and Color Tokens collections of the Appetite UI Figma file, read on October 2, 2026.
How does Rating differ on iOS and Material 3?
Rating has no iOS or Material 3 counterpart, because neither platform ships a star rating control. Build it from this component, and treat the stars as buttons.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Rating, Rating / Score | No rating control. The Apple pages draw stars only inside iOS / Review Prompt, the system review alert, and SwiftUI has no rating view | None in the Material 3 pages. Compose has no rating composable | Both platforms leave the control to the app, so the stars, their targets and their announcements come from this set. |
The minimum touch target is 44 pt on iOS and 48 dp on Android, set by platform/min-touch-target in the Platform collection. The Interactive stars are 36 at gap 8, so they repeat every 44: on iOS the targets tile exactly once each star's hit area runs to the middle of its gap, and on Android widen the row to a 48 pitch.
See Platform Bridge, iOS and Material 3.
Guidelines
Do
Put the number next to the stars. Four stars could be anything from 3.5 to 4.4, and the count is what tells the reader whether to believe it.
Don't
Stars alone are a decoration. Without a count, a perfect score from two people outranks a good one from two thousand, and nobody can tell.
Use Display where a score is one attribute among several, and Score where even that is too much. Use Interactive only where rating is the point of the screen.
Do not fake a half star by scaling the glyph, because the set has no half state.
Give the stars a text alternative. A Display row should read as one sentence, such as Rated 4.2 out of 5 from 128 reviews, with the glyphs hidden from assistive technology.
An Interactive row is a group of five radio buttons with a name for the group and arrow key movement between them, which the live stars do.