Alert
Display an important inline message.
1use herogpui::components::alert::Alert;Usage
1use herogpui::prelude::Alert;
2use gpui::prelude::*;
3
4wide_col(vec![Alert::new("New features available")
5 .description(ALERT_USAGE_DESCRIPTION)
6 .into_any_element()])Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
Alert
Alert is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Alert uses.
Styling
| Style | Description |
|---|---|
flex + items_start + justify_start + gap(px(16.)) + w_full + px(px(16.)) + py(px(12.)) + control_radius + colors.surface.background + surface_shadow | 68px card for title plus description: 12 + 24 + 20 + 12 of pure leading, the 16px gap-4 between the 24px indicator box and the content column. |
flex + flex_col + items_start + flex_1 | The content column grows beside the indicator and stacks the title and description with no gap utility of its own; `h-full` is a no-op in the port's auto-height card. |
p(px(4.)) + items_center + justify_center + flex_shrink_0 + svg size(px(16.)) | A 24px box (4 + 16 + 4) around the 16px glyph. `select-none` has no GPUI analogue, and the box is `flex_shrink_0` so the card cannot compress it. |
text_size(px(14.)) + line_height(px(24.)) + FontWeight::MEDIUM | 14px title over a 24px line box at medium weight — never semibold. |
text_size(px(14.)) + line_height(px(20.)) + colors.muted | 14px description at the `text-sm` leading (20px), muted rather than the inherited foreground. |
role_fg = colors.foreground on Default, sem.soft_foreground(colors.foreground) otherwise | The five status classes only recolour the title and the indicator; `.alert--default` restores the plain foreground for both. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
status( | Color | Color:: | 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 / text / 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. |
new( | title / text | — | 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 | — | The alert title text. Takes plain title text; arbitrary elements have no title builder. |
description( | text | — | The alert description text. Takes plain description text; omitting it renders no description row at all. |
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, painted with the status soft-foreground (`text-foreground` on default). Draws the glyph but offers no custom indicator children. |
Alert | `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. |