Rating

Displays a product rating based on other shoppers' feedback.

The Rating component displays a product’s average rating based on shopper feedback and reviews. It supports customizable icons provided by the Icon component.

Example

Code

Readonly

Actionable

Usage

Import the component


_10import { Rating } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

Examples

Readonly

Example

Code

Actionable

Example

Code

Custom icon

Example

Code

Design tokens

Local token	Default value/Global token linked
`--fs-rating-gap`	`var(--fs-spacing-0)`
`--fs-rating-color`	`var(--fs-color-text)`
`--fs-rating-color-empty`	`var(--fs-color-neutral-4)`

Design tokens: 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)`

Design tokens: Actionable

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)`
`--fs-rating-actionable-icon-color`	`var(--fs-rating-color-empty)`
`--fs-rating-actionable-icon-color-selected`	`var(--fs-rating-color)`
`--fs-rating-button-min-height`	`var(--fs-spacing-5)`

Data attributes

You can target and override Rating styles using 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"

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-rating`
length	`number`	The length of child elements.	`5`
value	`number`	The current value of the rating, based on the quantity of child elements.	`0`
icon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Icon to represent the rating score unit (e.g.: a <Icon name="Star" /> component)
onChange	`(value: number) => void`	Function to be triggered when Rating option change. This should only be used if you and an actionable rating list.
disabled	`false \| true`	Specifies that the actionable rating should be disabled.