Skip to content
Tabler UX Components

StarRating

Shows a score as a row of stars: the rating of a review, a product or a supplier. The stars are read-only. Tabler’s interactive star rating, which lets the user pick a score, relies on a third-party JavaScript library and is not covered.

Values

Section titled “Values”

value is the number of colored stars, max the total number of stars (5 by default). Stars are whole: value="3.5" colors 3 stars. Round the score yourself and pass the exact one in aria-label:

Colors

Section titled “Colors”

variant colors the active stars, yellow by default. It takes the same colors as Legend: see the list. icon replaces the star with another Tabler icon. Change the aria-label to match. filled uses the filled icons, which need the filled webfont: see Icon.

Sizes

Section titled “Sizes”

The stars follow the font size of the row, 0.75rem by default. Pass a font size class such as fs-3. The --tblr-stars-gap CSS variable sets the space between the stars.

Accessibility

Section titled “Accessibility”

The row gets role="img" and an aria-label such as “4 out of 5”. Pass your own aria-label to replace it. The star icons are hidden from assistive technology (aria-hidden="true"). Also show the score as text next to the stars, so it does not rely on color alone:

Composed

Section titled “Composed”

The tag content replaces the stars: place one StarRating:Star per star and color some with active. value, max, variant, icon and filled are then ignored, so give each star its own variant, icon and filled. A composed rating gets no default label, since it cannot count the stars: pass an aria-label, and it gets role="img".

Props

Section titled “Props”
Prop Type Default Description
value int 0 Number of active stars
max int 5 Total number of stars; 0 renders none
variant string 'yellow' Color of the active stars, see Colors
icon string 'star' Tabler icon name of each star
filled bool false Filled icons, see Icon

Other attributes go to the root <div class="stars">. It gets role="img" and an aria-label of “value out of max”, unless you pass your own.

StarRating:Star

Section titled “StarRating:Star”
Prop Type Default Description
active bool false Colors the star with variant. Inactive stars stay gray
variant string 'yellow' Color when active, see Colors
icon string 'star' Tabler icon name
filled bool false Filled icon, see Icon

Other attributes go to the star <span>.

Sub-components

Section titled “Sub-components”
Component Renders
StarRating:Star <span class="star">, one star

Blocks

Section titled “Blocks”
Block Default
content max × StarRating:Star, the first value ones active
content (StarRating:Star) The icon, hidden from assistive technology

Made by SILARHI, released under the MIT license.