Rating

Overview

Rating is a four-part family that covers both sides of a score. On the display side, Rating Group renders the symbol row, Rating Label wraps it with numeric score, review count, top rated badge, and reviewer avatars, and Rating Badge condenses the same content into a compact pill. On the input side, Rating Button Group is the interactive selector users tap to leave a rating, from five-star reviews to emoji reactions and numeric scales. Internal building blocks handle fractional fills, so precise scores like 3.6 render exactly.

When should you use them?

Use the rating family wherever scores appear or get collected: product reviews, app store snippets, profile ratings, and satisfaction surveys. Pick Rating Group when the symbols alone carry the message, Rating Label when the score needs context on product cards and review summaries, Rating Badge when the rating must live inline without taking over, and Rating Button Group whenever users leave the rating themselves.

How should you use them?

• Choose by job: Rating Group for display-only symbols, Rating Label for score with context, Rating Badge for dense lists and search results, Rating Button Group for capturing input.
• Match the semantic variant to the rating's role on the surface: Primary for brand-driven moments, Neutral for quiet system contexts, the gold treatment for classic review feels.
• Keep the shape mode aligned with the surface's corner language, and keep it consistent across every rating instance on the same page.
• Compose Rating Label with its visibility toggles, showing only the avatar group, review count, or badge the surface needs, and switch to Group Rating mode for aggregated scores.
• Let the fractional value steps render precise scores like 3.6 instead of rounding to the nearest whole star.
• Give display ratings a text alternative like aria-label with the value and maximum, and build interactive selection as a radio group where each value is a labeled radio button, so screen reader users can both read and leave ratings.