Rating

Visualize user feedback

Use the Rating component to visualize user feedback for rated items or services on a predefined scale. They can provide valuable insights into the quality and popularity of products, services, or content.

---
import { Rating } from 'webcoreui/astro'
---

<Rating score={3} />

<script>
    import { Rating } from 'webcoreui/svelte'
</script>

<Rating score={3} />

import React from 'react'
import { Rating } from 'webcoreui/react'

const Component = () => <Rating score={3} />

export default Component

Scores

Using the score and total props, you can create different amounts of star ratings:

<!-- 5/5 star rating -->
<Rating score={5} />

<!-- 5/10 star rating -->
<Rating score={5} total={10} />

Sizes

To change the size of the stars, modify the size prop:

<Rating score={3} size={24} />

If you need to change the size of your stars globally, override the following CSS variable instead:

html body {
    --w-rating-size: 18px;
}

Styles

Colors and the way empty stars behave can also be customized using the color, emptyColor, outline and showEmpty props:

<Rating
    score={3}
    outline={false}
/>

<Rating
    score={3}
    showEmpty={false}
/>

<Rating
    score={3}
    outline={false}
    color="#F7AA61"
    emptyColor="#555"
/>

<Rating
    score={3}
    color="#F7AA61"
    emptyColor="#F7AA61"
/>

If you need to globally set the style of the Rating component, override the following CSS variables instead of using props:

html body {
    --w-rating-color: #FFF;
    --w-rating-empty-color: #BBB;
    --w-rating-empty-background: #000;
}

Ratings with Review Text

Ratings can also be created with review text using the following props:

• text: Display “x out of y” after the stars.
• showText: The text prop is only displayed if showText is set to true.
• reviewText: Display “x reviews” after the stars if the reviewCount prop is set.
• reviewLink: Adds a link for the reviewText prop.
• reviewTarget: Adds a link target for the link set in reviewLink.

<Rating
    score={3}
    showText={true}
/>

<Rating
    score={3}
    showText={true}
    text="{0} from {1}"
/>

<Rating
    score={3}
    reviewCount={123}
/>

<Rating
    score={3}
    reviewCount={123}
    reviewText="{0} ratings"
/>

<Rating
    score={3}
    reviewCount={123}
    reviewText="{0} ratings"
    reviewLink="/reviews"
/>

<Rating
    score={3}
    showText={true}
    reviewCount={123}
    reviewLink="/reviews"
    reviewTarget="_blank"
/>

API

type RatingProps = {
    score: number
    total?: number
    text?: string
    showText?: boolean
    showEmpty?: boolean
    outline?: boolean
    reviewCount?: number
    reviewText?: string
    reviewLink?: string
    reviewTarget?: string
    color?: string
    emptyColor?: string
    size?: number
    className?: string
}