# 基础原子组件 (/docs/components/atoms)

基础原子组件是 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 个变体，区别只在填充和描边，尺寸与按压回弹共用一套规则。

<D.ButtonVariants />

## 按钮尺寸与加载态 [#按钮尺寸与加载态]

5 档高度从 20px 到 40px；加载时按钮保留原宽度，只把文字换成转圈，避免布局跳动。

<D.ButtonSizes />

## 组合按钮 [#组合按钮]

把几个按钮拼成一组时，相邻一侧去掉圆角，中间共用一条 1px 分隔线。

<D.JoinedButtons />

## 分段控制器 [#分段控制器]

分段控制器用一个滑动的选中块表示当前项，多个实例互不干扰。

<D.Segmented />

## 状态灯与骨架屏 [#状态灯与骨架屏]

状态灯、呼吸灯、思考三点和骨架屏扫光是界面里所有“进行中”状态的视觉语言。

<D.StatusSet />

## 确认弹窗 [#确认弹窗]

确认弹窗按 3 档宽度取值，危险操作的确认按钮用 danger 变体。

<D.Dialogs />

## 附件磁贴与胶囊 [#附件磁贴与胶囊]

附件以正方形磁贴展示，长文件名从中间截断，保留扩展名。

<D.Attachments />

## 容器查询工具栏 [#容器查询工具栏]

工具栏按自身容器宽度（@container）收缩，而不是按窗口宽度。

<D.ResponsiveBar />

## 怎么在项目里使用？ [#怎么在项目里使用]

复制 [code-examples/](https://github.com/Caho1/open-claude-ui/blob/main/code-examples) 里对应的文件，并引入 `cds-theme.css`。例如：

```tsx
import { CdsButton } from './CdsButton';

<CdsButton variant="primary" size="md">发送</CdsButton>
```

## 相关页面 [#相关页面]

- [会话与输入](/docs/components/conversation)
- [2.0 新增](/docs/components/v2)
- [v1 第二篇](/docs/v1/02)
- [全部 Open Claude UI 组件演示](/docs/components)