ba-star-rating

A component for presenting a star rating out of 5

Figma

GitHub

Storybook

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

Slot	Description	Permitted elements

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>