Rating

Rating displays a read-only star rating of a product or service.

Demo

Usage

Import Rating component

import { Rating } from '@aws-amplify/ui-react';

export const DefaultRatingExample = () => {
  return <Rating />;
};

Value

Pass in a value prop to set the Rating value.

import { Rating } from '@aws-amplify/ui-react';

export const RatingValueExample = () => {
  return <Rating value={3.7} />;
};

Max Value

Pass in an optional maxValue prop to set the maximum value of the Rating component (default maxValue is 5).

import { Rating } from '@aws-amplify/ui-react';

export const RatingMaxExample = () => {
  return <Rating value={6.3} maxValue={10} />;
};

Size

Use the size prop to adjust the size of the Rating component. Options include small, large, and none (default).

import { Rating } from '@aws-amplify/ui-react';

export const RatingSizeExample = () => {
  return (
    <>
      <Rating value={2.5} size="small" />
      <Rating value={2.5} />
      <Rating value={2.5} size="large" />
    </>
  );
};

Colors

The fill color and empty color can be set using the fillColor and emptyColor props.

import { Rating, useTheme } from '@aws-amplify/ui-react';

export const RatingColorExample = () => {
  const { tokens } = useTheme();
  return (
    <Rating
      value={2.5}
      fillColor={tokens.colors.red[60]}
      emptyColor={tokens.colors.green[60]}
    />
  );
};

Custom Icon

A custom icon can be used in the Rating component using the icon prop. The Rating component works well with all major icon sets and these icons can be substituted in using this icon prop. The icon prop will override both the filled and empty icons unless a specific empty icon is also passed in.

import { Rating, Icon } from '@aws-amplify/ui-react';

const IconAdd = () => {
  return <Icon pathData="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" />;
};

export const RatingIconExample = () => {
  return <Rating value={2.5} icon={<IconAdd />} />;
};

Custom SVG Icon

A custom SVG may be used with the Rating component. The color props on the Rating component rely on the svg icon being used inheriting the color property and setting the svg fill to currentColor.

/* styles.css */
.my-cool-svg {
  fill: currentColor;
}

import { Rating } from '@aws-amplify/ui-react';

const MyCoolSvg = () => {
  return (
    <svg className="my-cool-svg">
      <g>
        <g>
          <path d="M14.5,17c0,1.65-1.35,3-3,3s-3-1.35-3-3h2c0,0.55,0.45,1,1,1s1-0.45,1-1s-0.45-1-1-1H2v-2h9.5 C13.15,14,14.5,15.35,14.5,17z M19,6.5C19,4.57,17.43,3,15.5,3S12,4.57,12,6.5h2C14,5.67,14.67,5,15.5,5S17,5.67,17,6.5 S16.33,8,15.5,8H2v2h13.5C17.43,10,19,8.43,19,6.5z M18.5,11H2v2h16.5c0.83,0,1.5,0.67,1.5,1.5S19.33,16,18.5,16v2 c1.93,0,3.5-1.57,3.5-3.5S20.43,11,18.5,11z" />
        </g>
      </g>
    </svg>
  );
};

export const RatingSVGExample = () => {
  return <Rating value={2.5} icon={<MyCoolSvg />} />;
};

Custom Empty Icon

A custom empty icon can be used in the Rating component using the emptyIcon prop. The emptyIcon prop will only affect the empty icon being rendered and by passing in an empty icon there will be different icons being rendered for the empty icons and filled icons. This is in contrast to the icon prop which will override both the empty and filled icons being used.

import { Rating, Icon } from '@aws-amplify/ui-react';

const IconStarBorder = () => {
  return (
    <Icon pathData="M22 9.24L14.81 8.62L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27L18.18 21L16.55 13.97L22 9.24ZM12 15.4L8.24 17.67L9.24 13.39L5.92 10.51L10.3 10.13L12 6.1L13.71 10.14L18.09 10.52L14.77 13.4L15.77 17.68L12 15.4Z" />
  );
};

export const RatingEmptyExample = () => {
  return <Rating value={2.5} emptyIcon={<IconStarBorder />} />;
};

CSS Styling

Theme

You can customize the appearance of all Rating components in your application with a Theme.

Rating Theme Source

import { Rating, Flex, ThemeProvider, Theme } from '@aws-amplify/ui-react';

const theme: Theme = {
  name: 'rating-theme',
  tokens: {
    components: {
      rating: {
        filled: { color: { value: '{colors.yellow.60}' } },
        empty: { color: { value: '{colors.neutral.40}' } },
        small: { size: { value: '{fontSizes.xxs}' } },
        default: { size: { value: '{fontSizes.large}' } },
        large: { size: { value: '{fontSizes.xxxl}' } },
      },
    },
  },
};

export const RatingThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Flex direction="column">
      <Rating value={3} size="small" />
      <Rating value={3.5} />
      <Rating value={5} size="large" />
    </Flex>
  </ThemeProvider>
);

Target classes

Class	Description
`amplify-rating`	Top level element that wraps the Rating primitive
`amplify-rating__item`	Each element in the Rating primitive
`amplify-rating__icon`	The icons in the Rating primitive
`amplify-rating__label`	Top level element that wraps the Rating primitive

--amplify-components-rating-default-size
--amplify-components-rating-empty-color
--amplify-components-rating-filled-color
--amplify-components-rating-large-size
--amplify-components-rating-small-size

Global styling

To override styling on all Rating components, you can set the Amplify CSS variables or use the built-in .amplify-rating classes.

Filled and empty icon colors

The empty and filled icon colors can be overridden using css variables or the .amplify-rating-icon-filled and .amplify-rating-icon-empty classes.

/* styles.css */
:root {
  --amplify-components-rating-filled-color: var(--amplify-colors-purple-60);
  --amplify-components-rating-empty-color: var(--amplify-colors-blue-60);
}
/* OR */
.amplify-rating-icon-filled {
  color: var(--amplify-colors-purple-60);
}

.amplify-rating-icon-empty {
  color: var(--amplify-colors-blue-60);
}

Sizes

The size variations on the Rating component can be overridden at the application level using CSS variables

  /* styles.css */
  :root {
    --amplify-components-rating-small-size: var(--amplify-font-sizes-xxxl);
  }
  /* OR */
  .amplify-rating[data-size=small] {
    font-size: var(--amplify-font-sizes-xxxl);
    line-height: var(--amplify-font-sizes-xxxl);
  }

Local styling

The Rating component styling props can be overridden using a custom class name and the built-in CSS classes.

Filled and empty icon colors

The empty and filled icon colors can be overridden using a custom CSS class on your Rating component and with the .amplify-rating-icon-filled and .amplify-rating-icon-empty classes

.my-rating-component .amplify-rating-icon-filled {
  color: var(--amplify-colors-purple-60);
}

.my-rating-component .amplify-rating-icon-empty {
  color: var(--amplify-colors-blue-60);
}

import { Rating } from '@aws-amplify/ui-react';

export const RatingStyleColorExample = () => {
  return <Rating value={2.5} className="my-rating-component" />;
};

Sizes

The size variations on the Rating component can be overridden at the individual component level. Here we override the small size to display xxxl stars.

/* styles.css */
.large-rating[data-size='small'] {
  font-size: var(--amplify-font-sizes-xxxl);
  line-height: var(--amplify-font-sizes-xxxl);
}

import { Rating } from '@aws-amplify/ui-react';

export const RatingStyleSizeExample = () => {
  return <Rating value={2.5} className="large-rating" size="small" />;
};