Components / Actions

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.

Functions: cui_button_group, cui_copy_button, cui_hold_button

Usage

cui_button_group(ui) {
    cui_button(ui, "Bold", .icon = CUI_ICON_BOLD);
    cui_button(ui, "Italic", .icon = CUI_ICON_ITALIC);
}
cui_copy_button(ui, "copy-key", api_key);                      /* confirms with a check */
if (cui_hold_button(ui, "Hold to delete", .icon = CUI_ICON_TRASH_2)) delete_everything();

The hold button fills while pressed (or while Space is held with keyboard focus) and fires once when full; let go early and it springs back. Options: duration (1.2 s), icon, variant (danger by default).

cui_button_group is a scope that takes no options and returns nothing: each button inside still returns its own click. Buttons in a group are ghost buttons unless they set a variant, and share one outline. cui_copy_button returns true on the frame it is clicked, after it has put the text on the clipboard; its id keeps the check that shows for 1.6 seconds afterwards. cui_hold_button returns true once, on the frame the fill completes, and not again until the button is let go. Its label is also its identity, and duration is in seconds. Use the hold button where a slip would cost something, and a confirm button where a second click is enough.

Keyboard

• The hold button fills while pressed (or while Space is held with keyboard focus) and fires once when full; let go early and it springs back.
• Tab moves through the buttons. Enter or Space presses a button in a group or the copy button, and holding either key fills the hold button.

Options of cui_hold_button

Option	Type	Default	Description
.duration	float	1.2	seconds the button must be held before it fires, default 1.2
.icon	const char *		An icon: a CUI_ICON_* constant, or a string from another icon font.
.variant	cui_button_variant		One of CUI_BUTTON_DEFAULT, CUI_BUTTON_SECONDARY, CUI_BUTTON_PRIMARY, CUI_BUTTON_OUTLINE, CUI_BUTTON_GHOST, CUI_BUTTON_DANGER or CUI_BUTTON_LINK.

Related

• Confirm button: A button for destructive actions that asks for a second click before it fires.
• Button: Starts an action when clicked. It comes in six variants and three sizes, with an optional icon and a loading state.
• Split button: A main action with a menu of related actions behind a chevron.
• Icon button: A round button with only an icon, ghost by default.