Split Button

1import { SplitButton } from '@/ui/Button'23<SplitButton4  label="Deploy to production"      // names the DEFAULT, not the family5  startIcon={<Rocket />}6  onAction={deployToProduction}     // the wide half — one click, no menu7  options={[8    { label: 'Deploy to staging',     icon: <GitBranch />, onSelect: deployStaging },9    { label: 'Deploy and watch logs', icon: <Rocket />,    onSelect: deployVerbose },10    { label: 'Schedule for 02:00',    icon: <Clock />,     onSelect: schedule },11  ]}12/>1314// Remembering the last choice is what makes the control pay for itself.15const [preferred, setPreferred] = usePersistentState('deploy:default', 'production')16const target = TARGETS.find((t) => t.id === preferred)!1718<SplitButton19  label={`Deploy to ${target.name}`}20  onAction={() => deploy(target.id)}21  options={TARGETS.filter((t) => t.id !== preferred).map((t) => ({22    label: `Deploy to ${t.name}`,23    onSelect: () => {24      setPreferred(t.id)      // promote it, so the next click needs no menu25      deploy(t.id)26    },27  }))}28/>

<div class="ds-split">
  <!-- Two buttons. Two names. Two tab stops. -->
  <button type="button" class="ds-split__action">
    <svg aria-hidden="true">…</svg>
    Deploy to production
  </button>

  <button
    type="button"
    class="ds-split__toggle"
    aria-label="More deploy options"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="deploy-menu"
  >
    <svg aria-hidden="true">…</svg>
  </button>

  <div id="deploy-menu" role="menu" aria-label="More deploy options" hidden>
    <button type="button" role="menuitem">Deploy to staging</button>
    <button type="button" role="menuitem">Deploy and watch logs</button>
    <button type="button" role="menuitem">Schedule for 02:00</button>
  </div>
</div>

.ds-split {
  display: inline-flex;
  isolation: isolate;
}

.ds-split__action {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  padding-inline: 14px;
}

.ds-split__toggle {
  inline-size: 32px;                    /* sized by the target, not the icon */
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  display: grid;
  place-items: center;
}

/* The seam is the only signal that there are two targets here, so it is a
   meaningful boundary and owes 3:1 — not a decorative hairline. */
.ds-split__toggle::before {
  content: '';
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  inline-size: 1px;
  background: color-mix(in oklab, currentColor 24%, transparent);
}

/* Hover only the half under the pointer. A wash across both erases the seam
   at the exact moment the user is choosing which side to hit. */
.ds-split__action:hover,
.ds-split__toggle:hover { background: var(--ds-layer-hover); }

.ds-split__action:focus-visible,
.ds-split__toggle:focus-visible { z-index: 1; }

.ds-split__toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

@media (pointer: coarse) {
  .ds-split__toggle { inline-size: 44px; }
}