Overview

The rating component is used to indicate how something has been assessed based on quality, standards, or performance.

Examples

Basic Rating

For a rating, you must minimally provide:

  • emptyIcon: empty icon
  • fullIcon: fully-filled icon
  • halfIcon: half-filled icon
  • label: accessible label
  • max: naximum rating value
  • value: the rating value

The rating component uses EzIcon. For more information about how to provide an icon to Recipe from your application, see EzIcon.

For accessibility purposes, Recipe provides the rating component role="img" and aria-label, based on the label provided.

Code example
Playroom

Color

The same values available for the EzIcon's color can be provided as an optional prop.

We currently support theme palette properties (primary, secondary, error, warning, info, and success) as well as all supported theme colors (ex. common.primary100).

info-icon
Note
Only a select handful of available colors are shown below. All theme properties and colors are supported.
Code example
Playroom

Size

If you want to specify a size, use the size prop. We currently support small, medium (default), large, and inherit.

Code example
Playroom

Current theme

Theme

Contents