Close Button — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::CloseButton;
2
3CloseButton::new("close-button")

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

Rust types

CloseButton

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

Appearance builders and theme tokens Close Button uses.

Close Button styling
Style	Description
`flex + size(px(24.)) + p(px(4.)) + items_center + justify_center`	Base 24px square and alignment; GPUI has no isolation, selection, highlight or transform-origin controls.
`cursor_pointer()`	Enabled close buttons use the interactive pointer cursor.
`small_radius(cx)`	Twelve-pixel root corner radius.
`colors.default.color + colors.muted`	Default surface and foreground semantic tokens.
`hover(colors.default.hover())`	Hover surface uses the default-hover role token.
`active centered root-bounds shrink`	The root bounds shrink to 93% about the center without moving neighboring layout; fixed child content remains unscaled.
`svg().size(px(16.)) / icon(element)`	The built-in glyph is 16px; selector-specific margins and pointer behavior are unavailable for arbitrary replacement children.
`immediate hover/active/ring styles`	Changes hover, press and focus styling on a frame without these interpolation timelines.
`ring_if_focused(offset = true)`	Shared focus-visible ring and offset treatment.
`disabled_opacity + listener/callback/tab-stop gates`	Matches opacity and interaction semantics through explicit gates rather than hit testing.

Close Button builders
Builder	Type	Default	Description
`content(render)`	`AnyElement \| Fn(values: CloseButtonRenderProps) -> AnyElement`	`<CloseIcon />`	Replaces the default glyph with an element or an interactive-state render function.
`on_press(callback)`	`Fn() -> ()`	—	Handler called when the enabled button is pressed.
`is_disabled(bool)`	`bool`	`false`	Whether the close button is disabled.

Close Button parts
Part	Description
`CloseButton`	Focusable root button and owner of disabled, hover, press and focus state.
`CloseButton`	Built-in close glyph; icon(element) or content(render) replaces it in the port.

Close Button states
Builder	State	Description
`hover(colors.default.hover()) + InteractiveState::is_hovered`	`Hovered`	Enabled buttons use the default-hover background and report hover to render content.
`active centered root-bounds shrink + InteractiveState::is_pressed`	`Pressed`	Pressed state reaches custom content; the root bounds shrink to a centered 93%, but fixed child content does not scale with the CSS transform.
`tab_stop_handle + ring_if_focused`	`Focus visible`	Keyboard focus draws the shared status-focused ring.
`is_disabled + disabled_opacity + interaction gates`	`Disabled`	Disabled buttons are dimmed, removed from the tab order and expose no hover, press or activation.