A social proof button with an avatar stack inside the pill and a trailing arrow.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/button6New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Button6 } from "@/components/beste/component/button6";
import Link from "next/link";
// Compose the link with the render prop: your Link becomes the rendered
// element and the button content stays as its children.
<Button6
label="Join 2,400+ members"
avatars={["/avatars/mia.jpg", "/avatars/deniz.jpg", "/avatars/omar.jpg"]}
render={<Link href="/signup" />}
/>
<Button6
label="Meet the community"
avatars={["/avatars/ada.jpg", "/avatars/can.jpg"]}
tone="outline" // "dark" (default) | "primary" | "outline"
onClick={() => console.log("meet the community")}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Button6 } from "@/components/beste/component/button6";
<Button6
label="Join 2,400+ members"
avatars={["https://i.pravatar.cc/64?img=14","https://i.pravatar.cc/64?img=33","https://i.pravatar.cc/64?img=48"]}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Button label (e.g. "Join 2,400+ members") |
asChild | boolean | — | Compose the rendered element shadcn-style (radix asChild): your element (e.g. a router Link) becomes the root and the button 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) |
avatars* | string[] | — | Avatar image URLs shown as a stack inside the pill |
href | string | — | Fallback link: renders a plain `<a>`. Prefer `asChild` with your framework's Link component for client-side navigation. |
tone | "dark" | "primary" | "outline" | — | Surface tone: solid dark (default), primary, or bordered outline |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Click handler (used when there is no href and no asChild) |
className | string | — | Additional classes merged onto the button |
A pill button whose label rolls up letter by letter with a staggered hover animation.
A premium pill button with a diagonal shine sweep on hover for pricing and upgrade actions.