A toast style notification badge with an icon tile, title, and description for product updates.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge17New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge17 } from "@/components/beste/component/badge17";
import { Rocket } from "lucide-react";
<Badge17 title="New template added" description="The Auralis studio set is live" />
<Badge17
title="v2.0 shipped"
description="See what's new"
icon={Rocket} // tile icon (default: BellRing)
tone="emerald" // "primary" (default) | "emerald" | "amber"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge17 } from "@/components/beste/component/badge17";
<Badge17
title="New template added"
description="The Auralis studio set is live"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Notification title |
description | string | — | Muted second line |
icon | LucideIcon | — | Icon in the leading tile (defaults to BellRing) |
tone | "primary" | "emerald" | "amber" | — | Icon color |
className | string | — | Additional classes merged onto the root |
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.
A marker highlight badge that draws a highlighter stroke behind key words in headlines.