Button — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::{Button, Size, Variant};
2
3Button::new("button")
4    .label("Click me")

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Rust types

Button

Button is assembled from these builders. The API reference lists each one.

Appearance builders and theme tokens Button uses.

Button styling
Style	Description
`flex + h(36px) + gap(8px) + px(16px) + control_radius`	Base desktop geometry, typography and 24px rounded control surface.
`Variant::Primary + colors.accent`	Solid accent variant tokens.
`Variant::Secondary + colors.default + colors.accent.soft_foreground(colors.foreground)`	Neutral filled surface with accent-colored foreground.
`Variant::Tertiary + colors.default + colors.foreground`	Neutral default surface that preserves the inherited foreground.
`Variant::Ghost + colors.default`	Transparent low-emphasis variant with the neutral foreground.
`Variant::Outline + colors.default.color.alpha(0.6) + colors.border`	Outlined variant with the translucent hover fill.
`Variant::Danger/DangerSoft + colors.danger`	Solid and soft danger variants.
`Size + PRESSED_SCALE_SUBTLE/PRESSED_SCALE/PRESSED_SCALE_FIRM`	Size-specific control metrics and press geometry.
`is_icon_only + icon_control_size`	Square icon-only geometry follows the selected size.
`full_width(true) + w_full`	Fills the available width.
`child(element)`	Caller-owned GPUI children do not receive selector-driven icon sizing or margins.
`anim::hover_fade + TRANSITION_MS + Curve::Out`	Hover colors interpolate on a listener-free child fill and reduced motion swaps directly.
`anim::pressed + ring_if_focused`	Press geometry and focus shadow reach the correct endpoints, but GPUI applies both without property interpolation.

Button builders
Builder	Type	Default	Description
`variant(Variant)`	`Variant`	`Variant::Primary`	Visual style variant.
`size(Size)`	`Size`	`Size::Md`	Size of the button.
`full_width(bool)`	`bool`	`false`	Whether the button fills its container.
`is_disabled(bool)`	`bool`	`false`	Disables pointer and keyboard presses and removes the tab stop.
`is_pending(bool)`	`bool`	`false`	Blocks presses and hover while retaining focusability.
`is_icon_only(bool)`	`bool`	`false`	Uses the size-specific square icon control geometry.
`on_press(callback)`	`Fn(e: ClickEvent) -> ()`	—	Pointer and keyboard presses are supported, but the callback receives GPUI's ClickEvent.
`label(value) / child(element) / content(render)`	`AnyElement \| Fn(values: ButtonRenderProps) -> AnyElement`	—	Text, arbitrary children and state-driven content are supported through separate builders.
`content(render)`	`bool`	—	Pending state supplied to custom content.

Button parts
Part	Description
`Button`	Focusable root that owns content, visual variant and interaction state.

Button states
Builder	State	Description
`anim::hover_fade + InteractiveState::is_hovered`	`Hovered`	Variant-specific hover background and render state.
`anim::pressed + InteractiveState::is_pressed`	`Pressed`	Size-specific scale and render state for pointer or keyboard press.
`tab_stop_handle + ring_if_focused`	`Focus visible`	Keyboard focus displays the status-focused ring.
`is_disabled + disabled_opacity`	`Disabled`	Disabled buttons are dimmed, inert and removed from the tab order.
`is_pending + disabled_opacity + interactive=false`	`Pending`	Pending buttons are dimmed and inert but remain focusable.