Usage

import { Rating } from '@pillar-ui/core'

<Rating />

Examples

Title

4 stars out of 5

fake label

4 stars out of 5

import { Rating } from '@pillar-ui/core'

export const RatingTitle = () => {
  return (
    <>
      <Rating rating={4} hideTitle />
      <Rating rating={4} title="fake label" />
      <Rating rating={4} />
    </>
  )
}

Rating

1 starfalse out of 5

2 stars out of 5

3 stars out of 5

4 stars out of 5

5 stars out of 5

import { Rating } from '@pillar-ui/core'

export const RatingRating = () => {
  return (
    <>
      <Rating rating={1} />
      <Rating rating={2} />
      <Rating rating={3} />
      <Rating rating={4} />
      <Rating rating={5} />
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

4 stars out of 5

import { Rating } from '@pillar-ui/core'

export const RatingSize = () => {
  return (
    <>
      <Rating rating={4} size="1" />
      <Rating rating={4} size="2" />
      <Rating rating={4} size="3" />
      <Rating rating={4} size="4" />
      <Rating rating={4} size="5" />
      <Rating rating={4} size="6" />
      <Rating rating={4} size="7" />
      <Rating rating={4} size="8" />
      <Rating rating={4} size="9" />
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

4 stars out of 5

import { Rating } from '@pillar-ui/core'

export const RatingColor = () => {
  return (
    <>
      <Rating color="d" rating={4} />
      <Rating color="p" rating={4} />
      <Rating color="se" rating={4} />
      <Rating color="su" rating={4} />
      <Rating color="w" rating={4} />
      <Rating color="b" rating={4} />
      <Rating color="i" rating={4} />
    </>
  )
}

Icon

4 stars out of 5

import { Rating } from '@pillar-ui/core'

export const RatingIcon = () => {
  return (
    <>
      <Rating icon="heart" rating={4} color="d" />
      <Rating rating={4} />
    </>
  )
}