Rating

Stars or hearts that display a score or collect one: a Rating & Review summary, Rating Cells to set a score, a five-step Rating Bar in emoji or numbers, and distribution rows.

DesignReactVuePrompts

Copy

1

2

3

4

5

6

import { RatingBar } from '@orvain/react';
 
<RatingBar type="star" name="rating" onValueChange={(value) => console.log(value)} />
<RatingBar type="heart" defaultValue={3} />
<RatingBar type="number" value={rating} onValueChange={setRating} />
<RatingBar type="star" value={4} readOnly />

Add an Orvain Rating showing 4.5 out of 5 stars, the marks only, no text.

Orvain MCPIncluded with the library

When to use#

• To collect a quick score, such as a review, a support rating or a recommendation.
• Read-only, to show an average next to its count.

When not to use

• Use a Slider for a precise value on a long scale.

Anatomy#

States#

Source#

Preview – final code pending

The Rating is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published

Used in these blocks