Rating

The rating component lets users apply a rating to an item or experience, such as a product, a flow, an article and more.

Released

Show details

Rating component applied to the end of an ordering flow

Component	Usage	Placement	User action
Rating	When the user is asked to evaluate something	Embed in a component (e.g. in a product page), or at the end of a flow (e.g. when making an order)	mouse hover rating value to evaluate something

We can use the rating component to get users' feedback, but we should be mindful of when to use it. E.g. Ask the user to rate the ordering experience, in case of new features or improvements to the flow.

Anatomy

Structure

label	Text that indicates the product/flow/process the user is rating for
rating value	Atomic component of the rating component. In this case, we use the star icon.

Sizes and Spaces

	The rating component comes in a single size and can be reused both on desktop and mobile. The rating value is always fixed-sized, and they are centred to the label.

Properties

Property	Value	Description
Label	true false	Text that states what are you rating for
Rating	1 2 3 4 5	The value is the number of the rating selected, on a sentiment scale from 0 to 5 (0 being the lowest, 5 being the highest).
State	default hover pressed disabled read-only	Interaction states for the rating value (the star).
Count	true false	When the rating component is being used to display the rating value of an item, e.g. within a product page, it can have a rating count that shows the total number of reviews.

Behaviour

Interaction

Rating component in action

Only the rating value (stars) is interactive when hovered.

Responsiveness

There is no change to the component when it comes to responsiveness.

Guidelines