Ratings Stars show the current rating for a product, on a scale of 1 to 5.
The rating itself can have one decimal place, e.g. a rating of 3.4.
You can add a reviews count and link to RatingsStars by setting the reviews and href props.
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.
Image appears larger than the actual component.
The Ratings Stars includes the following elements:
The Ratings Stars is available in the following variants:
Use the default variant when displayed on a white/light gray background.
Use the “monochromatic” variant when the stars are shown on top of a colored background such as a hero or banner.
The Ratings Stars component doesn’t have different states.
Below are examples of how the Ratings Stars appear in both light and dark mode.
The Ratings Stars component only consists of the star icons and does not contain any text.
Do
Don'taria-label attribute that describes its contents, such as "Rating: 3.5 out of 5 stars". (Compare this to alt text on an image).<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| ratingValue | number | true | The number of stars to be filled and the number shown, can have one decimal place | 0 |
| href | string | null | false | The link to the reviews | null |
| skin | "standard" | "monochromatic" | null | false | The visual style of the Rating Stars | standard |
| hideRating | boolean | null | false | Hides the numeric rating | false |
| reviews | number | null | false | The amount of reviews | null |