Rating

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

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.

Usage

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.

Example

(52 reviews)

Related components

Properties

NameDescriptionDefaultType
value*The value of the Rating. Could be a decimal or integer.number
aria-labelAria label for screen readers.string
classNameAdditional CSS classes.string
maxRatingThe maximum rating allowed. Must be an integer greater than 1.5number
metaInfoText that is displayed in parentheses inline with the Rating stars.string
readOnlySets the rating to read only.falseboolean
tabIndexThe tabIndex to control focus.0number

Custom theming

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

Example

(52 reviews)

Theme properties

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