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.
Behaviours
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.
Sizes
It is available in two sizes (medium and extra-small).
Code & Design assets
Request code and design assets for creating user interfaces.
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.