Rating

Accessibility

To support users with screen readers, an aria-label is used to provide a description of the rating. The aria-label can be customised by providing the aria-label prop.

Variants

The appearance can be customised via the variant prop, choosing from full (default), starsOnly or minimal.

Default

Stars only

Minimal

Open in Playroom

Sizing

Follows the same sizing rules as the Text component.

large

standard

small

xsmall

Open in Playroom

Weight

Supports the same weight scale available on the Text component.

Note: Setting the weight prop is only valid when using a variant that displays the text rating.

regular

medium

strong

Open in Playroom

De-emphasizing the tone

The Rating can be de-emphasized by setting the tone to neutral.This makes the icon(s) follow the default text colour, including inverting on dark surfaces to improve contrast.

Open in Playroom

Braid Logo