<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Ratings Stars

Display a product rating.
styleKey: ratingsStars

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.

Anatomy

Anatomy of the Ratings Stars

Image appears larger than the actual component.

  1. Rating star - filled
  2. Rating star - partially filled
  3. Rating star - empty

Elements

The Ratings Stars includes the following elements:

Variants

The Ratings Stars is available in the following variants:

Default variant of the Ratings Stars

Default

Use the default variant when displayed on a white/light gray background.

Monochrome variant of the Ratings Stars

Monochrome

Use the “monochromatic” variant when the stars are shown on top of a colored background such as a hero or banner.

Behaviors

States

The Ratings Stars component doesn’t have different states.

Below are examples of how the Ratings Stars appear in both light and dark mode.

Default Ratings Stars in Light Mode

Default Ratings Stars in Light Mode

Default Ratings Stars in Dark Mode

Default Ratings Stars in Dark Mode

Monochrome Ratings Stars in Light Mode

Monochrome Ratings Stars in Light Mode

Monochrome Ratings Stars in Dark Mode

Monochrome Ratings Stars in Dark Mode

Content

Recommendations

The Ratings Stars component only consists of the star icons and does not contain any text.

Best Practices

Visual illustration for the "Do" section

Do

  • Use a single star if you want to simplify the display of ratings.
  • Use the monochrome variation only when the stars are shown on top of a light-colored background such as a hero or banner.
Visual illustration for the "Don't" section

Don't

  • Use the monochrome variation when the stars are on white/light gray, such as on a PDP, a gallery page, or a gallery tile.

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 to alt text on an image).

Props

RatingsStars
This component is implemented using the <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.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
ratingValuenumbertrue
The number of stars to be filled and the number shown, can have one decimal place
0
hrefstring | nullfalse
The link to the reviews
null
skin"standard" | "monochromatic" | nullfalse
The visual style of the Rating Stars
standard
hideRatingboolean | nullfalse
Hides the numeric rating
false
reviewsnumber | nullfalse
The amount of reviews
null
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


ratings-and-reviewsRatingsAndReviews
Published: Jan 7, 2022Last updated: Sep 17, 2024