All components (204)

Split button

Actions · SplitButton

What it is and when to use it

The usual action with its variants next to it: "Issue invoice" and, in the dropdown, "Issue and send by email" or "Save as draft". They are two real buttons joined together, each with its own name: the large one performs the action and the arrow one (square) opens the menu.

When to use it

There is one option that is used almost always and other similar ones that are used from time to time: it saves filling the screen with buttons.
As the main action of a form or a record: by default it is solid and accent.
onPress is the large action; actions are those in the menu and onSelect receives the key of the chosen one.

When not to

If all the options weigh the same, there is no main action: ActionMenu.
If there is only one action: Button.

Keyboard: Tab goes through both halves, first the action and then the arrow. On the arrow, Enter, Space or Down Arrow open the menu (Up Arrow opens it on the last option); the arrows move through the options, Home and End go to the ends, Enter chooses and Escape closes and returns focus to the arrow. disabled turns off both halves.

Accessibility: the arrow has no text: its name is menuLabel ("More options" by default), which also names the menu. It is better if it says what it is for: "More ways to issue". destructive options are red and carry their verb in writing, never only the color.

Fine-tuning: no variables of its own. Each half is a Button and accepts the --amset-button-* variables; the joint is adjusted with the classes amset-split, amset-split__main and amset-split__arrow. The menu is that of ActionMenu (amset-menu).

What it looks like

The usual action on the big button; the others in the arrow.

<SplitButton
  menuLabel="More ways to issue"
  onPress={emitir}
  actions={[
    { key: 'emitir-enviar', label: 'Issue and send by email' },
    { key: 'pro forma', label: 'Issue as pro forma' },
    { key: 'descartar', label: 'Discard the invoice', destructive: true, separatedBefore: true },
  ]}
  onSelect={hacer}
>
  Emitir factura
</SplitButton>

Props

Import it with import { SplitButton } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`actions`required	`readonly MenuAction[]`	The variants of that action: "Save and send", "Save as draft".
`children`required	`ReactNode`	What the big button does: the usual action.
`onPress`required	`() => void`	—
`onSelect`required	`(key: string) => void`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	—
`menuLabel`	`string`	Name of the dropdown button: it is a button without text.
`placement`	`Placement`	—
`size`	`"sm" \| "md" \| "lg"`	—
`startIcon`	`ReactNode`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	Like that of `Button`. `solid` by default: it is usually the main action.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: