Developer mode
Opens components on the React tab by default.
Your bookmarks

RatingStars

Shows a static rating of a service such as a hotel.

Before setting off on a journey, travelers want to be sure they’re making the best decisions. Showing them the ratings of available services can increase their trust that they are doing the right thing.

Rating stars show the sums of ratings in a clear visual. They should be used to display the results of previously collected ratings, but not to collect new ratings (they aren’t interactive).

Component status

Figma
Designing
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Component structure

Rating: indicates the rating rounded to a whole number; empty: optionally shows the potential rating not obtained.

Types

Ratings stars can be small, medium, or large.

import Heading from "@kiwicom/orbit-components/lib/Heading";
import RatingStars from "@kiwicom/orbit-components/lib/RatingStars";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => (
  <Stack direction="column">
    <Stack direction="column">
      <Heading type="title3" as="h3">
        Small
      </Heading>
      <RatingStars rating={3} showEmpty />
    </Stack>
    <Stack direction="column">
      <Heading type="title3" as="h3">
        Medium
      </Heading>
      <RatingStars size="medium" rating={3} showEmpty />
    </Stack>
    <Stack direction="column">
      <Heading type="title3" as="h3">
        Large
      </Heading>
      <RatingStars size="large" rating={3} showEmpty />
    </Stack>
  </Stack>
)

The color (based on text colors) can be primary or secondary.

import Heading from "@kiwicom/orbit-components/lib/Heading";
import RatingStars from "@kiwicom/orbit-components/lib/RatingStars";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => (
  <Stack direction="column">
    <Stack direction="column">
      <Heading type="title3" as="h3">
        Primary
      </Heading>
      <RatingStars rating={3} showEmpty />
    </Stack>
    <Stack direction="column">
      <Heading type="title3" as="h3">
        Secondary
      </Heading>
      <RatingStars color="secondary" rating={3} showEmpty />
    </Stack>
  </Stack>
)

Guidelines

Make clear what is being rated

Rating stars automatically come with an aria label to describe the rating in words for those who might not see the visual cues. Use the context to make sure that it’s clear what the rating covers even if a user doesn’t see the stars.

Related components

ButtonLink

To create an interactive experience where users can enter ratings in a place where it’s not the main action, use button links. For other contexts, see our guide on choosing the right action component