<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.

Accessibility

If you’re not using SWAN’s i18n system,

  • 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).
  • When using the reviews prop, the accessibleTextForReviewCount 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.

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.

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
aria-labelstringfalse
⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
A localized label for describing the rating stars to assistive tech users. Should include the word "Rating", the number of filled stars, an the number of total stars. @example "Rating: 3.5 out of 5 stars"
null
ratingValuenumbertrue
The number of stars to be filled and the number shown, can have one decimal place
0
hideRatingboolean | nullfalse
Hides the numeric rating
false
reviewsnumber | nullfalse
The amount of reviews
null
hrefstring | nullfalse
The link to the reviews
null
skin"standard" | "monochromatic" | nullfalse
The visual style of the Rating Stars
standard
accessibleTextForReviewCountstringfalse
⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
A localized label for describing the review count to assistive tech users. Should include the word "Reviews" and the total number. @example "100 reviews" If there are multiple reviews on a page (for example, one per product in a list of products), include a detail that distinguishes them from each other (for example, the product name). @example "100 reviews, Standard Business Cards"
null