Skip to content
Altitude Standalone Components

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