Installation
Usage
import ButtonSplit from "@/components/ruixen/button-split";
const saveOptions = [
{ label: "Save as Draft", value: "draft" },
{ label: "Save and Publish", value: "publish" },
{ label: "Save and Schedule", value: "schedule" },
];
export default function MyComponent() {
return (
<ButtonSplit
options={saveOptions}
onPrimaryClick={() => console.log("Save clicked")}
onOptionSelect={(value) => console.log("Selected:", value)}
>
Save
</ButtonSplit>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | { label: string; value: string }[] | - | Dropdown options |
onPrimaryClick | () => void | - | Callback for primary action |
onOptionSelect | (value: string) => void | - | Callback for dropdown selection |
variant | "default" | "outline" | "default" | Button style variant |
className | string | - | Additional CSS classes |
Features
- Combined primary action and dropdown
- Visual separation between actions
- Seamless appearance when combined
- Keyboard navigation support
- Light and dark mode support

