Documentation
Feedback
Guides
Storefront Development

Storefront Development
Rating

Rating displays a product rating based on other shoppers' feedback.

The Rating component displays the average rating of a product based on other shoppers' feedback and reviews. Rating supports icons from our components.

Overview

Example
Code

Readonly

Actionable


Import

Import the component from @faststore/ui

_10
import { Rating } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/Rating/styles.scss'


Usage


_10
<Rating value={3.5} icon={<Icon name="Star" />} />


Props


Design Tokens

Local tokenDefault value/Global token linked
--fs-rating-gapvar(--fs-spacing-0)
--fs-rating-color
var(--fs-color-text)

Nested Elements

Icon

Local tokenDefault value/Global token linked
--fs-rating-icon-widthvar(--fs-spacing-3)
--fs-rating-icon-heightvar(--fs-rating-icon-width)

Variants

Readonly


_10
<Rating value={3.5} icon={<Icon name="Star" />} />

Other Icon


_10
<Rating value={3.8} icon={<Icon name="Heart" />} />

Actionable


_10
const [rating, setRating] = useState(3)
_10
<Rating value={rating} onChange={setRating} icon={<Icon name="Star" />} />

Local tokenDefault value/Global token linked
--fs-rating-actionable-gap0
--fs-rating-actionable-icon-widthvar(--fs-rating-icon-width)
--fs-rating-actionable-icon-heightvar(--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"
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page