RatingButton
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.
Examples
Basic usage
To make the RatingButton work you just have to provide a state.
Sizes
RatingButton comes with three different sizes which are compatible with StorefrontUI icons. Size of the RatingButton maps to the icon size as follows:
SfRatingButtonSize.sm->SfIconSize.baseSfRatingButtonSize.base->SfIconSize.lgSfRatingButtonSize.lg->SfIconSize.xl
Adjust maximum rating score value
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.
Custom icon
You can customize an icon of the RatingButton using a scoped slot.
.It passes some usefull props that you can use to manage your custom icons.
Accessibility notes
RatingButton follows WAI-ARIA guidelines 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 getLabelText prop.