Feedback

Rating

Use .quanta-rating to show star-based scores with optional interactivity. Supports half-stars, semantic colors, and size modifiers.

Usage

Basic example with 5 filled stars:

<div class="quanta-rating">
  <span class="quanta-rating-star filled">★</span>
  <span class="quanta-rating-star filled">★</span>
  <span class="quanta-rating-star filled">★</span>
  <span class="quanta-rating-star filled">★</span>
  <span class="quanta-rating-star filled">★</span>
</div>
        

Color Variants

Apply semantic styles with modifiers like .primary, .success, etc.

<div class="quanta-rating success">
  <span class="quanta-rating-star filled">★</span>
  ...
</div>
        

Half Stars

Add .half to display a half-filled star using pseudo-elements.

<div class="quanta-rating">
  <span class="quanta-rating-star filled">★</span>
  <span class="quanta-rating-star filled">★</span>
  <span class="quanta-rating-star filled">★</span>
  <span class="quanta-rating-star half">★</span>
  <span class="quanta-rating-star">★</span>
</div>
        

Size Modifiers

Customize star size using utility classes like .text-sm, .text-lg etc.

<div class="quanta-rating text-lg">…</div>
        

Read-Only

Disable interaction by adding .readonly to prevent hover or click.

<div class="quanta-rating readonly">
  <span class="quanta-rating-star filled">★</span>...
</div>