Skip to content

Ratings

Ratings Component

The Ratings component provides a visual display of star ratings with customizable appearance. Unlike the Rating Input component, this is for display purposes only and is not interactive.

Example

Default rating (2.5/5):

4-star rating (out of 5):

3.8 out of 5 stars:

Custom size rating:

10-scale rating with 10 icons:

Usage

import Ratings from "@altitude/ui/react/ui/ratings";
export default function ProductRating() {
return (
<div>
<h3>Customer Rating</h3>
{/* Basic usage with defaults */}
<Ratings rating={4.2} maxRating={5} className="skin-primary" />
{/* Custom icon count and size */}
<Ratings
rating={8.5}
maxRating={10}
iconCount={10}
iconSize="18px"
className="skin-primary"
/>
{/* With custom aria label */}
<Ratings
rating={3.5}
maxRating={5}
ariaLabel="Product rated 3.5 out of 5 stars"
className="skin-primary"
/>
</div>
);
}

Props

PropTypeRequiredDescription
ratingnumberNoThe rating value to display (default: 2.5)
maxRatingnumberNoThe maximum possible rating value (default: 5)
iconCountnumberNoNumber of star icons to display (default: 5)
iconSizestringNoSize of each star icon (default: “24px”)
iconstringNoCustom icon URL (defaults to a star SVG)
classNamestringNoAdditional CSS classes for styling
ariaLabelstringNoCustom accessibility label (defaults to “Rating: X out of Y”)

Features

  • Fractional Ratings: Accurately displays partial/decimal ratings
  • Customizable: Adjustable icon count, size, and appearance
  • Accessible: Proper ARIA attributes for screen readers
  • Flexible Scale: Can represent any rating scale (e.g., 5-star, 10-star)

CSS Integration

The Ratings component uses CSS custom properties:

  • --rating-icon-count: Number of icons to display
  • --rating-icon-size: Size of each icon
  • --rating-percentage: Calculated percentage of the rating
  • --rating-icon: URL of the icon to use

You can style the ratings using skin classes:

  • skin-primary: Primary theme color
  • skin-secondary: Secondary theme color