Split button

In FORMA

• Liegt in kit/arc/split-button und ist über @/forma/arc/split-button/split-button erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• One default action with a few close variants, like Merge with Squash and Rebase.
• Export or share actions where one format is the usual pick and others sit behind the chevron.
• Copy actions that swap the label to Copied in place while offering alternatives.

When not to use

• Use dropdown-menu when there is no default action and every option is equal.
• Use button when there are no alternatives.
• Use context-menu for actions tied to a piece of content rather than a toolbar.

Usage

import { SplitButton } from "@/forma/arc/split-button/split-button";

export function MergeButton() {
  return (
    <SplitButton
      label="Merge pull request"
      onClick={merge}
      actions={[
        { label: "Squash and merge", onSelect: squash },
        { label: "Rebase and merge", onSelect: rebase },
        { label: "Close pull request", onSelect: close, destructive: true },
      ]}
    />
  );
}

API reference

SplitButton

A primary action joined to a chevron that opens a Radix dropdown of related actions.

Keyboard interactions

Accessibility

• Two native buttons; the chevron is labelled "<label> more actions".
• The menu is a Radix DropdownMenu with menu and menuitem roles and focus management.
• The main label is announced through a polite live region when it changes.

Motion

• The main label and icon morph in place while its width springs; the menu half never scales, so the menu opens from a still anchor.
• Menu items fade in with a short stagger.
• Reduced motion removes the press scale, width spring, and menu transform, leaving a quick opacity fade.

Responsive behavior

• The menu opens aligned to the end of the button with 12px collision padding, so it stays on screen near viewport edges.
• The secondary variant sets a 142px minimum on the main half; the pair does not collapse on narrow screens, so give it its own row on mobile.

Performance

• The main label animates per letter with a ResizeObserver-driven width spring; the menu mounts only while open through a Radix portal.

Notes for AI

• Use when one action is the default and two to five close variants exist. For a menu with no default action use dropdown-menu.
• Keep the menu actions as variations of the main action; put unrelated commands elsewhere.
• Swap label and icon (Copy page → Copied) to show the result in place.

Related

• Button: A clear, responsive action with quiet secondary states.
• Dropdown menu: A focused list of actions anchored to a trigger.
• Action button: A compact button for frequent toolbar actions.
• Copy button: Copy a value with immediate confirmation.

Also in buttons

• Button group: Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.
• Floating button group: Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.
• Expanding button group: Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.
• Icon morph: Icons that morph between states: menu to close, play to pause, copy to check, and more.
• Confirm morph: A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

Guidance for AI tools

Split button: A primary action with a menu of nearby alternatives. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt