Component ToggleButton

ToggleButton

A selectable button (useful for segmented controls or filters).

ToggleButton can work as:

• A standalone toggle (selected/unselected)
• A mutually-exclusive group (segmented control) via .group("...")

When to use

• Segmented controls (view modes, filters, tabs)
• Toggleable toolbar buttons (bold/italic/etc.)

Not a good fit:

• Boolean settings (use Switch or Checkbox)

Example

use gpui::ElementId;
use yororen_ui::component::toggle_button;

let view = toggle_button("Bold")
    .key(("toolbar", "bold"))
    .default_selected(false)
    .on_toggle(|selected, _ev: Option<&gpui::ClickEvent>, _window, _cx| {
        // ...
    });

Notes

• Use .group("...") to create a mutually exclusive group.

API

• toggle_button("..."): constructor
• id(...) / key(...): stable identity
• selected(bool): set selected (controlled)
• default_selected(bool): initial selection for group/internal state
• disabled(bool)
• variant(ActionVariantKind)
• group("..."): group id for mutually exclusive selection
• on_toggle(|selected, ev: Option<&gpui::ClickEvent>, window, cx| ...): ev is Some(event) for user clicks, None for programmatic changes
• Styling: bg/selected_bg/hover_bg

Interaction and behavior

• Without on_toggle, the button manages its own selected state (keyed by id).
• With .group("..."), clicking selects the current button and deselects others in the group.

Defaults

• Height: 36px
• Padding: px_4 + py_2
• Corner radius: rounded_md