A stat badge with an icon, bold value, and label for quick hero metrics.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge15New here? Read the installation guide.
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"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge15 } from "@/components/beste/component/badge15";
<Badge15
value="12k+"
label="active users"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | The stat value (e.g. "12k+") |
label | string | — | Muted label after the value (e.g. "active users") |
icon | LucideIcon | — | Optional leading icon (defaults to Users) |
tone | "primary" | "foreground" | "muted" | — | Icon color |
className | string | — | Additional classes merged onto the root |
A status badge with a pulsing dot for availability, live states, and system health.
An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.
A metric delta badge with trend arrows for dashboards, stat rows, and pricing tables.
A profile badge with avatar, name, and role for author and team credits.