Components / Actions

Split button

A main action with a menu of related actions behind a chevron.

Functions: cui_split_button

Usage

static const char *more[] = { "Save as draft", "Save and publish", "Schedule..." };
switch (cui_split_button(ui, "Save", more, 3, .icon = CUI_ICON_SAVE)) {
case 0: save(); break;              /* the main part */
case 1: save_draft(); break;        /* menu item 0 */
case 2: publish(); break;
case 3: schedule(); break;
}

Returns 0 for the main action, 1 + i for menu item i, -1 otherwise. Options: variant (primary by default), size, icon, item_icons, disabled. Down arrow on the chevron opens the menu.

The result comes on the frame of the click or the choice; on every other frame the call returns -1. items is your array of count labels and is only read. item_icons, when you set it, needs an icon or NULL for each item. The menu opens under the button, lined up with its trailing edge, and closes when an item is chosen. disabled turns off both parts. The button keeps its state by its label, so two split buttons with the same label in one scope need different keys: "Save##draft" still shows "Save".

Keyboard

• Down arrow on the chevron opens the menu.
• Tab stops on the main part and on the chevron, and Enter or Space presses the focused one. In the open menu, Up and Down move the highlight, Enter chooses and Esc closes the menu.

Options of cui_split_button

Option	Type	Default	Description
.variant	cui_button_variant	primary	default primary
.size	cui_control_size		One of CUI_SIZE_MD, CUI_SIZE_SM or CUI_SIZE_LG.
.icon	const char *		An icon: a CUI_ICON_* constant, or a string from another icon font.
.item_icons	const char *const *		one icon per menu item, in the order of the items; NULL for none
.disabled	bool		Greyed out, and takes no input.

Related

• Toggle group: A row of joined toggle buttons, each on or off, or exactly one on at a time.
• Button group, copy and hold to confirm: Three small helpers for actions: buttons joined into one group, a button that copies text to the clipboard, and a button that must be held to fire.
• Confirm button: A button for destructive actions that asks for a second click before it fires.
• Icon button: A round button with only an icon, ghost by default.