Component

ba-star-rating

A component for presenting a star rating out of 5

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Live Demo

<ba-star-rating rating="2.5"></ba-star-rating>

Accessibility

The ba-star-rating element does not contain any elements that assistive technology would recognise as clickable. It is purely presentational and should be treated as such.

As our approach is to always supply supportive text when using icons, the icons can be considered to be decorative and the nested SVGs can be hidden from screen readers.

Code

Properties and Attributes

Property	Attribute	Description	Type	Default
`rating`(required)	`rating`	Value out of 5 to display	`string`	`undefined`
`size`	`size`	Size of the stars in the star rating	`"12" \| "16" \| undefined`	`'12'`

Slots

No slotted content available for this component.

Parent components

ba-star-rating can be slotted into:

Usage

The star rating component is used to display a rating out of 5. The rating is passed as a string to the rating property.

Showing a rating of 3 oout of 5

<ba-star-rating rating="3"></ba-star-rating>