Rating

Atom

Star and heart rating inputs for collecting or displaying user feedback. Mirrors Figma nodes 114-30 + 114-198 (light) + 5970-310 + 5970-401 (dark) 1:1. Two icon shapes — Star and Heart — each in three colour variants and three fill states (Filled · Half · Stroke). Three sizes: lg 24 px / md 20 px / sm 16 px. 4 tokens: --rating-brand inverts in dark; --rating-star, --rating-heart, and --rating-empty are constant. Interactive: data-interactive enables hover-preview + click-to-rate. 🎉 This is the last planned component — the DigiLawyer Design System is now complete.

When to use

✅ Do

Use for collecting user feedback scores (product reviews, service ratings)
Use read-only mode (aria-readonly="true") for displaying average ratings
Use data-half="true" when half-step precision is needed
Use Yellow stars for ratings, Red hearts for favourites/likes
Always pair with a text label or numeric value for accessibility

❌ Don't

Use for binary yes/no feedback — use a Toggle or Checkbox instead
Use more than 5 items in a rating row — the scale becomes difficult to interpret
Use as a progress indicator — use Progress Bar instead
Use without a label describing what is being rated

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

A Rating is composed of a wrapper and individual item slots referencing SVG symbols from a hidden sprite pool.

1Wrapper — .rating. Add colour modifier (.rating-yellow) and optional size modifier.
2Item — .rating-item. Use <button> for interactive, <span> for display-only.
3Icon — .rating-icon SVG referencing a sprite symbol: -fill, -half, or -stroke.
4Fill state — .is-filled (solid) / .is-half (left half filled) / no class (stroke/empty).

Default

5-star rating at 3.5 — Yellow colour, Medium size (default). .is-filled = solid colour. .is-half = left half filled, right half stroke. No class = stroke/empty (uses --rating-empty grey).

Shapes

Stars use #ico-rt-star-*; hearts use #ico-rt-heart-*. The two shapes are independent — mix size and colour freely. Stars typically use Yellow; hearts typically use Red.

Stars · Yellow · 4 of 5

Hearts · Red · 4 of 5

Colors

Three colour variants: Brand (no class, dark in light / white in dark), Yellow (.rating-yellow — star canonical), Red (.rating-red — heart canonical). Empty icons always use --rating-empty (#D1D1D1 grey) regardless of the colour class. Toggle the theme switch to see Brand invert.

Brand stars

Yellow stars

Brand hearts

Red hearts

Sizes

Three icon sizes matched 1:1 to Figma's symbol names. .rating-lg = 24 px. Default = 20 px (Medium). .rating-sm = 16 px. Size modifier on the wrapper cascades to all .rating-icon elements inside.

Large · 24

Medium · 20

Small · 16

States

Three fill states per icon — this is the canonical single-icon reference from the Figma design. Stars (Yellow) and Hearts (Red) shown at all three sizes × three states. Toggle dark mode to see Brand colour invert.

Interactive

Two interaction modes. Full Rating — hover or click selects whole numbers only (1–5). Half Rating — hover the left 50% of any icon to preview a .5 value, the right 50% for a full integer; position detected via getBoundingClientRect so child SVG never skews the midpoint. Toggled via data-half="true" on the wrapper. All three colour variants shown in both modes. Toggle dark mode to confirm Brand inverts.

Full Rating — click to select 1 – 5

Stars · Yellow

Click to rate

Stars · Brand

Click to rate

Hearts · Red

Click to rate

Half Rating — hover left 50% = ½ · hover right 50% = full

Stars · Yellow

Click to rate

Stars · Brand

Click to rate

Hearts · Red

Click to rate

Accessibility

Interactive rating uses <button> elements; display-only uses <span> with aria-readonly.

Attribute / Behaviour	Value	Notes
Wrapper label	`aria-label="3.5 out of 5 stars"`	Always set on the `.rating` wrapper to announce the current value
Interactive items	`<button>` with `aria-label`	Each item needs an `aria-label` e.g. "1 star", "2 stars"
Display-only	`aria-readonly="true"` on wrapper	Disables pointer events and removes interactive role from items
Keyboard — select	`Enter` / `Space`	Selects the focused rating item
Keyboard — navigate	`Tab`	Moves between rating buttons

API

Class / attr	On	Description
.rating	<div>	Wrapper. `display: inline-flex; gap: 4px`. Add colour + optional size modifier.
.rating-brand / .rating-yellow / .rating-red	.rating	Colour variants. Brand = `--rating-brand` (inverts dark). Yellow = `--rating-star` (#FFC107). Red = `--rating-heart` (#CD3232).
.rating-lg / .rating-sm	.rating	24 px / 16 px. Default (no modifier) = Medium 20 px.
.rating-item	<span> or <button>	Single icon slot. Default colour = `--rating-empty`. Use `<button>` for interactive; `<span>` for read-only.
.is-filled	.rating-item	Full solid icon. Pair with `#ico-rt-star-fill` or `#ico-rt-heart-fill`.
.is-half	.rating-item	Half icon — left half filled, right half outline. Pair with `#ico-rt-star-half` or `#ico-rt-heart-half`.
(no state class)	.rating-item	Stroke/empty icon in `--rating-empty` grey. Pair with `#ico-rt-star-stroke` or `#ico-rt-heart-stroke`.
data-interactive	.rating	Enables hover-preview + click-to-rate via JS. Pair with `data-half="true"` for half-step support. Without it, only whole integers are selectable. Preview uses `.is-preview`; committed uses `.is-filled` or `.is-half`. Add `data-shape="heart"` to use heart icon IDs.
data-half="true"	.rating	Unlocks half-rating selection. Cursor left of the icon's midpoint → `i + 0.5`; cursor right → `i + 1`. Position read via `getBoundingClientRect` so child `<svg>` elements never skew the result. Omit for whole-integer-only mode.
aria-readonly="true"	.rating	Disables pointer events — use for pure display.
--rating-brand	Token	`#2D2D2D` light / `#FFFFFF` dark — inverts with the page.
--rating-empty	Token	Grey for unfilled icons: `#D1D1D1` both modes.
--rating-star	Token	Yellow star fill: `#FFC107` both modes.
--rating-heart	Token	Red heart fill: `#CD3232` both modes.