Skip to content

Display

Rating Display

Beta

Shows a numeric rating, star glyph(s), and an optional review count, available on web (React) and native (React Native). Two display modes (singular, full 5-star scale), three sizes, an optional `contained` pill background.

Figma Storybook (React) Storybook (React Native)

Display modes

Singular

One star + score. The default — compact, for cards and lists.

<RatingDisplay rating={4.8} reviewCount="(22k+ reviews)" />

Full

5-star scale with half-star fill, rounded to the nearest 0.5.

<RatingDisplay rating={4.8} display="full" reviewCount="(22k+ reviews)" />

Contained

Contained

Wraps the component in the `information` feedback-tone pill background.

<RatingDisplay rating={4.8} contained reviewCount="(22k+ reviews)" />

Sizes

Small

The default size — dense UI, cards, inline lists.

<RatingDisplay rating={4.8} size="sm" reviewCount="(22k+ reviews)" />

Medium

<RatingDisplay rating={4.8} size="md" reviewCount="(22k+ reviews)" />

Large

Prominent placements — hero blocks, review summaries.

<RatingDisplay rating={4.8} size="lg" reviewCount="(22k+ reviews)" />

When to use

Use RatingDisplay to summarise a numeric rating at a glance — a score, star glyph(s), and an optional review count. It is purely presentational and has no interactive states.

  • display="singular" (default): one star + score, rendered as a single flat mono ink-tone star. Compact — cards, lists, inline mentions.
  • display="full": a 5-star scale with orange fill/grey track and half-star fill, for a fuller rating summary.
  • contained: wraps the component in the information feedback-tone pill background, for use on plain surfaces where the rating needs to stand out.
  • showScore/showStars/showReviewCount: hide any part of the display independently when the surrounding layout already conveys it.
  • reviewCount: pass a pre-formatted string, e.g. "(22k+ reviews)".

When not to use

  • Interactive rating input: RatingDisplay is read-only. A star-rating picker/input is a separate, not-yet-built component.
  • Long-form review content: use a Review Card (not yet shipped) to pair a rating with review text.

Props

Prop Type Default Description
rating * number - Numeric rating, e.g. 4.8. Drives both the score text and star fill. Clamped to [0, maxRating].
maxRating number 5 Scale rating is out of. Stars stay a fixed 5-star row — above 5, fill is scaled proportionally (e.g. 9.8/10 fills the same as 4.9/5).
display 'singular' | 'full' 'singular' 'singular': one flat mono ink-tone star + score. 'full': 5-star scale, orange fill / grey track, with half-star fill.
size 'sm' | 'md' | 'lg' 'sm' Controls score/star/review-count text size.
contained boolean false Wraps the component in the `information` feedback-tone pill background.
showScore boolean true Show/hide the numeric score text.
showStars boolean true Show/hide the star glyph(s).
reviewCount string - Review count text, e.g. "(22k+ reviews)".
showReviewCount boolean true Show/hide the review count text, independent of reviewCount's value.
id string - Web — passed to the root div.
data-testid string - Web — passed to the root div for test targeting.

Import

Web

import { RatingDisplay } from '@checkatrade/components-web';

Native

import { RatingDisplay } from '@checkatrade/components-native';

Basic usage

<RatingDisplay rating={4.8} reviewCount="(22k+ reviews)" />
<RatingDisplay rating={4.8} display="full" reviewCount="(22k+ reviews)" />
<RatingDisplay rating={4.8} contained reviewCount="(22k+ reviews)" />
<RatingDisplay rating={4.8} size="lg" reviewCount="(22k+ reviews)" />

Platform status

Platform / AreaStatus
Design (Figma) Beta
Web (React) Beta
Native (React Native) Beta
iOS (Swift) Planned
Android (Kotlin) Planned
Accessibility audit Planned

Accessibility

  • RatingDisplay is non-interactive: a <div> on web, a View on native. It is not focusable and has no role.
  • The root element carries a computed accessible name (aria-label on web, accessibilityLabel on native) that combines whichever of the score/review-count text is currently visible — e.g. “4.8 out of 5, (22k+ reviews)” — so assistive tech announces the rating as one unit instead of two unrelated text nodes. The underlying text is hidden from assistive tech to avoid double-announcing it.
  • The star glyphs are decorative (aria-hidden) — the rating is conveyed by the numeric score text, never by colour or shape alone.
  • If both showScore and showReviewCount/reviewCount resolve to “nothing visible,” the component has no accessible content at all (the stars are decorative) and logs a console.warn to flag the combination.

No releases yet.