revido kit
Start building
← All components
actions / beta

SplitButton

Primary action plus alternatives in one pill: label names the action, onPress runs it (or href navigates), and children are MenuItem options dispatched through onAction.

LIVE PREVIEW
Loading preview…

When to use

  • A frequent primary action with related alternatives: Save and close, export formats, or creation from a template.
  • Async actions that need pending, success and error feedback without changing the control's width.
  • Set successLabel for async completion; isPending/isDisabled affect the primary action, while menuDisabled controls the alternatives.

Consider an alternative

  • A single action with no related alternatives — use Button.
  • Options without a primary action — use Menu.
  • Choosing a form value — use Select or ComboBox.

Import

import { SplitButton } from '@revido-llc/kit';

Keyboard interaction

  • Tab — reach the primary action and chevron separately
  • Enter / Space — run the focused action or open the menu
  • ArrowDown / Alt+ArrowDown on either part — open options
  • ArrowUp / ArrowDown in the menu — move between items
  • Escape — close the menu and return focus to the chevron

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

children (required)ReactNode—Ordinary Kit MenuItem, MenuSection and MenuSeparator children.
label (required)string—Visible and accessible name of the primary action.
errorMessagestring"Unable to complete the action. Try again."Error announcement and Kit toast title. Default: "Unable to complete the action. Try again."
hrefstring—Navigate through the Kit router instead of running an action.
iconReactNode—Decorative leading icon.
isDisabledbooleanfalseDisable both segments.
isPendingbooleanfalseControlled pending state, in addition to pending promises. Keeps width and blocks presses.
menuDisabledbooleanfalseDisable only the options menu, including ArrowDown from the primary action.
menuLabelstring"More options"Accessible name of the chevron trigger and its menu. Default: "More options".
onAction((key: Key) => void | Promise<void>)—Optional menu action handler; returned promises share the primary action's feedback.
onPress(() => void | Promise<void>)—Run the primary action. A returned promise drives pending, success and error feedback.
relstring—Link relationship when `href` is supplied.
size"xs" | "sm" | "md" | "lg""md"Button height and typography. Default: `md` (32px).
successLabelstring"Done"Completion label shown with a check and announced for 1.5 seconds. Default: "Done".
targetstring—Link target when `href` is supplied.
variant"primary" | "secondary" | "outline" | "ghost""primary"Button intent. Default: `primary`.
classNamestring—

Examples

Variants and sizes

The same primary, secondary, outline and ghost intents and 24/28/32/36px heights as Button.

<SplitButton label="Save" onPress={save} successLabel="Saved">
  <MenuItem onAction={saveAndClose}>Save and close</MenuItem>
</SplitButton>
<SplitButton label="Export" variant="outline" size="sm" onPress={exportCSV}>
  <MenuItem onAction={exportPDF}>Export PDF</MenuItem>
</SplitButton>

Feedback and disabled states

Press Save to try pending and success feedback. Errors restore the action label and show a Kit toast.

<SplitButton label="Save" onPress={save} successLabel="Saved">
  <MenuItem>Save and close</MenuItem>
</SplitButton>
<SplitButton label="Save" isPending>…</SplitButton>
<SplitButton label="Save" isDisabled>…</SplitButton>
<SplitButton label="Save" menuDisabled onPress={save}>…</SplitButton>

Copy page in docs

The docs-page pattern: copy the page as Markdown, with viewing it and handing it to an AI agent as options.

<SplitButton label="Copy page" icon={<Copy />} successLabel="Copied" menuLabel="More page actions" onPress={copyMarkdown}>
  <MenuItem id="copy-markdown" leading={{ kind: "icon", icon: <Copy /> }} description="Copy the full page to your clipboard.">Copy as Markdown</MenuItem>
  <MenuItem id="view-markdown" leading={{ kind: "icon", icon: <ExternalLink /> }} href={markdownUrl} target="_blank">View as Markdown</MenuItem>
  <MenuItem id="copy-agent-link" leading={{ kind: "icon", icon: <Link /> }} description="Copy an instruction with this page's Markdown URL.">Copy link for AI agents</MenuItem>
</SplitButton>

Save and create a deal

Keep the frequent action on the left; put alternate save paths and creation methods in the menu.

<SplitButton label="Save" icon={<Save />} onPress={save} onAction={saveOption} successLabel="Saved">
  <MenuItem id="close">Save and close</MenuItem>
  <MenuItem id="template">Save as template</MenuItem>
</SplitButton>
<SplitButton label="Create deal" icon={<Plus />} onPress={createDeal} onAction={createOption} successLabel="Created">
  <MenuItem id="template">From template</MenuItem>
  <MenuItem id="ai" leading={{ kind: "icon", icon: <Sparkles /> }}>With AI</MenuItem>
</SplitButton>

Export and merge

Format choices and merge strategies use ordinary menu items, sections and separators.

<SplitButton label="Export" icon={<Download />} variant="outline" onPress={exportCSV} onAction={exportOption}>
  <MenuSection title="Download">
    <MenuItem id="csv">CSV</MenuItem>
    <MenuItem id="pdf">PDF</MenuItem>
  </MenuSection>
  <MenuSeparator />
  <MenuItem id="link">Copy link</MenuItem>
</SplitButton>
<SplitButton label="Merge" icon={<GitMerge />} variant="secondary" onPress={merge} onAction={mergeOption} successLabel="Merged">
  <MenuItem id="squash">Squash</MenuItem>
  <MenuItem id="rebase">Rebase</MenuItem>
</SplitButton>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<SplitButton label="Save" href="/drafts"><MenuItem id="view">View drafts</MenuItem></SplitButton>

Related components