A compact, softly rounded action button with a solid accent, soft neutral, or hairline outline tone and an optional trailing icon.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Button21 } from "@/components/beste/component/button21";
import { ArrowRight } from "lucide-react";
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.
<Button21 label="Book a demo" render={<Link href="/demo" />} nativeButton={false} />
<Button21
label="Start free"
icon={ArrowRight} // optional trailing icon
tone="outline" // "primary" (default) | "neutral" | "outline"
onClick={() => console.log("clicked")}
/>An accessible icon button with a required label, three sizes, and circle or square shape.
A monospace button framed by corner brackets that spring outward on hover.
A minimal text button with an animated underline and arrow for lightweight calls to action.
A video play button with a circular play seal, label, and duration for showreels and product demos.
A split button with a main action and a separate secondary trigger for menus and options.
A pill button whose label rolls up letter by letter with a staggered hover animation.