Open Claude UI 组件演示
基础原子组件
Open Claude UI 组件演示：按钮、分段控制器、状态灯、确认弹窗、附件磁贴、容器查询工具栏（手册 v1 第二篇）。每个演示附规格和源码出处。
View as Markdown最后更新：
基础原子组件是 Claude 桌面端界面里最底层、复用最多的控件：按钮、分段控制器、状态灯、确认弹窗和附件磁贴。它们的高度、圆角和按压反馈都来自同一套令牌，所以放在一起看最容易对上规格。本页 8 个演示对应手册 v1 第二篇，2.0 的变化标在各节里。
关键数值
| 项目 | 数值 | 出处 |
|---|---|---|
| 按钮高度阶梯 | XXS 20 · XS 24 · SM 28 · MD 32 · LG 40px | v1/02 §2.1.1 |
| 按钮变体 | primary / secondary / ghost / danger / brand / onContent / outline | v1/02 §2.1.2 |
| 状态灯直径 | 6px | v1/02 §2.3 |
| 思考波浪周期 | 1.9s | v1/02 §2.3 |
| 弹窗宽度 | sm 400 · md 520 · lg 720px | v1/02 §2.4 |
| 附件磁贴 | 7.5rem 正方形 | v1/02 §2.5 |
按钮变体
按钮有 7 个变体，区别只在填充和描边，尺寸与按压回弹共用一套规则。
按钮尺寸与加载态
5 档高度从 20px 到 40px；加载时按钮保留原宽度，只把文字换成转圈，避免布局跳动。
组合按钮
把几个按钮拼成一组时，相邻一侧去掉圆角，中间共用一条 1px 分隔线。
分段控制器
分段控制器用一个滑动的选中块表示当前项，多个实例互不干扰。
状态灯与骨架屏
状态灯、呼吸灯、思考三点和骨架屏扫光是界面里所有“进行中”状态的视觉语言。
ready
running
error
clay
breathe
pulse
Thinking...
确认弹窗
确认弹窗按 3 档宽度取值，危险操作的确认按钮用 danger 变体。
附件磁贴与胶囊
附件以正方形磁贴展示，长文件名从中间截断，保留扩展名。
PDF
quarterly….pdf
2.4 MB
TSX
App.tsx
12 KB
MD
notes.md
3 KB
ZIP
design-as….zip
62%
PDFquarterly-finan….pdf2.4 MB
TSXApp.tsx12 KB
容器查询工具栏
工具栏按自身容器宽度（@container）收缩，而不是按窗口宽度。
怎么在项目里使用？
复制 code-examples/ 里对应的文件，并引入 cds-theme.css。例如：
import { CdsButton } from './CdsButton';
<CdsButton variant="primary" size="md">发送</CdsButton>