Buttons

Split Button

Primary action fused to a dropdown of secondary actions.

Import

tsx

import { SplitButton } from "@cooud-ui/ui";

bash

npx cooud-ui add split-button

Examples

Default

A primary action fused to a menu of related secondaries. Clicking the left segment runs the default action; the chevron opens declarative `items`, including a destructive row.

Draft saved 2 minutes ago

tsx

const [status, setStatus] = useState("Draft saved 2 minutes ago");

return (
  <div className="flex flex-col items-start gap-3">
    <SplitButton
      icon={<Save />}
      onClick={() => setStatus("Saved just now")}
      items={[
        { icon: <FileText />, label: "Save as draft", onSelect: () => setStatus("Saved to drafts") },
        { icon: <Copy />, label: "Save a copy", onSelect: () => setStatus("Copy saved") },
        {
          icon: <Trash2 />,
          label: "Discard changes",
          destructive: true,
          onSelect: () => setStatus("Changes discarded"),
        },
      ]}
    >
      Save
    </SplitButton>
    <p className="text-sm text-fg-tertiary">{status}</p>
  </div>
);

Variants

Both segments share `Button`'s variants and collapse their inner edges into one seamless control — a single hairline seam reads cleanly across every tone.

tsx

<div className="flex flex-wrap items-center gap-3">
  <SplitButton
    variant="primary"
    items={[
      { icon: <Copy />, label: "Duplicate" },
      { icon: <Share2 />, label: "Share" },
    ]}
  >
    Primary
  </SplitButton>
  <SplitButton
    variant="gradient"
    items={[
      { icon: <Copy />, label: "Duplicate" },
      { icon: <Share2 />, label: "Share" },
    ]}
  >
    Gradient
  </SplitButton>
  <SplitButton
    variant="secondary"
    items={[
      { icon: <Copy />, label: "Duplicate" },
      { icon: <Share2 />, label: "Share" },
    ]}
  >
    Secondary
  </SplitButton>
  <SplitButton
    variant="outline"
    items={[
      { icon: <Copy />, label: "Duplicate" },
      { icon: <Share2 />, label: "Share" },
    ]}
  >
    Outline
  </SplitButton>
</div>

Loading

Set `loading` to swap the primary icon for a spinner and disable both segments while the action is in flight — perfect for publish or submit flows.

Ready when you are.

tsx

const [loading, setLoading] = useState(false);
const [published, setPublished] = useState(false);

const publish = () => {
  setLoading(true);
  setPublished(false);
  setTimeout(() => {
    setLoading(false);
    setPublished(true);
  }, 1400);
};

return (
  <div className="flex flex-col items-start gap-3">
    <SplitButton
      icon={<Send />}
      loading={loading}
      onClick={publish}
      menuLabel="Publishing options"
      items={[
        { icon: <CalendarClock />, label: "Schedule for later" },
        { icon: <FileText />, label: "Save as draft" },
      ]}
    >
      {loading ? "Publishing…" : "Publish"}
    </SplitButton>
    <p className="text-sm text-fg-tertiary">
      {published ? "Your post is live." : "Ready when you are."}
    </p>
  </div>
);

API Reference

Generated from the component's exported types.

SplitButtonProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onClick">

Prop	Type	Default	Description
`children`*	`ReactNode`	—	The primary action's label.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	—	Fires when the primary (left) segment is clicked.
`icon`	`ReactNode`	—	Optional leading icon for the primary segment (replaced by a spinner while `loading`).
`items`	`SplitButtonItem[]`	—	Declarative secondary actions. Ignored when a custom `menu` slot is supplied.
`menu`	`ReactNode`	—	Escape hatch for fully custom menu content (compose `DropdownMenuItem`, `DropdownMenuSeparator`, `DropdownMenuLabel`, …). Takes precedence over `items`.
`variant`	`SplitButtonVariant`	`"primary"`	Visual style, shared by both segments — mirrors `Button`'s variants.
`size`	`SplitButtonSize`	`"md"`	Control height/density, shared by both segments.
`disabled`	`boolean`	`false`	Disables both segments.
`loading`	`boolean`	`false`	Shows a spinner in the primary segment and disables the control.
`menuLabel`	`string`	`"More actions"`	Accessible name for the icon-only menu trigger.
`align`	`"start" \| "center" \| "end"`	`"end"`	Horizontal alignment of the menu relative to the trigger.
`sideOffset`	`number`	`6`	Gap in px between the trigger and the opened menu.
`contentClassName`	`string`	—	Class applied to the dropdown menu surface.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state of the menu.
`open`	`boolean`	—	Controlled open state of the menu.
`onOpenChange`	`(open: boolean) => void`	—	Notified whenever the menu opens or closes.