In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Rating

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.

The picture shows a mobile rating.
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.

The picture shows a card with stars evaluating a training.
Visual guidelines

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.

This picture shows the different states of the rating.

Sizes

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

This picture shows the differentsizes of the rating
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