Rating
The Rating component displays the average rating of a product based on other shoppers' feedback and reviews. Rating supports icons from our components.
Overview
Import
Import the component from @faststore/ui
import { Rating } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/molecules/Rating/styles.scss'Usage
<Rating value={3.5} icon={<Icon name="Star" />} />Props
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-rating-gap | var(--fs-spacing-0) |
--fs-rating-color | var(--fs-color-text) |
Nested Elements
Icon
| Local token | Default value/Global token linked |
|---|---|
--fs-rating-icon-width | var(--fs-spacing-3) |
--fs-rating-icon-height | var(--fs-rating-icon-width) |
Variants
Readonly
<Rating value={3.5} icon={<Icon name="Star" />} />Other Icon
<Rating value={3.8} icon={<Icon name="Heart" />} />Actionable
const [rating, setRating] = useState(3)
<Rating value={rating} onChange={setRating} icon={<Icon name="Star" />} />| Local token | Default value/Global token linked |
|---|---|
--fs-rating-actionable-gap | 0 |
--fs-rating-actionable-icon-width | var(--fs-rating-icon-width) |
--fs-rating-actionable-icon-height | var(--fs-rating-actionable-icon-width) |
Customization
For further customization, you can use the following data attributes:
data-fs-rating
data-fs-rating-button
data-fs-rating-icon-wrapper
data-fs-rating-icon-outline
data-fs-rating-item="empty" | "partial"
data-fs-rating-actionable="true"