Badge

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

Overview

Default / Secondary / Destructive / Outline / Ghost / Link 六种变体，一行排开。

GPUI · Live previewGPUI WASM

Installation

Badge 是单个 Rust 文件（src/badge.rs），只依赖 gpui-kit —— 图标与 spinner 全部用 PathBuilder 手绘，无资源文件。

Cargo.toml

1[dependencies]2gpui-kit = "0.6.6"34# badge.rs is self-contained — icons and the spinner5# are painted with PathBuilder, no extra deps.

Download runnable example

Terminal

1# Download the runnable example crate, then:2cargo run --locked -- --badge34# Other demos:5cargo run --locked -- --badge variants6cargo run --locked -- --badge icons7cargo run --locked -- --badge spinner8cargo run --locked -- --badge link9cargo run --locked -- --badge custom

Usage

Badge 是实体（cx.new），builder 配置文案、变体、内联图标与可点击性；host view 持有 entity 并渲染为 child。

Example.rs

1use justdo_command::badge::{Badge, BadgeVariant, BadgeIcon, BadgeIconPos};23// Badge is a tiny entity — keep it on your view, render it4// as a child, subscribe for BadgePressEvent when clickable.5let badge = cx.new(|_| {6    Badge::new()7        .label("Verified")8        .variant(BadgeVariant::Secondary)9        .icon(BadgeIcon::Check, BadgeIconPos::Start)10});11div().child(badge)

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

Composition

组合结构对齐 shadcn/ui 的 Badge —— variant / icon slot / inline-start|end / spinner / link。

Structure

1Badge                     entity — renders the pill, emits BadgePressEvent2├── label                 .label(..) — text-xs medium3├── icon                  .icon(icon, pos) — inline-start | inline-end4│     Check | Bookmark | ArrowUpRight | Spinner (animating arc)5├── variant               Default | Secondary | Destructive | Outline | Ghost | Link6├── tone                  .tone(..) — custom tinted surface + ink7└── clickable             .clickable(true) — focus, click -> BadgePressEvent

Example.rs

1// Clickable badges are real entities: focusable via Tab,2// press via click — the host view subscribes for the event.3cx.subscribe(&badge, |demo, _, event: &BadgePressEvent, cx| {4    demo.open(event.label.clone());5    cx.notify();6});

Notes

Spinner clock. WASM 上 std::time::Instant 不可用 —— badge.rs 用 cx.background_executor().now() 做旋转时钟，跨平台安全。只在存在 Spinner 图标时逐帧请求重绘（request_animation_frame），reduced-motion 下静止。

Entity vs element. Badge 做成 entity 而非 render-once 元素：link 变体需要持久 FocusHandle（use_keyed_state）与点击事件 —— 纯展示徽章不付额外成本，只有 .clickable(true) 才启用交互。

Accessibility

Contrast

每个 variant 与 tone 的 ink/surface 配对在明暗主题下分别取色，保证文字对比度；Link 变体带下划线，不只靠颜色表达可点击。

Focus

clickable badge 可通过 Tab 聚焦，focus-visible 描边反馈；纯展示徽章不参与焦点顺序，避免干扰键盘导航。

API Reference

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

API	Signature	Notes
`Badge::new()`	`-> Badge`	Default variant, no icon, label "Badge".
`.label(..)`	`impl Into<SharedString>`	xs / medium label text.
`.variant(..)`	`BadgeVariant`	Default \| Secondary \| Destructive \| Outline \| Ghost \| Link.
`.icon(..)`	`BadgeIcon, BadgeIconPos`	Check \| Bookmark \| ArrowUpRight \| Spinner; Start \| End.
`.tone(..)`	`BadgeTone`	Blue \| Green \| Sky \| Purple \| Red tinted colors.
`.clickable(..)`	`bool`	Focusable + emits BadgePressEvent on press.
`BadgePressEvent`	`{ label }`	Emitted by clickable badges; subscribe via cx.subscribe.

Source & inspiration

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