A metric delta badge with trend arrows for dashboards, stat rows, and pricing tables.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge9New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge9 } from "@/components/beste/component/badge9";
<Badge9 value="+12.4%" label="vs last month" />
<Badge9
value="-3.2%"
tone="down" // "up" (default) | "down" | "flat"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge9 } from "@/components/beste/component/badge9";
<Badge9
value="+12.4%"
label="vs last month"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | The delta value (e.g. "+12.4%") |
label | string | — | Optional muted context after the chip (e.g. "vs last month") |
tone | "up" | "down" | "flat" | — | Trend direction, controls the arrow and colors |
className | string | — | Additional classes merged onto the root |
A decorative barcode badge with a monospace caption for editorial and print inspired sections.
An eyebrow kicker badge with an accent square and uppercase, letter spaced label for section headings.
A profile badge with avatar, name, and role for author and team credits.