Icon Button

An icon-only command button.

Try it

Interact with the control below. This preview runs the exact code sample shown on this page.

Basic use

Radix · integration snippet

use gpui::{Context};
use xgpui_luma_look_radix as radix;
use xgpui_luma::infra::presenter::HasPresenter;

struct Example {
    control: gpui::Entity<xgpui_luma::controls::button::Button>,
    open_requests: usize,
}

impl Example {
    fn new(cx: &mut Context<Self>) -> Self {
        let control = radix::Button::new("open")
            .icon(xgpui_luma::controls::button::ControlIcon::SvgPath("icons/open.svg".into()))
            .label("Open")
            .on_click(cx, |app: &mut Self, cx| {
                app.open_requests += 1;
                cx.notify();
            })
            .spawn(cx);

        Self { control, open_requests: 0 }
    }
}

Integration snippet, checked against the current SDK and Radix crates. cx is the initialized owner context. The control retains its callbacks; callback owners are held weakly. Render self.control.clone() in the owner’s view.

SDK behavior & customization

A Button preset, not a separate interaction engine. Provide an accessible label or description.

Events

The callback updates application state. Use .on_click for activation and .on_event for all Button events; registrations are additive and hold the owner weakly. cx.notify() requests an owner redraw.

Event / payload	Application use
`Click`	Execute the application command.
`FocusChanged { focused: bool }`	Focus state changed.
`EnabledChanged { enabled: bool }`	Enabled state changed.
`HoverChanged { hovered: bool }`	Pointer hover state changed.

ButtonEvent · Event definitions. Match the events you need; allow for other variants.

Source

SDK module · Radix adapter