Components/Inputs
Rating
Ratings let people score an experience on a scale of five, or show the average score others gave
Playground
Playground
Pick a variant, then hover and click the preview to rate. Arrow keys work too
Types
Types
Star is the default for scores and reviews. Heart suits favourites and likes, where the score is about affection
Sizes
Sizes
Small for review counts in lists, Medium next to body text, Large when the rating is the main task
States
States
Each item is Default, Precision for a half point, or Select. Disabled items are filled grey whatever the value
Usage
When to use
Use when
- People score a product, a service or an order on a simple scale
- You show the average score of many reviews, use half steps for precision
- A quick, low effort answer is enough and a written review is optional
Avoid when
- You need a precise answer like a number or a percentage, use a Text Input
- The answer is yes or no, use a Switch or a Checkbox
- The options have their own names, like sizes or plans, use a Radio Group
Guidance
Do and don’t
Show the score as a number next to the read only rating, so it reads without counting
Don’t mix stars and hearts for the same kind of score on one screen
Specs
Tokens and specs
PropertyTokenValue
Item size—12 / 20 / 28
Items—5
Empty item#D1D1D1
Star, selected#F6B51E
Heart, selected#FB3748
Disabled item#D1D1D1
Precision—left half filled, outline in the selected color
Heart outline—1.2 / 1.4 / 1.6 px
Gap between items—2 / 4 / 4 px