Command Palette

Search for a command to run...

Docs
Button Split

Button Split

A split button with primary action and dropdown for secondary options.

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

PropTypeDefaultDescription
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
classNamestring-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