Alert — HeroGPUI

Alert 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

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::Alert;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w_full()
    .max_w(px(576.))
    .gap(px(16.))
    .children(vec![Alert::new("New features available")
        .description(ALERT_USAGE_DESCRIPTION)
        .radius(px(8.))
        .into_any_element()])

Also calls ALERT_USAGE_DESCRIPTION (included when you copy).

Custom Indicator

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
13use herogpui::prelude::{ActiveTheme, Alert, Color, icons};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

Alert::new("Review required")
    .description("A caller-owned warning mark stays inside the pinned indicator box.")
    .status(Color::Warning)
    .indicator(gpui::svg()
                   .size(px(16.))
                   .path(icons::INFO_CIRCLE)
                   .text_color(cx.colors().foreground)
                   .into_any_element())

There is no built-in close prop: a close affordance is an ordinary child, composed here as a `CloseButton`. 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
22
23
24
25
26
27
28
29
30
31
32
33
34
35use herogpui::prelude::{Alert, Button, CloseButton, Color, Size, Variant};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w_full()
    .max_w(px(576.))
    .gap(px(16.))
    .children(vec![
        if self.alert_visible {
            Alert::new("Saved")
                .description("Your changes are live.")
                .status(Color::Success)
                .child(CloseButton::new("alert-closable-close").on_press(
                    cx.listener(|this, _, _, cx| {
                        this.alert_visible = false;
                        cx.notify();
                    }),
                ))
                .into_any_element()
        } else {
            Button::new("alert-restore")
                .label("Bring it back")
                .variant(Variant::Tertiary)
                .size(Size::Sm)
                .on_press(cx.listener(|this, _, _, cx| {
                    this.alert_visible = true;
                    cx.notify();
                }))
                .into_any_element()
        },
    ])

Expand code

Helpers used by these examples

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

ALERT_USAGE_DESCRIPTION

1
2
3
4
5
6
7/// v3's Alert "Usage" copy, held apart from the demo so the literal keeps its
/// single spaces: rustfmt joins a `\` line continuation without dropping the
/// indentation that followed it.
const ALERT_USAGE_DESCRIPTION: &str = concat!(
    "Check out our latest updates including dark mode support ",
    "and improved accessibility features.",
);

Anatomy

Rust types

Alert

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

API reference

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

Builders

Alert builders
Builder	Values	Default	Description
`status(Color)`	`Color::Default \| Color::Accent \| Color::Success \| Color::Warning \| Color::Danger`	`Color::Default`	The visual status of the alert. It recolours the indicator glyph and the title text only — the container stays `bg-surface` for every status.
`new(title) / description(text) / ParentElement::extend`Partial	`AnyElement`	—	The alert content, typically Title and Description plus additional elements like the composed `CloseButton` the examples use (removed `isClosable`/`onClose`). Takes the title and description as builders and appends the rest as composed children after the content column.
`indicator(content)`	`AnyElement`	—	Custom indicator icon, defaulting to the status glyph. Accepts caller content while retaining the 24px indicator box.
`new(title) / description(text)`Partial	`AnyElement`	—	The content column beside the indicator. Folds the column into the root and exposes its typical content as the title and description builders; composed children land after it instead of inside it.
`new(title)`Partial	`AnyElement`	—	The alert title text. Takes plain title text; arbitrary elements have no title builder.
`description(text)`Partial	`AnyElement`	—	The alert description text. Takes plain description text; omitting it renders no description row at all.

Not ported5 HeroUI entries not ported

Alert builders not ported
HeroUI v3	Why it is not ported
`Alert.className`
`Alert.Indicator.className`
`Alert.Content.className`
`Alert.Title.className`
`Alert.Description.className`

Parts

Alert parts
Part	Description
`Alert`	Root card on the `.alert` BEM class: `flex w-full flex-row items-start justify-start gap-4 bg-surface px-4 py-3 shadow-surface` at `border-radius: min(32px, var(--radius-3xl))`. The status never paints the container; dark mode drops the surface shadow.
`Alert`	`flex items-center justify-center p-1 select-none` box around the `box-content size-4` status glyph or caller-owned indicator content, painted with the status soft-foreground when using the default glyph.
`Alert`Partial	`flex h-full grow flex-col items-start` column beside the indicator, with no gap of its own. Folds it into the root's layout and draws the title and description directly inside it.
`Alert`	`text-sm leading-6 font-medium`, painted the status soft-foreground (`text-foreground` on default) like the indicator.
`Alert`	`text-sm text-muted` — 14px text at the `text-sm` leading (20px), directly beneath the title.

Meter Progress Bar Progress Circle Skeleton Spinner

Usage

Usage

Colors

Custom Indicator

Closable

Helpers used by these examples

Anatomy

API reference

Builders

Parts

Related components