Rating
Visualize user feedback
Source ↗️ Report Issue ↗️Use the Rating
component to visualize user feedback for rated items or services on a predefined scale. They can provide valuable insights into the quality and popularity of products, services, or content.
Scores
Using the score
and total
props, you can create different amounts of star ratings:
Sizes
To change the size of the stars, modify the size
prop:
If you need to change the size of your stars globally, override the following CSS variable instead:
Styles
Colors and the way empty stars behave can also be customized using the color
, emptyColor
, outline
and showEmpty
props:
If you need to globally set the style of the Rating
component, override the following CSS variables instead of using props:
Ratings with Review Text
Ratings can also be created with review text using the following props:
text
: Display “x out of y” after the stars.showText
: Thetext
prop is only displayed ifshowText
is set totrue
.reviewText
: Display “x reviews” after the stars if thereviewCount
prop is set.reviewLink
: Adds a link for thereviewText
prop.reviewTarget
: Adds a link target for the link set inreviewLink
.
API
Prop | Purpose |
---|---|
score | Set the score of the rating. |
total | Sets the total number of stars. Defaults to 5. |
text | Sets a text after rating. Defaults to "{0} out of {1}" wherer {0} is the current score, and {1} is the total score. |
showText | Sets whether to show the text prop or not. Defaults to false . |
showEmpty | Sets whether to show empty stars. Defaults to true . |
outline | Sets whether to show empty stars as outlines only. Defaults to true . |
reviewCount | Sets the number of reviews to be displayed after the stars. |
reviewText | Sets the review text to be displayed after the stars. Defaults to "{0} reviews", where {0} is the number of reviews set from the reviewCount prop. Only displayed if reviewCount is greater than 0. |
reviewLink | Sets a link for the review text. |
reviewTarget | Sets the target of the link set in reviewLink . |
color | Sets the color of the stars. |
emptyColor | Sets the color of the empty stars. |
size | Sets the size of the stars. Defaults to 18px . |
className | Pass additional CSS classes for the rating. |
Request improvement for this page