Rating

One to five stars for a review or a product score, readable without colour and announced to screen readers.

CSS only components/rating.css

Scores and sizes

Always five stars: filled for the score, outline for the rest, so it reads without colour. role="img" + aria-label gives screen readers the score. data-size="s" for lists.

<div class="dsgn-stack"><span class="dsgn-rating" role="img" aria-label="5 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span></span><span class="dsgn-rating" role="img" aria-label="4 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span></span><span class="dsgn-rating" role="img" aria-label="3 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span></span><span class="dsgn-rating" role="img" aria-label="2 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span></span><span class="dsgn-rating" role="img" aria-label="1 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span></span><span class="dsgn-rating" data-size="s" role="img" aria-label="4 out of 5 stars"><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" data-fill aria-hidden="true">star</span><span class="dsgn-icon" aria-hidden="true">star</span></span></div>

Usage

Always five stars: filled ones (data-fill, accent colour) for the score, outline ones for the rest, so the score is readable without colour. The label carries the score for screen readers (role="img" + aria-label); the stars are decorative. Read-only — a star picker for a form is a radio group, not this.

Attributes

Attribute	Values and notes
`data-size`	s (16 px stars, for lists and cards) · default 20 px

Details

Classes: .dsgn-rating .dsgn-icon
Tokens used: --dsgn-accent-solid --dsgn-border-control --dsgn-space-16 --dsgn-space-2 --dsgn-space-20
In Figma: Rating
Import alone: dsgn.systems/components/rating.css