A square-cornered block button with a down-right arrow that swings a quarter turn to point right on hover while the fill switches to the accent. Built for poster layouts and hard grids.
The import and the props worth knowing about, in one place.
import { Button24 } from "@/components/beste/component/button24";
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.
<Button24 label="Get a festival pass" render={<Link href="/passes" />} nativeButton={false} />
<Button24
label="See the program"
tone="primary" // "dark" (default) | "primary" | "light"
onClick={() => console.log("clicked")}
/>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): 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) |
href | string | — | Fallback link: renders a plain `<a>`. Prefer `asChild` with your framework's Link. |
icon | LucideIcon | — | Icon that turns on hover; a down-right arrow that swings to point right when omitted |
tone | "dark" | "primary" | "light" | — | Dark block that turns to the accent on hover (default), accent block that turns dark, or a light block that turns to the accent |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Click handler (used when there is no href and no asChild) |
className | string | — | Additional classes merged onto the button |