nuxt-x-affiliate
Star Rating
Half-star ratings with proper aria-label, four color variants, and inline or hero size.
Star Rating
The XAFStarRating component renders a half-star rating (e.g. 4.3 / 5) with proper accessibility and four color variants. Use it at the top of review pages, in product cards, or inline next to a title.
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' | Filled-star color. |
Accessibility
Renders with role="img" and an aria-label like "Rated 4.3 out of 5 stars". Values outside [0, max] are clamped.
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.