About this component
Notification Badge
A toast style notification badge with an icon tile, title, and description for product updates.
Usage
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"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
New template addedThe Auralis studio set is live
Usage
import { Badge17 } from "@/components/beste/component/badge17";
<Badge17
title="New template added"
description="The Auralis studio set is live"
/>Props
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 |
More Badge components
View all BadgeAnnouncement Badge
An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.
Est. 2019, Berlin
Barcode Badge
A decorative barcode badge with a monospace caption for editorial and print inspired sections.
40% faster
Marker Highlight Badge
A marker highlight badge that draws a highlighter stroke behind key words in headlines.