Components
Loading preview...
The Split Action Button is a versatile shadcn/ui-based component that combines a primary action with a secondary dropdown in a single, compact interface. The left side of the button triggers the main action directly, while the right side opens a dropdown menu containing additional, related actions. This design is particularly useful for scenarios like “Save” with options for “Save As…” or “Export” with multiple formats”, allowing users to access multiple related operations without cluttering the interface. Built with accessibility, responsive sizing, and shadcn/ui primitives, it ensures a consistent look and feel while improving usability for complex workflows.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/split-action-buttonimport SplitActionButton from "@/components/ui/split-action-button";
export default function DemoSplitActionButton() {
return (
<div className="flex gap-4">
<SplitActionButton
mainLabel="Save"
mainAction={() => alert("Saved!")}
secondaryActions={[
{ label: "Save As PDF", onClick: () => alert("Saved as PDF") },
{ label: "Save As DOCX", onClick: () => alert("Saved as DOCX") },
]}
/>
<SplitActionButton
mainLabel="Export"
mainAction={() => alert("Exported!")}
secondaryActions={[
{ label: "Export CSV", onClick: () => alert("Exported CSV") },
{ label: "Export XLSX", onClick: () => alert("Exported XLSX") },
]}
size="lg"
/>
</div>
);
}