Rating is an element to select or display a qualitative value.

General guidelines

Use the rating for the user to make a quick selection in relation to the minimum and maximum options proposed, most of the time 5.

We recommend using the conventional star rating scale: filled or half filled to show the selected or attained values and outlined to show values that can still be selected or are not yet attained.

Interactive rating

When this element is used to enter a value, this usage must be clearly indicated (by inviting the user to vote or to estimate the quality of a service or a product, for example).

Mostly and especially on mobile devices, use the medium size in order to facilitate the touch usage.

The rating element is often used in forms or modals.

Static rating

When displaying a value, the rating element is essentially used to evaluate an experience (giving opinions about products or services, associated with a comment, etc.)

The use of the small size is recommended.

Visual guidelines


A rating star has six states: unselected, hover selected, half selected, focus unselected, focus selected.

The color of the element is the interactive blue by default. For non interactive ratings, the visual style could be adapted if the element looks too affordant.



It is available in two sizes (medium and extra-small).

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top