Rating Badge

4.9from 200+ reviews
About this component

Rating Badge

A star rating badge with a numeric value and review text for social proof sections.

Usage

The import and the props worth knowing about, in one place.

import { Badge12 } from "@/components/beste/component/badge12";

<Badge12 value={4.9} text="from 200+ reviews" />

<Badge12
  value={5}
  tone="primary"    // "amber" (default) | "primary" | "foreground"
  showValue={false} // stars only
  text="Rated 5 stars on G2"
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
valuenumber—Rating value, 0–5
textstring—Muted context after the stars (e.g. "from 200+ reviews")
showValueboolean—Show the numeric value next to the stars
tone"amber" | "primary" | "foreground"—Star color
classNamestring—Additional classes merged onto the root

More Badge components

View all Badge
Loved by 2,400+ founders
12k+active users
Selin AksoyProduct Designer