All components (204)

Ratings summary

Commerce · RatingSummary · .amset-ratings

What it is and when to use it

The summary of a product's reviews: the average rating in large type, its stars, how many reviews there are and how many for each number of stars.

When to use it

On the product page, above the list of reviews.
breakdown is the distribution: how many reviews (count) each number of stars (stars) has. Bands that do not come in are shown at zero; max changes the ceiling (5 by default).
With onFilter, each band becomes a button to see only those reviews, and filtered marks the active band. What happens when the active one is pressed again (removing the filter, for example) is decided by the consumer.
average when the rating comes from the server; without it, it is calculated from the distribution.

When not to

Only the rating, on a card or in a listing: read-only Rating (the one carried by ProductCard).
For someone to rate: editable Rating, or NpsSurvey if the question is from 0 to 10.
A distribution that is not about stars: BarChart.

Keyboard: without onFilter there is nothing focusable. With it, each band is a button: Tab moves from one to another, and Enter or Space filter. A band with no reviews is disabled and leaves the Tab order.

Accessibility: the bars are decoration (aria-hidden): each row says in words how many reviews there are and what share of the total, "29 (23%)". The label is mandatory and names the stars: a bare "4.5 of 5" does not say of what. Each button is named "Show only 4 stars reviews: 29 (23%)" and the active band carries aria-pressed, in addition to background and weight.

Context: the language of LocaleProvider (or AmsetProvider) sets the decimal separator of the rating and the thousands separator; without a provider, es-ES.

Fine-tuning: CSS variables --amset-ratings-*: -bar, -count, -font, -gap, -note, -over, -row-padding. The size moves the large rating, the thickness of the bar and the font sizes.

What it looks like

5 stars82 (65 %)
4 stars31 (24 %)
3 stars9 (7 %)
2 stars3 (2 %)
1 star2 (2 %)

<RatingSummary
  label="Product reviews"
  breakdown={[
    { stars: 5, count: 82 },
    { stars: 4, count: 31 },
  ]}
/>

Props

Import it with import { RatingSummary } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`breakdown`required	`readonly RatingSegment[]`	—
`label`required	`string`	What is being rated. Required: "4.3 of 5" on its own does not say of what.
`average`	`number`	The average. Without this it is calculated from the breakdown.
`className`	`string`	Merged with the library classes; it does not replace them.
`filtered`	`number \| null`	Band currently being filtered by.
`max`	`number`	—
`onFilter`	`(stars: number) => void`	With this, each bar is a button that filters by those stars.
`size`	`"sm" \| "md" \| "lg"`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-ratings-gap`	`var(--amset-space-4)`
`--amset-ratings-note`	`2.5rem`
`--amset-ratings-over`	`var(--amset-text-base)`
`--amset-ratings-font`	`var(--amset-text-sm)`
`--amset-ratings-count`	`var(--amset-text-xs)`
`--amset-ratings-bar`	`0.5rem`
`--amset-ratings-row-padding`	`var(--amset-space-1) var(--amset-space-2)`

How to change it

.amset-ratings {
  --amset-ratings-gap: ...;
  --amset-ratings-note: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: