Star Rating
Star Rating
The XAFStarRating component renders a half-star rating (e.g. 4.3 / 5) with proper accessibility and four colour variants. Use it at the top of review pages, in product cards, or inline next to a title.
The stars are drawn as inline SVG, so the component needs no icon collection installed and makes no Iconify API request — which matters for a widget that appears dozens of times on a listing page.
<UInputRating>, which is not a component in @nuxt/ui v4. The tag never resolved,
so every rating rendered its numeric label with no stars beside it. If your site
pinned an older version and you saw a bare number where the stars should be, this is why.Components
<XAFStarRating />
<XAFStarRating :rating="review.rating" />
<XAFStarRating :rating="review.rating" variant="hero" show-scale />
<XAFStarRating :rating="review.rating" color="primary" :show-number="false" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rating | number | required | 0 to max. Decimals supported for half-stars. |
max | number | 5 | Number of stars. |
variant | 'inline' | 'hero' | 'inline' | Visual size — hero is large for above-the-fold. |
showNumber | boolean | true | Show the numeric value next to stars. |
showScale | boolean | false | Show " / 5" suffix (only meaningful when max === 5). |
color | 'amber' | 'primary' | 'success' | 'warning' | 'amber' | Colour of the filled portion. |
fill | 'solid' | 'outline' | 'solid' | How the unfilled remainder is drawn. |
class | string | — | Extra classes merged onto the star row. |
fill
solid (the default) renders a full row of stars in which some are coloured and the
remainder are a muted grey — the rating reads as a complete shape at a glance.
outline draws the remainder as a thin stroked star instead.
<!-- Default: solid grey remainder -->
<XAFStarRating :rating="3.5" />
<!-- Outlined remainder -->
<XAFStarRating :rating="3.5" fill="outline" />
Accessibility
The whole row is one labelled image: role="img" with an aria-label like
"Rated 4.5 out of 5 stars". The individual stars are aria-hidden, so a screen
reader announces the rating once rather than counting graphics.
Values outside [0, max] are clamped, and every rating is snapped to the nearest
half-star before anything is painted — so the stars, the numeric label, and the
aria-label can never disagree. A rating of 4.3 renders, reads, and announces as 4.5.
Examples
Hero rating above a product title
<XAFStarRating
:rating="4.6"
variant="hero"
show-scale
color="amber"
/>
Compact inline rating in a list
<XAFStarRating :rating="3.5" :show-scale="false" />
AI Context
component: XAFStarRating
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
Displaying a half-star rating on a review or product card. Renders with
role="img" and an aria-label like "Rated 4.3 out of 5 stars". Supports
four color variants (amber, primary, success, warning) and two sizes
(inline, hero). Values outside [0, max] are clamped. Decimals render as
half-stars.