Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
77 lines (57 sloc) 2.05 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Star from 'examples/rating/star.js'; import Emoticon from 'examples/rating/emoticon.js';

import Overrides from '../../components/overrides'; import {EmoticonRating, StarRating} from 'baseui/rating'; import {Block} from 'baseui/block'; import * as RatingExports from 'baseui/rating';

export default Layout;


Emoji ratings are to be used to collect a user’s experience in the form of an emotional ranking. Like star ratings, there five options.

Star ratings are to be used to collect feedback from a user’s experience with a product. The stars indicate a performance rating from one to five.


This component uses the [role="radiogroup"] attribute with the following attributes for each individual rating item:

  • [role="radio"]
  • [tabindex=0]
  • [aria-setsize=5] - total number of elements within the Rating
  • [aria-checked] - if the rating is active
  • [aria-posinset] - position within the Rating



<Overrides name="Rating" component={RatingExports} whitelisted={['Root', 'Item']} renderExample={props => ( <React.Fragment> </React.Fragment> )} />


<API heading="Star Rating API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/rating/star-rating.js')} />

<API heading="Emotion Rating API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/rating/emoticon-rating.js')} />

You can’t perform that action at this time.