Ratings Stars show the current rating for a product, on a scale of 1 to 5.
Usage
The rating itself can have one decimal place, e.g. a rating of 3.4.
The preview has been updated.
Reviews
You can add a reviews count and link to RatingsStars by setting the reviews
and href
props.
The preview has been updated.
"monochromatic" skin
The "monochromatic" skin turns the stars black -- or white when using dark mode. This is intended for use only when the stars are shown on top of a light-colored background such as a hero or banner.
The preview has been updated.
Accessibility
- The contents of the Ratings Stars component are not visible to assistive technologies, so the component needs an
aria-label
attribute that describes its contents, such as "Rating: 3.5 out of 5 stars". (Compare this toalt
text on an image). - When using the
reviews
prop, theaccessibleTextForReviewCount
prop is required to provide descriptive and screen-reader-friendly text for the review count link (e.g.,"Read 125 reviews"
), ensuring it is meaningful to users relying on assistive technologies.