⌘K

rating component

Drop-in semantic component. See examples, sizes, variants, and source.

Star, heart, emoji, and number ratings. Pick a type with rating star / heart / emoji / number, set the current value with data-value, and mark filled icons with selected (or half for half-precision stars). Layer modifiers for size, color, and layout (vertical, compact, readonly, disabled, clearable). Interactive value updates and form integration are handled by rating.js.

Rating System

Basic Star Rating

Rating Sizes

Heart Rating

Emoji Rating

Number Rating

1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5

Color Variants

With Labels and Counts

4.5 / 5
(128)
3.8 / 5 (42)

Interactive States

Half Star Precision

Vertical Layout

4 / 5 Product Quality
5 / 5 Customer Love
Satisfaction

Compact Mode

Rating Bar Distribution

5 stars
85%
4 stars
10%
3 stars
3%
2 stars
1%
1 star
1%

Rating Summary

4.5
Based on 2,451 reviews
5★
2,084
4★
245
3★
73
2★
25
1★
24

Form Integration

Animated Ratings

JavaScript API

Class API Reference

Type Class / Attribute Usage Notes
Type rating Required base class on the wrapper Defaults to star rendering
rating star Star icons (☆ / ★) Children: .star
rating heart Heart icons (♡ / ♥) Children: .icon
rating emoji Emotion emoji 1-5 Children: .icon[data-value]
rating number Numeric chips (1-N) Children: .icon
Sizes xs 14px icons — tiny Modifier on rating
sm 16px icons — small Modifier on rating
(default) 20px icons — medium No size class needed
xl 24px icons — large Modifier on rating
lg 32px icons — big Modifier on rating
Colors (default) Yellow stars / red hearts Type-default color
primary Blue selected color Modifier on rating
positive Green selected color Modifier on rating
negative Red selected color Modifier on rating
warning Orange selected color Modifier on rating
States / Item selected Filled icon Modifier on each .star / .icon
half Half-filled icon (works with data-precision="0.5") Modifier on the boundary icon
readonly Display only — no hover/click Modifier on rating
disabled Greyed out + non-interactive Modifier on rating
clearable Adds a × control to reset the value Append a .clear child
animated Animated fills on value change Modifier on rating
Layout vertical Stack icons + label vertically Modifier on rating
compact Overlap icons (zero gap) Modifier on rating
with-label Reserves space for inline value label Append a .label child
Data Attributes data-value Current value 0 to data-max
data-max Maximum value Default 5
data-precision Step size — 0.5 or 1 Half-stars require 0.5
data-count Review count rendered as (N) Append a .count child
data-label Show value label inline "true" to enable
data-name Form field name for hidden input Used by rating.js
Bar / Summary rating-bar-area Container for distribution bars Stack of .rating-bar rows
rating-bar Single label / fill / count row Children: .label, .bar > .fill, .count
rating-bar.primary|positive|negative|warning Color modifier for the fill Modifier on rating-bar
rating-summary Average + stars + distribution composite block Hosts .average, .stars, .rating-bar-area
rating-summary .average Big numeric average Inside .rating-summary
rating-summary .total Reviews-count caption beneath the stars Inside .rating-summary .stars