A pill button with a trailing seal arrow chip and an optional link.
The import and the props worth knowing about, in one place.
import { Button1 } from "@/components/beste/component/button1";
import { Download } from "lucide-react";
import Link from "next/link";
// Compose the link with the render prop: your Link becomes the rendered
// element and the pill content (label + seal) stays as its children.
<Button1 label="Read more" render={<Link href="/pricing" />} nativeButton={false} />
<Button1
label="Download"
icon={Download} // trailing seal icon (default: ArrowRight)
tone="primary" // "dark" (default) | "primary"
roundedFull // fully round the pill and the seal
onClick={() => console.log("start download")}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Button label |
asChild | boolean | — | Compose the rendered element shadcn-style (radix asChild): `<Button1 asChild label="Read More"><Link href="/x" /></Button1>` The child element receives the pill content (label + seal) as its children, so pass it without children of its own. |
children | React.ReactElement | — | The element to render when `asChild` is set (e.g. your router's Link) |
href | string | — | Fallback link: renders a plain `<a>`. Prefer `asChild` with your framework's Link component for client-side navigation. |
icon | LucideIcon | — | Trailing seal icon (defaults to ArrowRight) |
tone | "dark" | "primary" | — | Surface tone: dark pill (default) or primary pill (for dark backgrounds) |
roundedFull | boolean | — | Fully round the pill and seal (shorthand for className="rounded-full") |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Click handler (used when there is no href and no asChild) |
className | string | — | Additional classes merged onto the button |