Components / Actions
Button
Starts an action when clicked. It comes in six variants and three sizes, with an optional icon and a loading state.
Functions: cui_button
Usage
if (cui_button(ui, "Save", .variant = CUI_BUTTON_PRIMARY, .icon = CUI_ICON_CHECK)) save();
cui_button(ui, "Cancel");
cui_button(ui, "Saving", .variant = CUI_BUTTON_PRIMARY, .loading = true);| Option | Values |
|---|---|
variant | CUI_BUTTON_SECONDARY (default), PRIMARY, OUTLINE, GHOST, DANGER, LINK |
size | CUI_SIZE_SM (30), CUI_SIZE_MD (36, default), CUI_SIZE_LG (44) |
icon, icon_right | Any CUI_ICON_* |
loading | Shows a spinner, ignores clicks, keeps the label so nothing jumps |
disabled, selected, full_width, width | |
color | Text and icon color. Pair it with selected for toggles: .selected = liked, .color = liked ? CUI_COLOR_ACCENT : CUI_TRANSPARENT |
tooltip, shortcut | Tooltip text and a shortcut hint |
Use one primary button per view. Presses scale to 0.97 on a snappy spring. Keyboard: Tab to focus, Enter or Space to press.
Every state, rendered by tests/component_shots.c. The focus ring only appears for keyboard focus, never after a click.
Keyboard
- Tab to focus, Enter or Space to press.
Options of cui_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
- Icon button: A round button with only an icon, ghost by default.
- 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.
- Toggle group: A row of joined toggle buttons, each on or off, or exactly one on at a time.