rating
Provides insight into user opinions for products, experiences, and more
| Type | Purpose |
|---|---|
| Medium (default) | Shows review rating with up to 5 stars highlighted. If rating is zero, star icons are displayed using the grey outline star icon. |
| Linked | Creates a link to the corresponding review content if on the same page. |
| Compact (small) | Removes the word "Reviews" from the label for limited space layout. |
| Sizing | Changes size for the star icon and text. Default size is medium. |
When to use
- Providing a tool for comparing opinions
When not to use
- Displaying a range of data
- Always display the number of reviews next to the star rating
- Use accompanying text label "Reviews" when space allows
Do show all 5 stars.
Don't adjust the number of stars.
Do display the number of reviews next to the star rating.
Don't only show the stars.
Do show an empty rating when no reviews are available.
Don't hide rating in place of "No Ratings Available" or blank space.
- Rating appears with grey outlined stars when no reviews are available
- Link to the corresponding review content if on the same page
What Cedar provides
- Screen reader text is customized to each available variant
- Uses text color with a Level AA contrast ratio of 4.5:1 contrast between the text color and the background (only when displayed on light backgrounds)
- Replaces icon stars with utf-8 characters when images are disabled
Text links display:
- Underline text style for mouse usage
- Focus state for keyboard usage
Development responsibilities
When using this component, here's what you are responsible for:
When linking the rating component, provide a valid href value.
By default, the CdrRating component renders the icons in medium size (24px) with the total number of reviews.
Rating values
- The count for reviews are always visible
- Ratings are rounded to the nearest .25 because icons are represented in 25% increments
- Screen reader text is provided which reads, “Rated rounded out of 5 with count reviews"
CdrRating
Props
| Name | Type | Default |
|---|---|---|
rating Required Sets the rating values between 0 and 5. | string|number | 0 |
count Sets the total number of ratings | string|number | null |
compact Hides the word 'reviews' if true | boolean | false |
href Sets the rating component (icons and text) to display inline and wraps them in an anchor tag so they can act as link. | string | |
size Sets the rating size. Possible values: small, medium, large | sizeProps |