An accessible icon button with a required label, three sizes, and circle or square shape.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/button4New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Button4 } from "@/components/beste/component/button4";
import { Play } from "lucide-react";
import Link from "next/link";
// Icon-only: label is required and becomes the accessible name.
<Button4 label="Play showreel" icon={Play} onClick={() => console.log("play showreel")} />
// Compose the link with the render prop: your Link becomes the rendered
// element and the button content stays as its children.
<Button4
label="Open on GitHub"
tone="dark" // "neutral" (default) | "dark" | "primary"
size="lg" // "sm" | "md" (default) | "lg"
rounded="md" // "full" (default) | "md"
render={<Link href="https://github.com/beste" />}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Button4 } from "@/components/beste/component/button4";
<Button4
label="Open case study"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Accessible name, required, since the button shows only an icon |
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) |
icon | LucideIcon | — | The icon (defaults to ArrowUpRight) |
href | string | — | Fallback link: renders a plain `<a>`. Prefer `asChild` with your framework's Link component for client-side navigation. |
tone | "neutral" | "dark" | "primary" | — | Surface tone: bordered background (default), solid dark, or primary |
size | "sm" | "md" | "lg" | — | Button size |
rounded | "full" | "md" | — | Circle (default) or rounded square |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Click handler (used when there is no href and no asChild) |
className | string | — | Additional classes merged onto the button |
An expanding icon button that reveals its label on hover or focus for compact layouts.
A neobrutalist button with a hard offset shadow that lifts on hover and presses in on click.
A pill button whose label rolls up letter by letter with a staggered hover animation.
A video play button with a circular play seal, label, and duration for showreels and product demos.