A calm sentence-case pill with an arrow. On hover the arrow slips out the way it points while a twin arrives from behind it, either up and to the right or straight to the right. A white tone holds on dark or photographic surfaces in both themes, and a hairline outline takes the surface's text color.
The import and the props worth knowing about, in one place.
import { Button23 } from "@/components/beste/component/button23";
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.
<Button23 label="Enter the studio" render={<Link href="/studio" />} nativeButton={false} />
<Button23
label="Watch the reel"
tone="outline" // "light" (default) | "outline" | "dark" | "primary"
size="sm" // "default" | "sm"
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, in sentence case |
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. |
direction | "up-right" | "right" | — | Which way the arrow points and travels on hover; also picks the default icon |
icon | LucideIcon | — | Icon at the end of the pill; defaults to the arrow for `direction` |
tone | "light" | "outline" | "dark" | "primary" | — | White pill for dark or photographic surfaces (stays white in both themes), a hairline outline in the current text color, a dark pill for light pages, or the accent |
size | "default" | "sm" | — | Pill size: the default one, or a compact one for dense layouts |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Click handler (used when there is no href and no asChild) |
className | string | — | Additional classes merged onto the button |