Indicators
Rating Summary
A rating summary component
Overview
The Rating Summary component displays aggregate review rating (e.g. stars and count) so customers see overall product quality at a glance. It fits product cards and product detail pages.
Key Business & UX Benefits
- Shows overall rating and review count to build trust.
- Familiar star display helps customers compare products.
- Fits product cards and PDP without extra layout.
- Accessible with proper semantics for rating and count.
Pro-Tip from Larry: Use Rating Summary on product cards so customers see social proof before clicking.
Usage
RatingSummary
<RatingSummary :reviewsCount="100" :rating="4.5" />
Feature List
- Aggregate rating display with star graphic and count
- Configurable size variants for cards and PDP
- Theme-aligned styling
- Accessible rating and count semantics
API Reference
| Prop | Default | Type |
|---|---|---|
ratingrequired | number | |
maxRating | 5 | number |
reviewsCount | 0 | number |
color | default | "default" | "primary" | "accent" | "white" | "black" | "always-white" | "always-black" | "yellow" |
showButton | true | boolean |
size | m | "s" | "m" |
orientation | horizontal | "horizontal" | "vertical" |
showText | true | boolean |
showStars | true | boolean |
align | left | "left" | "center" |