Skip to contentSkip to navigation
DocsDocs

Rating

A read-only rating, as stars.

StableSince 1.0.0
On this page

Overview

Show code, ReviewScore.tsx

Variants

Stars only

A list of individual reviews.

With the number

A summary people compare.

Another scale

Other than five steps, such as ten.

Stars only, with the number, and on a scale of ten stars.

Show code, Scales.tsx

Anatomy

  1. Number

  2. Stars

  3. Filled star

  4. Half star

  5. Empty star

Show code, RatingAnatomy.tsx

Behaviour

Rounding

The stars, the number and the name show the value to the nearest half star: 4.3 shows as 4.5. A value outside the scale shows as its nearest end.

In another language

The name and the number follow the application's language, such as 4,5 in German.

Show code, ApplicationLabel.tsx

Rules

A rating only shows a score people gave; to ask for one, use a separate input.

Use it when

  • A rating people gave, such as a review score or an average of many
  • A compact summary of quality beside a name in a list, a card or a row
DoSay whose rating it is and how many people gave it.
Show code, WhoRated.tsx

One scale

Keep to one scale on a page, so ratings compare at a glance.

Related

  • Asking someone to give a rating; offer a few labelled choices instead.

  • Asking for a value on a continuous scale, such as a satisfaction score from 0 to 100.

  • A measurement within a known range, such as storage used.

  • A key figure on a dashboard, such as the average score this month.