Rating
Read-only star rating display. Renders filled, half-filled, and empty stars with token-driven colors and three sizes.
Example
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | number | — | Required | Rating score (e.g. 3, 4.5) |
max | number | 5 | No | Total number of stars |
size | 'sm' | 'md' | 'lg' | 'md' | No | Star size |
label | string | — | No | Custom aria-label (defaults to "{value} out of {max}") |
Accessibility
- role="img" with auto-generated aria-label
- Individual stars are aria-hidden — the container conveys meaning
Related Tokens
--rating-color-filled--rating-color-empty--rating-gap--rating-sm-size--rating-md-size--rating-lg-size