Command Palette

Search for a command to run...

Docs
Split Action Button

Split Action Button

Button with primary action and dropdown for secondary options

Open in

Component split-action-button-demo not found in registry.

Installation

Usage

import SplitActionButton from "@/components/ruixen/split-action-button";
 
export default function App() {
  const handleSave = () => {
    console.log("Document saved");
  };
 
  const handleExport = () => {
    console.log("Data exported");
  };
 
  const saveOptions = [
    { label: "Save As...", onClick: () => console.log("Save As clicked") },
    {
      label: "Save Template",
      onClick: () => console.log("Save Template clicked"),
    },
    { label: "Save Copy", onClick: () => console.log("Save Copy clicked") },
  ];
 
  const exportOptions = [
    { label: "Export as PDF", onClick: () => console.log("PDF export") },
    { label: "Export as CSV", onClick: () => console.log("CSV export") },
    { label: "Export as Excel", onClick: () => console.log("Excel export") },
    { label: "Export as JSON", onClick: () => console.log("JSON export") },
  ];
 
  return (
    <div className="space-y-4">
      {/* Save button with options */}
      <SplitActionButton
        mainLabel="Save"
        mainAction={handleSave}
        secondaryActions={saveOptions}
        size="md"
      />
 
      {/* Export button with options */}
      <SplitActionButton
        mainLabel="Export"
        mainAction={handleExport}
        secondaryActions={exportOptions}
        size="sm"
        className="bg-green-500"
      />
 
      {/* Large publish button */}
      <SplitActionButton
        mainLabel="Publish"
        mainAction={() => console.log("Published")}
        secondaryActions={[
          {
            label: "Schedule Publish",
            onClick: () => console.log("Scheduled"),
          },
          {
            label: "Publish Draft",
            onClick: () => console.log("Draft published"),
          },
        ]}
        size="lg"
      />
    </div>
  );
}

Props

PropTypeDefaultDescription
mainLabelstring-Primary button text
mainAction() => void-Primary button click handler
secondaryActionsArray<{ label: string; onClick: () => void }>-Dropdown menu options
size"sm" | "md" | "lg""md"Button size
classNamestring-Additional CSS classes

Features

  • Split Design: Main action + dropdown trigger
  • Connected Layout: Seamlessly connected buttons
  • Dropdown Menu: Secondary actions in dropdown
  • Size Variants: Small, medium, and large sizes
  • Keyboard Accessible: Full keyboard navigation
  • Auto Close: Dropdown closes after selection

Button Structure

The component consists of two connected parts:

  1. Main Button: Left side with primary action
  2. Dropdown Trigger: Right side with chevron icon

Size Variants

// Small buttons
<SplitActionButton size="sm" mainLabel="Save" {...props} />
 
// Medium buttons (default)
<SplitActionButton size="md" mainLabel="Export" {...props} />
 
// Large buttons
<SplitActionButton size="lg" mainLabel="Publish" {...props} />

Common Patterns

Save Operations

const saveActions = [
  { label: "Save As...", onClick: () => saveAs() },
  { label: "Save Template", onClick: () => saveTemplate() },
  { label: "Auto Save On", onClick: () => toggleAutoSave() },
];
 
<SplitActionButton
  mainLabel="Save"
  mainAction={() => save()}
  secondaryActions={saveActions}
/>;

Export Functions

const exportActions = [
  { label: "Export PDF", onClick: () => exportPDF() },
  { label: "Export CSV", onClick: () => exportCSV() },
  { label: "Export Excel", onClick: () => exportExcel() },
  { label: "Print", onClick: () => print() },
];
 
<SplitActionButton
  mainLabel="Export"
  mainAction={() => quickExport()}
  secondaryActions={exportActions}
/>;

Publishing Options

const publishActions = [
  { label: "Schedule for Later", onClick: () => schedulePublish() },
  { label: "Publish as Draft", onClick: () => publishDraft() },
  { label: "Publish & Share", onClick: () => publishAndShare() },
];
 
<SplitActionButton
  mainLabel="Publish Now"
  mainAction={() => publishNow()}
  secondaryActions={publishActions}
/>;

Styling

The component features:

  • Connected Design: No gap between main and dropdown buttons
  • Rounded Corners: Left button rounded left, right button rounded right
  • Border Consistency: Shared border styling
  • Hover States: Individual hover effects for each part

Dropdown Behavior

  • Click Trigger: Click chevron to open dropdown
  • Menu Positioning: Appears below the button
  • Auto Close: Closes when clicking outside or selecting option
  • Keyboard Navigation: Arrow keys to navigate options

Use Cases

Perfect for:

  • Save Operations: Save, Save As, Save Template
  • Export Functions: Multiple export format options
  • Publishing: Publish now vs scheduled publishing
  • Send Actions: Send, Send Later, Send Copy
  • Create Operations: Create, Create from Template, Create Copy
Avatar Action ButtonProgress Button