Skip to main content

Rating

A rating is an informative element used to collect or display user ratings or feedback.

Dos and Don'ts

Do
  • Use as a tool for users to compare others' opinions.
Don't
  • Don't customise the amount of stars. Ratings should always have five available stars.

Anatomy

Annotated diagram of a rating component showing its three star states: filled, partially filled, and empty.
  1. Star: Filled.
  2. Star: Partially filled and only available in the static variant.
  3. Star: Empty.

Variants

Interactive

Used to collect the user's satisfaction regarding a product, service or item.

A rating component in the interactive variant, showing five stars for user input.

Static

Used to display the average rating of user's reviews.

A rating component in the static variant, showing a filled star rating display.

Sizes

Name Component Size Notes
XX Large Rating component at XX Large size 56px Recommended to be used to be interactive.
X Large Rating component at X Large size 40px Recommended to be used to be interactive.
Large Rating component at Large size 32px Recommended to be used to be interactive.
Medium Rating component at Medium size 24px Recommended to be used as a static display.
Small Rating component at Small size 20px Recommended to be used as a static display.
X Small Rating component at X Small size 16px Recommended to be used as a static display.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Rating component showing the default interactive state.

Hover

Rating component showing the hover interactive state.

Selected

Rating component showing the selected interactive state.

Examples

LTR example

Here are some examples of the Rating component in the LTR context.

First example of a rating component in a left-to-right layout.
Second example of a rating component in a left-to-right layout.
Third example of a rating component in a left-to-right layout.

RTL example

Here are some examples of the Rating component in the RTL context.

First example of a rating component in a right-to-left layout.
Second example of a rating component in a right-to-left layout.
Third example of a rating component in a right-to-left layout.
Back to top