Stat Badge

12k+active users
About this component

Stat Badge

A stat badge with an icon, bold value, and label for quick hero metrics.

Usage

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

import { Badge15 } from "@/components/beste/component/badge15";
import { Rocket } from "lucide-react";

<Badge15 value="12k+" label="active users" />

<Badge15
  value="99.9%"
  label="uptime"
  icon={Rocket}        // leading icon (default: Users)
  tone="foreground"    // "primary" (default) | "foreground" | "muted"
/>

Props

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

PropTypeDefaultDescription
value*string—The stat value (e.g. "12k+")
labelstring—Muted label after the value (e.g. "active users")
iconLucideIcon—Optional leading icon (defaults to Users)
tone"primary" | "foreground" | "muted"—Icon color
classNamestring—Additional classes merged onto the root

More Badge components

View all Badge
Selin AksoyProduct Designer
Available for new projects
+12.4%vs last month