Components / Actions
Icon button
A round button with only an icon, ghost by default.
Functions: cui_icon_button, cui_pop_id, cui_push_id_int
Usage
if (cui_icon_button(ui, CUI_ICON_TRASH_2, .tooltip = "Delete", .shortcut = "Del")) remove_item();Always give it a tooltip: it is the button's name.
Returns true on the frame it is clicked, and never while disabled or loading. shortcut is only a hint shown after the tooltip: it does not bind the key, so check the key yourself with cui_shortcut. The button's identity comes from its tooltip and its icon. Two of them with the same icon and tooltip in one scope, such as a delete button on every row of a list, need an id scope each: cui_push_id_int(ui, row) before the row and cui_pop_id(ui) after it.
A cui_button whose .icon changes (copy to check, play to pause) shrinks the old icon away while the new one scales in. An icon button is told apart by its tooltip and its icon together, so changing the icon of a cui_icon_button makes it a new button: the swap is not animated and keyboard focus does not stay on it.
Keyboard
- Tab focuses the button, and Enter or Space presses it.
Options of cui_icon_button
| Option | Type | Default | Description |
|---|---|---|---|
.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. | |
.size | cui_control_size | One of CUI_SIZE_MD, CUI_SIZE_SM or CUI_SIZE_LG. | |
.icon | const char * | leading icon, e.g. CUI_ICON_PLUS | |
.icon_right | const char * | trailing icon | |
.disabled | bool | Greyed out, and takes no input. | |
.loading | bool | spinner, ignores clicks | |
.full_width | bool | Stretches to the width of its container. | |
.selected | bool | toggled look | |
.tooltip | const char * | Text shown when the pointer rests on it. | |
.shortcut | const char * | shown as a hint in the tooltip, e.g. "Ctrl S" | |
.width | cui_size | Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own. | |
.color | cui_color | text and icon color, e.g. CUI_COLOR_ACCENT for a toggled icon |
Related
- Shortcut recorder: A field that records a key combination, for settings where people choose their own shortcuts.
- Button: Starts an action when clicked. It comes in six variants and three sizes, with an optional icon and a loading state.
- 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.
- Split button: A main action with a menu of related actions behind a chevron.