An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge21New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge21 } from "@/components/beste/component/badge21";
import Link from "next/link";
// Compose the link with the render prop: your Link becomes the pill (and it
// shows the trailing arrow); the badge content stays as its children.
<Badge21 tag="New" text="The Auralis studio set is live" render={<Link href="/changelog" />} />
<Badge21
tag="v2.0"
text="Now with 1,400+ blocks"
tone="foreground" // tag chip: "primary" (default) | "foreground"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge21 } from "@/components/beste/component/badge21";
<Badge21
tag="New"
text="The Auralis studio set is live"
href="#"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
tag* | string | — | The small emphasized tag (e.g. "New") |
text* | string | — | The announcement text |
asChild | boolean | — | Compose the rendered element shadcn-style (radix asChild): your element (e.g. a router Link) becomes the pill and the badge content is injected as its children. Pass the element without children of its own. |
children | React.ReactElement | — | The element to render when `asChild` is set (e.g. your framework's Link) |
href | string | — | Fallback link: renders a plain `<a>`. Prefer `asChild` with your framework's Link component for client-side navigation. |
tone | "primary" | "foreground" | — | Tag chip color |
className | string | — | Additional classes merged onto the root |
A toast style notification badge with an icon tile, title, and description for product updates.
A decorative barcode badge with a monospace caption for editorial and print inspired sections.
A tag group badge that renders wrapping chips for services, skills, and topics.