The RatingButton component is an interactive input element specifically designed for evaluations on product pages. It provides users with the ability to select a rating by choosing an icon using either the cursor or keyboard input. The number of icons displayed and the actual icon used can be customized based on your specific requirements. The rating scale within the component operates from left to right.
To make the RatingButton work you just have to provide a state.
RatingButton comes with three different sizes which are compatible with StorefrontUI icons. Size of the RatingButton maps to the icon size as follows:
Set any number of stars using
max prop. For example, if you increase the maximum rating score to 10, the component will dynamically generate ten buttons, giving users a wider range of options to rate their experience.
You can customize an icon of the RatingButton using scoped slot. It passes some usefull props that you can use to manage your custom icons.
RatingButton follows WAI-ARIA guidelines (opens new window) for rating radio groups.
To ensure optimal accessibility for RatingButton, we recommend to use either an
aria-label attribute or a paragraph element with an assigned
id and link it with
aria-labelledby. For more details, have a look at examples below
The RatingButton uses hidden radio input elements to satisfy all keyboard functional requirements. Each input element has corresponding label that reflects selected value. By default it says "stars", so make sure you change it when using custom icons. You can change each icon label using