Split Button

A primary action paired with a menu of closely related actions.

Default

The button runs the primary action. Repeat it as the first menu item so the menu holds every option.

import { SplitButton, SplitButtonItem } from "@smallest-inc/ui";

export default function SplitButtonDefault() {
  return (
    <div className="flex flex-col items-start gap-4">
      {(["sm", "md", "lg"] as const).map((size) => (
        <div key={size} className="flex items-center gap-3">
          <SplitButton
            size={size}
            menu={
              <>
                <SplitButtonItem>Save</SplitButtonItem>
                <SplitButtonItem>Save as draft</SplitButtonItem>
                <SplitButtonItem>Save and publish</SplitButtonItem>
              </>
            }
          >
            Save
          </SplitButton>
          <SplitButton
            size={size}
            variant="secondary"
            menu={
              <>
                <SplitButtonItem>Save</SplitButtonItem>
                <SplitButtonItem>Save as draft</SplitButtonItem>
                <SplitButtonItem>Save and publish</SplitButtonItem>
              </>
            }
          >
            Save
          </SplitButton>
        </div>
      ))}
    </div>
  );
}

Icon

A leading icon goes in the button, the same as Button.

import { CopyIcon, SplitButton, SplitButtonItem } from "@smallest-inc/ui";

export default function SplitButtonIcon() {
  return (
    <SplitButton
      variant="secondary"
      menu={
        <>
          <SplitButtonItem>Copy agent</SplitButtonItem>
          <SplitButtonItem>Copy agent ID</SplitButtonItem>
          <SplitButtonItem>Copy as JSON</SplitButtonItem>
        </>
      }
    >
      <CopyIcon />
      Copy agent
    </SplitButton>
  );
}

Disabled

Disabling the button also disables its menu.

import { SplitButton, SplitButtonItem } from "@smallest-inc/ui";

export default function SplitButtonDisabled() {
  return (
    <div className="flex items-center gap-3">
      <SplitButton disabled menu={<SplitButtonItem>Deploy</SplitButtonItem>}>
        Deploy
      </SplitButton>
      <SplitButton variant="secondary" disabled menu={<SplitButtonItem>Deploy</SplitButtonItem>}>
        Deploy
      </SplitButton>
    </div>
  );
}

Best practices

When to use

Use when one action is the clear default and one to four close variants belong next to it, like Save with Save as draft. Use Dropdown for unrelated actions.

Behavior

Repeat the primary action as the first menu item, with the same label, so keyboard and screen reader users get every option from the menu.
Keep the button primary or secondary. Do not hide destructive actions behind a safe default; if one belongs in the menu, put it last.
Disabling the Split Button disables both the button and its menu.

Content

Menu items follow Verb + Noun in sentence case, like the button label.

Accessibility

Set menuLabel to name the set of actions, like “More save options”. It is the only name a screen reader hears for the chevron. The default is “More actions”.

PreviousSlider v2 NextStepper