Search documentation v0.6.1

Rating

Visualize user feedback

Source ↗️ Report Issue ↗️

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.

Preview
★★★ ★★
How to use Ratings in Astro
---
import { Rating } from 'webcoreui/astro'
---
<Rating score={3} />
How to use Ratings in Svelte
<script>
import { Rating } from 'webcoreui/svelte'
</script>
<Rating score={3} />
How to use Ratings in React
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 without outline
★★★ ★★
Rating without empty stars
★★★
Rating with colors
★★★ ★★
Rating with outline and colors
★★★ ★★
<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:

Rating with default text
★★★ ★★ 3 out of 5
Rating with custom text
★★★ ★★ 3 from 5
Rating with review text
★★★ ★★ 123 reviews
Rating with custom review text
★★★ ★★ 123 ratings
Review text with link
★★★ ★★ 123 ratings
Rating with all text
★★★ ★★ 3 out of 5 123 reviews
<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?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'
color?: string
emptyColor?: string
size?: number
className?: string
}
PropPurpose
score Set the score of the rating.
total Sets the total number of stars. Defaults to 5.
text Sets a text after rating. Defaults to "{0} out of {1}" wherer {0} is the current score, and {1} is the total score.
showText Sets whether to show the text prop or not. Defaults to false.
showEmpty Sets whether to show empty stars. Defaults to true.
outline Sets whether to show empty stars as outlines only. Defaults to true.
reviewCount Sets the number of reviews to be displayed after the stars.
reviewText Sets the review text to be displayed after the stars. Defaults to "{0} reviews", where {0} is the number of reviews set from the reviewCount prop. Only displayed if reviewCount is greater than 0.
reviewLink Sets a link for the review text.
reviewTarget Sets the target of the link set in reviewLink.
color Sets the color of the stars.
emptyColor Sets the color of the empty stars.
size Sets the size of the stars. Defaults to 18px.
className Pass additional CSS classes for the rating.

Request improvement for this page