Indicators
Rating Summary
Aggregate review rating (stars plus count) for product cards and product detail pages.
Overview
Rating Summary displays an aggregate review score (stars plus review count) so shoppers get social proof at a glance. Use it on product cards in listings and at the top of a product detail page.
Related rating components:
StarsRating— the standalone star graphic without the count.InputRating— the input form for capturing new ratings.RatingProgressBarFilter— the per-star distribution bars used inside the review section.
Key Business & UX Benefits
- Social proof at a glance on PLP and PDP is one of the highest-impact conversion levers, and this component standardizes how it appears across the funnel.
- Showing the count alongside the score is what makes the rating credible; the component bakes in that pairing so individual teams cannot ship a half-version.
- A consistent rating treatment from category page through product detail builds trust through familiarity, reducing drop-off on the path to add-to-cart.
- One component for ratings means changes to star style or review-count formatting roll out everywhere at once, with no per-page audit.
Usage
Horizontal
Rating Summary Horizontal
<LRatingSummary :reviews-count="100" :rating="4.5" />
Vertical
Rating Summary Vertical
<LRatingSummary :reviews-count="100" :rating="4.5" orientation="vertical" align="center" />
Feature List
- Combines `StarsRating` with numeric rating text and a localized review-count line via `$tl('ratingSummary.basedOn')`
- Two sizes ('s', 'm', default 'm') keep the summary in proportion with PLP tiles and PDP headers
- Configurable `orientation` and `align` props (vertical or horizontal stacking, with alignment) cover compact tile and hero-style placements
- Pair with `RatingButton` (`showButton`) to make the review count an active link that opens the review section
- Reuses `StarsRating` for the graphic, so star color and size stay in sync across the indicator family
API Reference
| Prop | Default | Type |
|---|---|---|
ratingrequired | number | |
maxRating | 5 | number |
reviewsCount | 0 | number |
color | default | "default" | "primary" | "accent" | "yellow" | "black" | "white" | "always-white" | "always-black" |
showButton | true | boolean |
size | m | "s" | "m" |
orientation | horizontal | "vertical" | "horizontal" |
showText | true | boolean |
showStars | true | boolean |
align | left | "left" | "center" |