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 handling

The value prop allows you to set the current rating and max number of stars via max prop.

If you need to support partial stars, you can show half-filled star icons by passing the half-increment prop.


SfRating supports 6 sizes that can be set with the size prop: 'xs', 'sm', 'base', 'lg', 'xl'.


Rating by default uses a warning-500 for filled and partially filled stars and disabled-500 as an empty icon color.

Single star with value

For a more minimal look, you can also present ratings a single star icon with a text label.