A profile badge with avatar, name, and role for author and team credits.
Installation
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge16New here? Read the installation guide.
Usage
The import and the props worth knowing about, in one place.
import { Badge16 } from "@/components/beste/component/badge16";
import Link from "next/link";
<Badge16 src="/avatars/selin.jpg" name="Selin Aksoy" role="Product Designer" />
// Compose the link with the render prop: your Link becomes the chip and the
// badge content stays as its children.
<Badge16
src="/avatars/mert.jpg"
name="Mert Yilmaz"
role="@mert"
tone="muted"
render={<Link href="https://x.com/mert" />}
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Usage
import { Badge16 } from "@/components/beste/component/badge16";
<Badge16
src="https://i.pravatar.cc/72?img=26"
name="Selin Aksoy"
role="Product Designer"
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Avatar image URL |
name* | string | — | Person's name |
role | string | — | Muted second line (role, company, handle) |
asChild | boolean | — | Compose the rendered element shadcn-style (radix asChild): your element (e.g. a router Link) becomes the chip 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 | "neutral" | "muted" | — | Surface tone: bordered background (default) or muted fill |
className | string | — | Additional classes merged onto the root |