BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles

Rating

 
Open in Playroom

Accessibility

To support users with screen readers, an aria-label is used to provide a description of the rating.Translation hint The aria-label can be customised by providing the aria-label prop.Translation hint reviewText is rendered as provided, including when it is a link. Supply the translated phrase, such as “1 review” or “12 reviews”.

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.
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

Displaying the review count

Provide the full review count phrase via the reviewText prop, including pluralisation and a count of zero. If a reviewLink is provided, that phrase is displayed as a link.To handle clicks on the review count, you can provide a onClick handler. When attaching a click handler, reviewLink must be passed so the href stays available for assistive technologies while a handler can call preventDefault().
1 review12 reviews
 
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Rating
  data={{ testid: 'rating-1' }}
  // => data-testid="rating-1"
/>
On this page