Rating
Read-only star representation of a numeric score.
Add it to your project
Eject the complete rating group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject ratingbash
npx toucan eject ratingapp.tsx
import { Rating } from '@/components/toucan/rating';Use when
A bounded score should be shown as a familiar star rating.
Avoid when
Users need to enter the rating; this component is display-only.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Rating
Rating
Props type: RatingProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | undefined | No | Custom aria-label (defaults to "{value} out of {max}") |
max | number | 5 | No | Total number of stars |
size | "sm" | "md" | "lg" | 'md' | No | Star size |
value | number | — | Required | Rating score (e.g. 3, 4.5) |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
RatingProps
Accessibility
- Exposes a text label describing the value and maximum.
Token families
rating