A status badge with a pulsing dot for availability, live states, and system health.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge8New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge8 } from "@/components/beste/component/badge8";
<Badge8 label="Available for new projects" />
<Badge8
label="Maintenance window"
tone="warning" // "success" (default) | "info" | "warning" | "muted"
still // static dot, no ping animation
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge8 } from "@/components/beste/component/badge8";
<Badge8
label="Available for new projects"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Status label |
tone | "success" | "info" | "warning" | "muted" | — | Dot color: success (default), info, warning, or muted |
still | boolean | — | Disable the ping animation and show a static dot |
className | string | — | Additional classes merged onto the root |
A live countdown badge for launches and limited offers, SSR safe with a finished state.
An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.
A toast style notification badge with an icon tile, title, and description for product updates.