A split button with a main action and a separate secondary trigger for menus and options.
The import and the props worth knowing about, in one place.
import { Button5 } from "@/components/beste/component/button5";
import Link from "next/link";
// Compose the MAIN segment with the render prop: your Link becomes the main
// control and the label stays as its children. The secondary segment is
// always a button (e.g. to open a menu).
<Button5
label="Download"
render={<Link href="/download" />}
onSecondaryClick={() => console.log("choose platform")}
/>
<Button5
label="Deploy now"
onClick={() => console.log("deploy")}
secondaryLabel="Deployment options"
onSecondaryClick={() => console.log("open options")}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Main action label |
asChild | boolean | — | Compose the MAIN segment shadcn-style (radix asChild): your element (e.g. a router Link) becomes the main control and the label is injected as its children. Pass the element without children of its own. |
children | React.ReactElement | — | The element to render for the main segment when `asChild` is set |
href | string | — | Fallback link for the main segment: renders a plain `<a>`. Prefer `asChild` with your framework's Link component. |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Main action click handler (used when there is no href and no asChild) |
secondaryIcon | LucideIcon | — | Icon of the secondary segment (defaults to ChevronDown) |
secondaryLabel | string | — | Accessible name of the secondary segment |
onSecondaryClick | React.MouseEventHandler<HTMLButtonElement> | — | Secondary segment click handler (e.g. open a menu) |
tone | "dark" | "primary" | "outline" | — | Surface tone: solid dark (default), primary, or bordered outline |
className | string | — | Additional classes merged onto the root |