Button

Displays a button or a component that looks like a button.

Overview

Default / Secondary / Destructive / Outline / Ghost / Link 六种变体，hover/active/focus-visible 都有反馈。

GPUI · Live previewGPUI WASM

Installation

Button 是单个 Rust 文件（src/button.rs），样式层自绘，交互语义交给 gpui_base::Button 原语 —— focus、Tab 顺序、Enter/Space 激活、disabled 惰性全部免费。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# button.rs builds on gpui_base::Button — focus, keyboard5# activation and disabled behavior come from the primitive.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --button34# Other demos:5cargo run --locked -- --button variants6cargo run --locked -- --button sizes7cargo run --locked -- --button icons8cargo run --locked -- --button rounded9cargo run --locked -- --button spinner10cargo run --locked -- --button group

Usage

Button 是 render-once 元素（IntoElement），在 render() 里内联构建即可，不需要实体。一个 on_click 同时覆盖鼠标与键盘。

Example.rs

1use justdo_command::button::{Button, ButtonVariant, ButtonSize, ButtonIcon, IconPos};23// Button is a render-once element — build it inline inside your view's4// render(), it is not an entity and needs no cx.new.5div().child(6    Button::new("save")7        .label("Save")8        .icon(ButtonIcon::Plus, IconPos::Start)9        .variant(ButtonVariant::Default)10        .on_click(|_, _, cx| { /* activate */ }),11)

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

Composition

组合结构对齐 shadcn/ui 的 Button —— variant / size / icon slot / pill / button group / spinner。

Structure

1Button                    element — gpui_base::Button owns focus/keys/disabled2├── label                 .label(..) — sm/xs medium, nowrap3├── icon                  .icon(icon, pos) — inline-start | inline-end4│     ArrowUp | ArrowUpRight | GitBranch | Plus | Spinner (animating arc)5├── variant               Default | Secondary | Destructive | Outline | Ghost | Link6├── size                  Xs | Sm | Default | Lg | IconXs | IconSm | Icon | IconLg7├── pill                  .pill(true) — rounded-full8├── join                  .join(Start|Middle|End) — ButtonGroup corners9├── disabled              .disabled(true) — inert, dimmed10└── on_click              pointer + Enter + Space activation

Example.rs

1// on_click fires for pointer AND Enter/Space — the base2// primitive synthesizes a keyboard ClickEvent, so one handler3// covers both input paths.4Button::new("save")5    .label("Save")6    .on_click(|_, _, cx| save(cx));

Notes

Keyboard for free. gpui_base::Button 把 Enter/Space 合成 ClickEvent::Keyboard 派发进同一个 on_click —— 不需要手写 key handler，也不用担心重复触发。

Spinner clock. WASM 上 std::time::Instant 不可用 —— 起始时刻存在 use_keyed_state 里（key 取自 a11y label，因为按钮 id 已被底层原语的 FocusHandle 占用），渲染期用 cx.background_executor().now() 相减；reduced-motion 下静止且不再请求逐帧。

Icon-only. Icon* 尺寸没有可见文本，用 .a11y_label(..) 给无障碍树命名。

Accessibility

Role & focus

底层原语标记 role="button"、管理 Tab 顺序与 focus-visible 描边；disabled 按钮既不可聚焦也不响应指针，父级点击也不会被穿透。

Contrast

六种变体在明暗主题下分别取色；Link 变体带下划线，不只靠颜色表达可点击；icon-only 按钮必须提供 a11y_label。

API Reference

元素暴露的 builder 方法。

API	Signature	Notes
`Button::new(id)`	`-> Button`	Element id — used for focus state.
`.label(..)`	`impl Into<SharedString>`	Visible label; also the default a11y name.
`.a11y_label(..)`	`impl Into<SharedString>`	Required for icon-only buttons.
`.variant(..)`	`ButtonVariant`	Default \| Secondary \| Destructive \| Outline \| Ghost \| Link.
`.size(..)`	`ButtonSize`	Xs \| Sm \| Default \| Lg \| IconXs \| IconSm \| Icon \| IconLg.
`.icon(..)`	`ButtonIcon, IconPos`	ArrowUp \| ArrowUpRight \| GitBranch \| Plus \| Spinner.
`.pill(..)`	`bool`	rounded-full.
`.join(..)`	`ButtonJoin`	Solo \| Start \| Middle \| End — joined group corners.
`.disabled(..)`	`bool`	Inert: no pointer/keyboard activation, dimmed.
`.on_click(..)`	`Fn(&ClickEvent, ..)`	Pointer, Enter, and Space share one handler.

Source & inspiration

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