Component Button

Button

A clickable action.

Button is the standard “action” primitive. It is a styled container that you can put any child content into (text, icons, custom layout).

Example

use yororen_ui::component::button;

let save = button()
    .child("Save")
    .on_click(|_ev, _window, _cx| {
        // ...
    });

When to use

• Primary/secondary actions in forms, toolbars, dialogs
• Menu rows (when you want full-width clickable rows)

Not a good fit:

• Pure icon actions (use IconButton)

API

• button(): constructor
• id(...) / key(...): stable identity (optional, only needed for state management)
• clickable(bool): whether it should respond to clicks (default: true)
• disabled(bool): disable interaction + apply disabled styles
• variant(ActionVariantKind): theme variant (Neutral / Primary / Danger)
• on_click(|ev, window, cx| ...): click handler
• on_hover(|active, window, cx| ...): hover handler
• bg(Hsla) / hover_bg(Hsla): override background colors

Defaults

• Height: 36px
• Padding: horizontal px_4, vertical py_2
• Corner radius: rounded_md

Interaction and behavior

• disabled(true) prevents click handlers from running.
• If you render many buttons at the same call site (lists) and need state tracking, provide a stable id(...) (or render them under VirtualRow, which provides per-row namespacing).

Example: Variant + disabled

use yororen_ui::component::button;
use yororen_ui::theme::ActionVariantKind;

let primary = button().variant(ActionVariantKind::Primary).child("Save");
let disabled = button().variant(ActionVariantKind::Danger).disabled(true).child("Delete");

Notes

• Prefer key(...) only when you render many stateful buttons in repeated/virtualized UIs.