Rating

Components

Rating

Code

Renders a visual representation of a user-generated rating using stars or a custom icon set.

Rating supports dynamic icon rendering based on value, allowing full, half, or empty states to represent fractional scores. Ideal for product reviews, feedback forms, or any feature that needs a quick, intuitive display of rating data.

import { Rating } from '@sproutsocial/racine'

<Rating rating={3.5} />

Properties

Name	Type	Default
`emptyIcon`	`React.ReactNode`	`<Icon name="star-outline" color="yellow.600" />`
`halfIcon`	`React.ReactNode`	`<Icon name="star-half-outline" color="yellow.600" />`
`filledIcon`	`React.ReactNode`	`<Icon name="star-full-solid" color="yellow.600" />`
`rating`	`number`
`scale`	`number`	`5`

Recipes

<Rating 
	rating={6.5}
	scale={10}
	emptyIcon={<Icon name="yelp-full-star" color="neutral.200" />}
	halfIcon={<Icon name="yelp-half-star" color="network.yelp" />}
	filledIcon={<Icon name="yelp-full-star" color="network.yelp" />}
/>