A tag group badge that renders wrapping chips for services, skills, and topics.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge19New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge19 } from "@/components/beste/component/badge19";
<Badge19 tags={["Branding", "Web design", "Motion", "3D"]} />
<Badge19
tags={["Next.js", "Tailwind", "shadcn/ui"]}
tone="outline" // "muted" (default) | "outline"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge19 } from "@/components/beste/component/badge19";
<Badge19
tags={["Branding","Web design","Motion","3D"]}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
tags* | string[] | — | The tag labels |
tone | "muted" | "outline" | — | Chip style: muted fill (default) or bordered outline |
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 trusted by logo strip badge with grayscale logos that regain color on hover.
A profile badge with avatar, name, and role for author and team credits.
A marker highlight badge that draws a highlighter stroke behind key words in headlines.