Components

Rating

A 5-star rating: an inline row of star buttons drawn as inline SVG with currentColor. Filled stars read accent, empty stars read the rule color. Click a star, or focus the group and use the arrow keys then Enter to set the value. A readonly modifier renders display-only stars.

Interactive

Each star is a __star button; .is-on fills it with the accent. Click to set; with the demo wired below, hovering previews and the choice sticks.

.ds-rating

<div class="ds-rating" role="group" aria-label="Rating">
  <button type="button" class="ds-rating__star is-on" aria-label="1 star" aria-pressed="false">
    <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1.5l2.47 5.18 …z"/></svg>
  </button>
  <!-- …stars 2–3 .is-on, 4–5 empty… -->
</div>

Readonly

The --readonly modifier drops the pointer affordance for display-only ratings (e.g. an aggregate score). Empty stars read the rule color.

.ds-rating--readonly

<div class="ds-rating ds-rating--readonly" role="img" aria-label="Rating: 4 of 5">
  <span class="ds-rating__star is-on"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 1.5l…z"/></svg></span>
  <!-- …stars 2–4 .is-on, 5 empty… -->
</div>

React

The <Rating> component is controlled (value) or uncontrolled (defaultValue); click or ArrowLeft/Right + Enter sets it. Pass readOnly for display.

import { Rating } from "@diametral/design-system/react";

<Rating defaultValue={3} onChange={(v) => console.log(v)} />
<Rating value={score} onChange={setScore} />
<Rating value={4} readOnly />