Split button | Arcadia Design

import { SplitButton } from "@arcadia/ui";

<SplitButton hint="⌘⏎" menuLabel="Continue on" menu={<Moves />} onClick={run}>Continue on Large model</SplitButton>
<SplitButton variant="primary" menuLabel="Continue on" menu={<Moves />} onClick={run}>Retry</SplitButton>
<SplitButton collapse="menu" variant="ghost" menuLabel="Continue on" menu={<Moves />} onClick={run}>Continue on Large model</SplitButton>

TSX

import { SplitButton } from "@arcadia/ui";

<SplitButton hint="⌘⏎" menuLabel="Continue on" menu={<Moves />} onClick={run}>
  Continue on Large model
</SplitButton>

One pill, two parts. The main part names the best move and runs it; the chevron opens the menu of every other move, the best one first. A 1px divider in the border's ink keeps them apart, each part hovers and presses on its own, and each takes its own focus ring. A hint shows the key that runs the main part from elsewhere.

The main part's label is whole or gone, never faded. With less room than the split needs, the chevron stands alone, labelled menuLabel, and the menu still opens from it: Continue on where the split said Continue on Large model. collapse="menu" keeps that form for a move that has no single best choice, several items at once.

Examples

Variants

The four Button variants a split takes. Both parts share the variant; primary draws its divider in the label's ink.

import { SplitButton } from "@arcadia/ui";

<SplitButton variant="primary" menuLabel="Continue on" menu={<Moves />}>Retry</SplitButton>
<SplitButton variant="secondary" menuLabel="Continue on" menu={<Moves />}>Retry</SplitButton>
<SplitButton variant="ghost" menuLabel="Continue on" menu={<Moves />}>Retry</SplitButton>
<SplitButton variant="text" menuLabel="Continue on" menu={<Moves />}>Retry</SplitButton>

Collapse

Drag to narrow the room. The split measures the width it needs and stands the chevron alone below it, before it paints, so nothing jumps.

import { useState } from "react";
import { SplitButton } from "@arcadia/ui";

function Collapse() {
  const [w, setW] = useState(100);
  return (
    <div {...stylex.props(s.stack)}>
      <div style={{ width: `${w}%` }}>
        <SplitButton hint="⌘⏎" menuLabel="Continue on" menu={<Moves />} onClick={run}>Continue on Large model</SplitButton>
      </div>
      <input {...sx(null, cmp.scrubInput)} type="range" min={20} max={100} value={w} aria-label="Room for the button" onChange={(e) => setW(Number(e.target.value))} />
    </div>
  );
}

Several items

Moving a group has no single best move: collapse="menu" shows the menu alone at any width.

import { SplitButton } from "@arcadia/ui";

<SplitButton collapse="menu" menuLabel="Continue on" menu={<Moves />}>Continue on Large model</SplitButton>

Busy

Press the main part. While busy, it keeps its label and its width, the spinner takes the chevron's place, and both parts ignore presses while keeping focus.

import { useState } from "react";
import { SplitButton } from "@arcadia/ui";

function Busy() {
  const [busy, setBusy] = useState(false);
  const go = () => {
    setBusy(true);
    setTimeout(() => setBusy(false), 1500);
  };
  return (
    <SplitButton busy={busy} hint="⌘⏎" menuLabel="Continue on" menu={<Moves />} onClick={go}>
      Continue on Large model
    </SplitButton>
  );
}

Holding still

The best move changes as plans are used.

88% left

import { useEffect, useState } from "react";
import { SplitButton } from "@arcadia/ui";

function Hold() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick((n) => n + 1), 1200);
    return () => clearInterval(t);
  }, []);
  const best = tick % 2 ? "Small model" : "Large model";
  return (
    <div {...stylex.props(s.row)}>
      <SplitButton menuLabel="Continue on" menu={<Moves />} onClick={run}>{`Continue on ${best}`}</SplitButton>
      <span {...sx(null, cmp.detail, cmp.num)}>{ROOM[tick % ROOM.length]}</span>
    </div>
  );
}

While the pointer is on the control or its menu is open, the label and the action it runs hold still; the change lands once the pointer leaves.

Variant and stateShow interaction states

RestBusyDisabledPrimary

Secondary

Ghost

Text

Size and kind

With a hintA short moveMenu aloneBusyExtra small

Small

rootStyle takes where the split sits: margins, self-alignment, flex and grid placement and size bounds. Its look is the Button variant it takes.

TSX

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  // the move sits at the end of its row, under the sentence it answers
  end: { marginInlineStart: "auto" },
});

<SplitButton rootStyle={styles.end} menuLabel="Continue on" menu={menu}>Retry</SplitButton>

Two native <button>s in reading order. The main part is named by its label; the chevron by menuLabel, with aria-haspopup and aria-expanded, and focus moves into the menu and back. Standing alone, the chevron is one button named by the label it shows.

A hint is drawn only and becomes aria-keyshortcuts on the main part; binding the key is yours. busy sets aria-busy on the main part and blocks both parts without dropping focus.

EnterSpace: On the main part, run its move
EnterSpace↓: On the chevron, open the menu
Esc: Close the menu and return focus

SplitButton

onClick: (e: MouseEvent<HTMLButtonElement>) => void
menuLabelrequired: string; The chevron's accessible name, and its label standing alone.
menurequired: ReactNode; The MenuContent the chevron opens.
variant: "primary" | "secondary" | "ghost" | "text"Default "secondary"
size: "xs" | "sm"Default "sm"
hint: ShortcutSpec | ReactElement; A key hint on the main part.
collapse: "auto" | "menu"Default "auto"; auto: the chevron stands alone when the split doesn't fit. menu: always.
busy: booleanDefault false; The main part keeps its width, a spinner takes the chevron's place, both parts are inert.
disabled: booleanDefault false
hold: booleanDefault true; The label and its action hold while the pointer is on the control or the menu is open.
open: boolean
defaultOpen: booleanDefault false
onOpenChange: (open: boolean, details: OpenChangeDetails) => void
rootStyle: RootStyle; A component's typed override prop: Layout plus the knobs it documents. Knobs maps each knob to the references it takes ({ "--button-px": Ref<Space> }), so a literal colour, a wrong-kind token or a property the component doesn't expose is a type error at the call site. A knob also takes another kit knob of the same kind ("--icon-size": "var(--button-icon)").
childrenrequired: ReactNode; The main part's label: whole or gone, never faded.

Rest props go to <span> props.

Usage

Examples

Variants

Collapse

Several items

Busy

Holding still

Matrix

Customising

Accessibility

API reference

SplitButton