A marker highlight badge that draws a highlighter stroke behind key words in headlines.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge13New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge13 } from "@/components/beste/component/badge13";
// Inline emphasis, drop it inside a headline:
<h2>
Ship landing pages <Badge13 label="40% faster" /> with Beste UI
</h2>
<Badge13
label="new"
tone="pink" // "amber" (default) | "emerald" | "pink" | "sky"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge13 } from "@/components/beste/component/badge13";
<Badge13
label="40% faster"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | The highlighted text |
tone | "amber" | "emerald" | "pink" | "sky" | — | Highlighter color |
className | string | — | Additional classes merged onto the root |
A toast style notification badge with an icon tile, title, and description for product updates.
An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.
A decorative barcode badge with a monospace caption for editorial and print inspired sections.