Components

Star Rating

Display a star rating out of 5.0

Migrating from v1

StarRatingV2 keeps the v1 StarRating prop names (rating, hoverRating, size, onStarClick, onStarHover, onMouseLeave) and behaves identically, so most call sites can migrate by swapping the import. The visual is now painted entirely from v2 semantic rating tokens instead of hardcoded colors. Two props are added: accessibilityLabel (overrides the auto-generated label) and name (the radio group name, which now defaults to a unique per-instance value instead of a shared "rating").

Basic examples

Sizes

<>
  <div>
    <StarRatingV2 rating={0} />
  </div>
  <div>
    <StarRatingV2 rating={2.5} />
  </div>
  <div>
    <StarRatingV2 rating={5} />
  </div>
  <div>
    <StarRatingV2
      rating={0}
      size="medium"
    />
  </div>
  <div>
    <StarRatingV2
      rating={2.5}
      size="medium"
    />
  </div>
  <div>
    <StarRatingV2
      rating={5}
      size="medium"
    />
  </div>
  <div>
    <StarRatingV2
      rating={0}
      size="large"
    />
  </div>
  <div>
    <StarRatingV2
      rating={2.5}
      size="large"
    />
  </div>
  <div>
    <StarRatingV2
      rating={5}
      size="large"
    />
  </div>
</>

`StarRatingV2` with inline text

<div className="flex">
  <StarRatingV2
    rating={2.7}
    size="large"
  />
  <span className="ml3 b">
    13 reviews
  </span>
</div>

Event listeners

The hoverRating, onStarClick, onStarHover, and onMouseLeave props make it possible to build an interactive StarRatingV2 component. Providing onStarClick or onStarHover switches the component into its interactive mode.

function StarRatingExample() {
                    const [rating, setRating] = React.useState(3);
                    const [hoverRating, setHoverRating] = React.useState(undefined);

                    return (
                        <StarRatingV2
                            size="large"
                            rating={rating}
                            hoverRating={hoverRating}
                            onStarClick={value => {
                                setRating(value);
                                console.log(`StarRatingV2: Clicked on ${value}`);
                            }}
                            onStarHover={value => {
                                setHoverRating(value);
                                console.log(`StarRatingV2: Hovered over ${value}`);
                            }}
                            onMouseLeave={() => {
                                setHoverRating(undefined);
                                console.log('StarRatingV2: onMouseLeave');
                            }}
                        />
                    );
                }

Props

StarRating

rating
required
Number from 0-5 at increments of 0.5. Numbers between these steps will be rounded.

Type
number
hoverRating
Number from 0-5 at increments of 1. hoverRating trumps rating with respect to star highlighting.

Type
0 | 1 | 2 | 3 | 4 | 5
Default
0
size
The size of the component when rendered

Type
'small' | 'medium' | 'large'
Default
'small'
onStarClick
Function that is called when a user clicks on a star. The function is supplied a single parameter?: the value of the clicked star.

Type
(value: number) => void
Default
noop
onStarHover
Function that is called when a user hovers over a star. The function is supplied a single parameter?: the value of the hovered star.

Type
(value: number) => void
Default
noop
onMouseLeave
Function that is called when a user mouses away from the StarRating component

Type
() => void
Default
noop