Rating

The Rating component is a star-based rating system designed to quickly inform a user about the overall feedback or quality of a product or idea. This is a non-interactive component and is intended to display ratings, rather than accept user input.

For more information on how to use the features and props for this component, check out the developer documentation.

The Rating component represents a numerical value within a range of maxRating as solid-filled star Icons. The stars can be partially filled to support decimal values. Additional information may be displayed within paranthesis inline with the stars by passing a metaInfo string.

Seeing as this component is very visual in its representation of a rating, we suggest the use of a fully descriptive aria-label for accessibility purposes.

NameTypeDefaultDescription
value*numberThe value of the Rating. Could be a decimal or integer.
aria-labelstringAria label for screen readers.
classNamestringAdditional CSS classes.
maxRatingnumber5 The maximum rating allowed. Must be an integer greater than 1.
metaInfostringText that is displayed in parentheses inline with the Rating stars.
readOnlybooleanfalse Sets the rating to read only.
tabIndexnumber0 The tabIndex to control focus.

You can override the styles of the Rating component by setting a custom theme on the Configuration component.

{
      •       color: 'base.palette.foreground-color' // → base.palette.foreground-color
      •     }
    •   }
}