Split button

A primary action paired with a dropdown of related actions. Aligned with J&J DS v1.2 — two halves separated by a 1px gap inside one rounded pill. Use this when there is a clear default action (e.g. Save) and several alternates the user might prefer (Save as draft, Save as template). For a single dropdown without a primary action, use MenuButton.

Sizes

32 / 40 / 48 px tall. The chevron half is square (matching the height) and shares the trigger's color tokens.

Show source

<SplitButton size="sm" label="Save" items={items} onClick={save} />
<SplitButton size="md" label="Save" items={items} onClick={save} />
<SplitButton size="lg" label="Save" items={items} onClick={save} />

Placement — bottom (default) and top

Set placement='top' for triggers near the bottom of the viewport.

Show source

<SplitButton label="Save" items={items} placement="bottom" />
<SplitButton label="Save" items={items} placement="top" />

Variants — primary (brand red) and primaryAlt (warm-dark)

Brand red is the default per Figma. Warm-dark fits non-brand emphasis.

Show source

<SplitButton label="Save" items={items} />
<SplitButton label="Save" items={items} variant="primaryAlt" />

Disabled

Both halves render in the standard button-disabled token. Per Figma, the chevron half is hidden when disabled — here we keep it so the affordance stays consistent; pair with a tooltip explaining why.

Show source

<SplitButton label='Save' items={items} disabled />

With destructive item in the menu

Mark items with destructive=true to render in the error-red foreground.

Show source

<SplitButton
  label="Publish"
  onClick={publish}
  items={[
    { label: "Publish", onClick: publish },
    { label: "Schedule", onClick: schedule },
    { label: "Discard", destructive: true, onClick: discard },
  ]}
/>