Native UI Book · 02 Buttons

按钮与分段控件 (Buttons & Segmented Controls)

内置多种视觉变体、尺寸档位、快捷键提示与加载状态的原生 GPU 按钮组件。

交互式外观预览

Button Variants — GPUI-Kit

Primary Button Secondary Danger Ghost Action

按钮变体与分段路由栏 (`ButtonVariants` & `Sizable`)

通过 gpux::kit::button::{Button, ButtonVariants} 与 Sizable Trait，你可以组合出主操作按钮、幽灵切换按钮、危险确认按钮以及驱动 Router<Route> 的分段导航栏：

rust

use gpux::prelude::*;
use gpux::kit::button::{Button, ButtonVariants};
use gpux::kit::{h_flex, Sizable, StyledExt};

pub fn render_action_bar(&mut self, cx: &mut Context<Self>) -> impl IntoElement {
    h_flex()
        .gap_2()
        .items_center()
        .child(
            Button::new("btn-inspect")
                .primary()
                .label("Inspect Cluster (1.2µs)")
                .on_click(cx.listener(|this, _ev, _win, cx| {
                    this.sample_cluster();
                    cx.notify();
                })),
        )
        .child(
            Button::new("btn-export")
                .ghost()
                .small()
                .label("Export Snapshot"),
        )
        .child(
            Button::new("btn-drain")
                .danger()
                .small()
                .label("Drain Node")
                .on_click(cx.listener(|this, _ev, _win, cx| {
                    this.store.update(|s| s.healthy_nodes = s.healthy_nodes.saturating_sub(1));
                    cx.notify();
                })),
        )
}