SfRating gives you a nice way to display a rating both with graphics and through text. This can be used to show the rating of a product, score for a review, or any other rating you might need.
value prop allows you to set the current rating and max number of stars via
If you need to support partial stars, you can show half-filled star icons by passing the
SfRating supports 6 sizes that can be set with the
Rating by default uses a
warning-500 for filled and partially filled stars and
disabled-500 as an empty icon color. You can change these values in your Tailwind configuration (opens new window) or override them for a single element using
important modifier (opens new window).
Single star with value
For a more minimal look, you can also present ratings a single star icon with a text label.
For better out-of-the-box accessibility,
role="img" and an
aria-label property with value
Rating: [Avg value] out of [Max value] stars where the values are replaced with the actual values. This can be overridden by passing an
aria-label property to the component.