Close Button — HeroGPUI

CloseButton on docs.rs Source at v0.14.0

Usage

Showing Usage, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.

Usage

`radius` sets the corners; `sx` squares the top-left corner, including while pressed. An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15use herogpui::prelude::CloseButton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![CloseButton::new("close-button")
        .radius(px(4.))
        .sx(|el| el.rounded_tl(px(0.)))
        .into_any_element()])

Interactive

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22use herogpui::prelude::{ActiveTheme, CloseButton};
use herogpui::gpui::prelude::*;
use herogpui::gpui::{App, px};
use herogpui::gpui;

let presses = self.close_button_presses;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        CloseButton::new("close-button-press")
            .on_press(cx.listener(|this, _, _, cx| {
                this.close_button_presses += 1;
                cx.notify();
            }))
            .into_any_element(),
        para(&format!("Pressed {presses} times"), cx),
    ])

Expand code

Also calls para (included when you copy).

With Custom Icon

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17use herogpui::prelude::{ActiveTheme, CloseButton, icons};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![CloseButton::new("close-button-icon-1").icon(gpui::svg()
                                                       .size(px(16.))
                                                       .path(icons::CLOSE_CIRCLE)
                                                       .text_color(cx.colors().foreground)
                                                       .into_any_element())
                 .into_any_element()])

`hover_bg` names the hover fill; it eases from the resting `--default` (or the `sx` background when one is set), the same contract as `Button`. An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16use herogpui::prelude::{ActiveTheme, CloseButton};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let accent = cx.colors().accent.color;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![CloseButton::new("close-button-hover-bg")
        .hover_bg(accent)
        .into_any_element()])

Render Function

Hover, focus, or press the button to drive the custom icon from its live render state. An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35use herogpui::prelude::{ActiveTheme, CloseButton, icons};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

{
    let muted = cx.colors().muted;
    let foreground = cx.colors().foreground;
    gpui::div()
        .flex()
        .flex_col()
        .items_start()
        .justify_center()
        .gap(px(12.))
        .children(vec![CloseButton::new("close-button-render-state")
                .content(move |state| {
                    gpui::svg()
                        .size(px(16.))
                        .path(if state.is_pressed {
                            icons::CLOSE_CIRCLE
                        } else {
                            icons::CLOSE
                        })
                        .text_color(if state.is_disabled {
                            muted
                        } else if state.is_hovered || state.is_focused {
                            foreground
                        } else {
                            muted
                        })
                        .into_any_element()
                })
                .into_any_element()])
        .into_any_element()
}

Expand code

Disabled

An element expression with window: &mut Window and cx: &mut App in scope.

Rust

1
2
3
4
5
6
7
8
9
10
11
12
13
14use herogpui::prelude::CloseButton;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![CloseButton::new("close-button-disabled")
        .is_disabled(true)
        .into_any_element()])

Helpers used by these examples

Plain functions over the public API, defined once here and copied with each example that calls them.

para

1
2
3
4
5
6
7
8
9
10fn para(text: &str, cx: &App) -> gpui::AnyElement {
    let colors = cx.colors();
    gpui::div()
        .text_size(px(14.5))
        .line_height(px(24.))
        .text_color(colors.foreground)
        .max_w(px(720.))
        .child(text.to_owned())
        .into_any_element()
}

Anatomy

Rust types

CloseButton

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

API reference

Against HeroUI v3.2.6: 11 entries ported, 2 partial, 5 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Close Button builders
Builder	Values	Default	Description
`content(render)`Partial	`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)`	`true \| false`	`false`	Whether the close button is disabled.

Not ported4 HeroUI entries not ported

Close Button builders not ported
HeroUI v3	Why it is not ported
`CloseButton.variant`	The sole visual variant exposed by v3.
`React Aria Button Props.aria-label`	Accessible label; gpui-pre 0.3.3 has no accessibility tree surface.
`React Aria Button Props.aria-labelledby`	ID of the labelling element; unavailable without an accessibility tree.
`React Aria Button Props.aria-describedby`	ID of the describing element; unavailable without an accessibility tree.

Parts

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.

States

Close Button states
State	Builder	Description
`Hovered`	`is_hovered`	Enabled buttons use the default-hover background and report hover to render content.
`Pressed`Partial	`is_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.
`Focus visible`	`tab_stop_handle`	Keyboard focus draws the shared status-focused ring.
`Disabled`	`is_disabled`	Disabled buttons are dimmed, removed from the tab order and expose no hover, press or activation.

Not ported1 HeroUI entry not ported

Close Button states not ported
HeroUI v3	Why it is not ported
`Pending`	The pinned stylesheet supports status-pending, but CloseButton exposes no pending prop.

Button Button Group Toggle Button

Usage

Usage

Interactive

With Custom Icon

Hover Colour

Render Function

Disabled

Helpers used by these examples

Anatomy

API reference

Builders

Parts

States

Related components