Rating
Rating shows a score out of five, and collects one when someone is asked to give it.
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.
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, inline, five variants. Stars, a score, and a count you can turn off.
The star row is a fixed 88 whatever the score, so only the text after it changes the width. Empty stars here are grey silhouettes, not outlines. Until 7 Sep 2026 the three star variant had no count node, so the count came and went with the variant. It has one now, and visibility is a Show Count boolean.
Interactive
The input version. 212 by 84, 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 rather than filled, so it reads as an outline. That is deliberate, and it makes Interactive look lighter than Display stars blown up. The hint names every step of the scale. Stars are drawn at 36, and the component description asks for a 44 target on iOS and 48 on Android, so the target is yours to add.
Properties
Three axes and one boolean, eleven variants. Two of the axes only apply to one style each.
Rating holds the value for Display, Selected holds it for Interactive, and each is dead in the other style. Widths move with the text, not the stars: the star row is 88 in every Display variant, so 3 at 144 is narrower than 4 at 152 and wider than 2 at 146. Score, count and hint are text overrides, so a real number means editing the instance. There is no half star: 4.6 shows four stars and the number carries the rest.
Tokens
Four values, and the gold is the odd one out.
The gold is colors/yellow/400, a primitive with a single mode, so it stays #FFB900 while everything around it themes. It is the only raw primitive here, and there is no semantic token to reach for if you want a second gold. One token, two techniques: the empty star is a solid silhouette in Display and the same path stroked at 2 in Interactive.
Guidelines
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.
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. Use Interactive only where rating is the point of the screen, and give every star a 44 target on iOS, 48 on Android. Turn Show Count off rather than emptying the text, so the row closes up instead of leaving a gap. Do not fake a half star by scaling the glyph; the set has no half state.