Alert

Displays a callout for user attention.

Overview

图标 + 标题 + 描述的基础提示块，Overview 连续展示两条。

GPUI · Live previewTry it out

Installation

Alert 是单个 Rust 文件（src/alert.rs），直接用 gpui 的元素与 PathBuilder 图标绘制。复制到你的 crate，或下载完整示例直接运行。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# alert.rs is a single styled component —5# it uses gpui's div / canvas / PathBuilder6# directly, no extra primitives needed.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --alert34# Other demos:5cargo run --locked -- --alert destructive6cargo run --locked -- --alert action7cargo run --locked -- --alert custom

Usage

builder 链式配置图标、标题、描述与操作按钮；把实体保留在宿主视图上，渲染时放进任意容器。

Example.rs

1use justdo_command::alert::{Alert, AlertIcon};23// Keep the entity on your host view.4let alert = cx.new(|_| {5    Alert::new()6        .icon(AlertIcon::Check)7        .title("Payment successful")8        .description("Your payment of $29.99 has been processed.")9});1011// In render: div().child(self.alert.clone())

网页预览与桌面端运行同一份 Rust / GPUI 组件。

Composition

组合结构对齐 shadcn/ui 的 Alert：容器 + 图标 + 标题 + 描述 + 可选操作。操作按钮独立可聚焦。

Structure

1Alert                      status callout2├── Icon                   info · check · error · warning3├── AlertTitle             .title(..)4├── AlertDescription       .description(..)5└── AlertAction            .action(..) -> AlertActionEvent

Accessibility

Keyboard

Tab 沿页面 tab 序聚焦操作按钮
Enter Space 触发 AlertActionEvent

Semantics

Alert 是静态状态提示（对应 role="alert" 的展示语义），action 变体的按钮可聚焦、带 focus-visible 高亮。reduced-motion 下入场动画自动关闭。

API Reference

组件实体暴露的方法与事件。

API	Signature	Notes
`Alert::new()`	`-> Alert`	Creates the entity content. Default variant, no icon.
`.variant(..)`	`AlertVariant`	Default \| Destructive — flips surface, border and ink colors.
`.icon(..)`	`AlertIcon`	Info \| Check \| Error \| Warning, drawn with PathBuilder.
`.title(..)`	`impl Into<SharedString>`	Bold heading line inside the callout.
`.description(..)`	`impl Into<SharedString>`	Secondary copy under the title.
`.action(..)`	`impl Into<SharedString>`	Right-side button; pressing it emits AlertActionEvent.
`.surface/.edge/.tint(..)`	`impl Into<Hsla>`	Per-alert color overrides for custom-color variants.
`.dark(bool)`	`bool`	Dark color scheme for surfaces, text and borders.
`AlertActionEvent`	`{ label }`	Emitted on action press; subscribe with cx.subscribe.

Example.rs

1// AlertActionEvent { label } is emitted when the action is pressed.2cx.subscribe(&self.alert, |view, _alert, event, cx| {3    println!("pressed: {}", event.label);4    cx.notify();5});

Source & inspiration

结构与视觉参考 shadcn/ui Alert 。本页交互由 Rust / GPUI 绘制，基础样式来自 gpui-kit 。