Behive Tech Registry

Rating Stars

v0.0.0

A read-only star rating. Fractional values are drawn with a clipped fill rather than rounded to a half, so 4.3 and 4.7 look different. The stars are decorative — the value is announced once through an `aria-label`.

pnpm add @acme/atoms.rating-stars

A read-only star rating. Fractional values are drawn with a clipped fill rather than rounded to a half, so 4.3 and 4.7 look different. The stars are decorative — the value is announced once through an aria-label.

Usage

Scale

max sets the number of stars; value is on the same scale.

Sizes

Compositions

Open all 4 →

Properties

RatingStars props

PropTypeDefaultDescription
value*number—The rating to show, from 0 to `max`; fractions render as partially filled stars
classNamestring—Additional class names to merge with the component root element
countnumber—Optional review count shown after the stars, e.g. "(128)"
maxnumber5Number of stars; defaults to 5
size"sm" | "md" | "lg"mdControls the star size; defaults to md

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).