A component to view other people’s opinions and experiences. Use when you want to show evaluation or a quick quantitative rating. Most effective when paired with reviews.
import React from 'react' import StarRating from 'playbook-ui' const StarRatingDefault = (props) => ( <> <StarRating paddingBottom="xs" /> <StarRating paddingBottom="xs" rating={0.9} /> <StarRating paddingBottom="xs" rating={1.5} /> <StarRating paddingBottom="xs" rating={3} /> <StarRating paddingBottom="xs" rating={4.2} /> <StarRating paddingBottom="xs" rating={5} /> </> ) export default StarRatingDefault
import React from 'react' import StarRating from 'playbook-ui' const StarRatingColorOptions = (props) => ( <> <StarRating paddingBottom="xs" rating={3} /> <StarRating colorOption='primary' paddingBottom="xs" rating={3} /> <StarRating colorOption='subtle' paddingBottom="xs" rating={3} /> </> ) export default StarRatingColorOptions
import React from 'react' import StarRating from 'playbook-ui' const StarRatingHide = (props) => ( <> <StarRating paddingBottom="xs" rating={3} /> <StarRating layoutOption={"number"} paddingBottom="xs" rating={2.8} /> <StarRating layoutOption={"number"} paddingBottom="xs" rating={3} /> <StarRating layoutOption={"onestar"} paddingBottom="xs" rating={1} /> </> ) export default StarRatingHide
import React from 'react' import StarRating from 'playbook-ui' const StarRatingNumberConfig = (props) => ( <> <StarRating denominator={3} paddingBottom="xs" rating={3} /> <StarRating denominator={4} paddingBottom="xs" rating={3} /> <StarRating denominator={5} paddingBottom="xs" rating={3} /> <StarRating denominator={6} paddingBottom="xs" rating={3} /> <StarRating denominator={7} paddingBottom="xs" rating={3} /> <StarRating denominator={8} paddingBottom="xs" rating={3} /> </> ) export default StarRatingNumberConfig
import React from 'react' import StarRating from 'playbook-ui' const StarRatingSizeOptions = (props) => ( <> <StarRating paddingBottom="xs" rating={3} size="xs" /> <StarRating paddingBottom="xs" rating={3} size="sm" /> <StarRating paddingBottom="xs" rating={3} size="md" /> <StarRating paddingBottom="xs" rating={3} size="lg" /> <StarRating layoutOption="number" paddingBottom="xs" rating={3} size="lg" /> <StarRating layoutOption="onestar" paddingBottom="xs" rating={3} size="lg" /> </> ) export default StarRatingSizeOptions