Components

Rating Stars

scss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
webComponent
:Ready

Rating stars is a pattern you'll find in almost every website. It has two main usages. First, it allows the user to give feedback on the current experience with a product or a service. Second, it allows a brand to provide some informations on other user's opinion on a product or a service to make his choice easier.

Variations

For each use case we have one dedicated element :

Rating stars input

This allows the user to rate a product or a service. The user can only give an integer rate from 0 to 5 by clicking the corresponding star.

Rating stars result

This use case is made to display notes from 0 to 5. This case allows half values, like 2,5 stars for example. This case shows the results of user rated products or services.

Sizes

We designed rating stars with modularity in mind. You will find four different sizes of these to adjust to your needs.

            
 Small
 Medium
Large
 ExtraLarge

Do's and don't

Never use single rating stars. They should always be displayed within a group of 5.
mc-stars-input should always have a label that indicates the user the ability to rate the product or the service.
Don't try to reinvent standards and stick to the 5 stars ratings.
Always use real data with rating stars. Never fake data to enforce a product or a service quality.