Rating
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.
Examples
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.
Sizes
SfRating supports 6 sizes that can be set with the size prop: 'xs', 'sm', 'base', 'lg', 'xl'.
Colors
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.