Buttons — Split button with menu

Two split buttons pair immediate actions with native expandable option panels. Use them to keep a common action visible while offering related alternatives.

ReactHTML

1440 × 480

Open in new tab

Component.tsx51 lines

export default function ButtonsSplitMenu() {
  return (
    <div className="relative flex h-60 w-72 items-start justify-end gap-2 text-neutral-900 sm:w-[24rem]">
      <div className="flex">
        <button type="button" className="inline-flex h-11 items-center justify-center rounded-l-md border border-neutral-300 bg-white text-neutral-900 hover:bg-neutral-50 px-5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Save</button>
        <details className="group relative">
          <summary aria-label="More save options" className="flex h-11 -ml-px w-9 cursor-pointer list-none items-center justify-center rounded-r-md border border-neutral-300 bg-white text-neutral-900 hover:bg-neutral-50 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 transition-transform group-open:rotate-180 motion-reduce:transition-none"><path d="m6 9 6 6 6-6" /></svg>
          </summary>
          <ul role="list" className="absolute -left-20 top-full z-20 mt-2 w-56 rounded-md border border-neutral-200 bg-white p-1 text-neutral-900 shadow-lg">
            <li>
              <button type="button" className="flex h-9 w-full items-center gap-2 rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><rect x="9" y="9" width="12" height="12" rx="2" /><path d="M5 15H3V3h12v2" /></svg>Save as copy</button>
            </li>
            <li>
              <button type="button" className="flex h-9 w-full items-center gap-2 rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" /></svg>Preview draft</button>
            </li>
            <li>
              <button type="button" className="flex h-9 w-full items-center gap-2 rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m10 13 4-2m-6 4H6a4 4 0 0 1 0-8h4m4 0h4a4 4 0 0 1 0 8h-4" /></svg>Copy draft link</button>
            </li>
            <li className="mt-1 border-t border-neutral-200 pt-1">
              <button type="button" className="flex h-9 w-full items-center gap-2 rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="M5 3h12l4 4v14H3V3h2Zm2 0v6h10V3M7 21v-8h10v8" /></svg>Save as template</button>
            </li>
          </ul>
        </details>
      </div>
      <div className="flex">
        <button type="button" className="inline-flex h-11 items-center justify-center rounded-l-md bg-neutral-900 text-white hover:bg-neutral-700 px-5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Publish</button>
        <details open className="group relative">
          <summary aria-label="More publish options" className="flex h-11 w-10 border-l border-white/20 cursor-pointer list-none items-center justify-center rounded-r-md bg-neutral-900 text-white hover:bg-neutral-700 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 transition-transform group-open:rotate-180 motion-reduce:transition-none"><path d="m6 9 6 6 6-6" /></svg>
          </summary>
          <ul role="list" className="absolute right-0 top-full z-20 mt-2 w-56 rounded-md border border-neutral-200 bg-white p-1 text-neutral-900 shadow-lg">
            <li>
              <button type="button" className="flex h-9 w-full items-center gap-2 rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>Schedule</button>
            </li>
            <li>
              <button type="button" className="flex h-9 w-full items-center gap-2 rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" /></svg>Preview</button>
            </li>
            <li>
              <button type="button" className="flex h-9 w-full items-center gap-2 rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="m10 13 4-2m-6 4H6a4 4 0 0 1 0-8h4m4 0h4a4 4 0 0 1 0 8h-4" /></svg>Copy link</button>
            </li>
            <li className="mt-1 border-t border-neutral-200 pt-1">
              <button type="button" className="flex h-9 w-full items-center gap-2 rounded-md px-3 text-sm text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="M5 3h12l4 4v14H3V3h2Zm2 0v6h10V3M7 21v-8h10v8" /></svg>Save draft</button>
            </li>
          </ul>
        </details>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use when an immediate action has related alternatives. Pick buttons-joined-group when alternatives deserve equal visibility without a panel. Variations: save with export formats, publish with timing choices, or show only one split group. Main buttons and summaries are 44px high; the Save panel stays within the 288px-wide layout on mobile.
Hierarchy: Save is secondary; Publish is primary. Summary controls are named More save options and More publish options. The Save panel contains Save as copy, Preview draft, Copy draft link and Save as template. The open Publish panel contains Schedule, Preview, Copy link and Save draft. Labels use up to three words. Visible menu labels and SVGs share 8px gaps. Lists use role=list; native buttons remain ordinary tab stops.
Responsive: Only root width changes at 640px, from 288px to 384px. Publish panel aligns right; Save panel is offset 80px left of its chevron so opening it also stays within the 288px-wide layout on mobile. Both split groups stay on one line. The 240px reserved root contains the default open panel at every width.
Layout: A relative 288px-wide (w-72) row, widening to 384px (sm:w-[24rem]), reserves 240px (h-60) for panels. Right-aligned split groups have an 8px gap. Main buttons are 44px high, rounded-l-md, px-5, text-sm and font-medium. Both summaries are 44px high: Save has an outlined 36px-wide (w-9) summary sharing the border by -ml-px; Publish has a filled 40px-wide (w-10) summary and a white/20 left divider. Panels are 224px (w-56) wide, top-full with mt-2, z-20, rounded-md, border-neutral-200, p-1 and shadow-lg. Four 36px option rows have 16px icons; a divider precedes the final row.
States: Publish starts open; Save starts closed. Native details toggles each panel with Enter or Space on its summary. The 16px chevron rotates 180 degrees while open over 150ms, disabled by reduced-motion preference. Primary hover fills neutral-700; outlined segments and menu items fill neutral-50. All buttons and summaries use the 2px neutral-900 focus outline offset 2px. No disabled controls.

Desktop wireframe

┌─────────────────────────────────────────────────┐
│                      [Save][v] [Publish][^]     │
│                             ┌─────────────────┐ │
│                             │ [Schedule]      │ │
│                             │ [Preview]       │ │
│                             │ [Copy link]     │ │
│                             ├─────────────────┤ │
│                             │ [Save draft]    │ │
│                             └─────────────────┘ │
└─────────────────────────────────────────────────┘

View all

Buttons — Bulk selection bar
Layout tags: row,split,numbers,compact
Buttons — Command tiles with descriptions
Layout tags: grid,icons,compact
Buttons — Confirmation footer
Layout tags: stacked,split,compact

Buttons — Split button with menu

Pattern notes

More in Buttons

Buttons — Bulk selection bar

Buttons — Command tiles with descriptions

Buttons — Confirmation footer