Claude UI Atoms: Buttons, Toggles & Dialogs
Claude-style React UI atoms: 7 button variants, 5 sizes, segmented control, status lights, dialogs, attachment tiles, container-query toolbar. 8 live demos.
Atomic components are the lowest-level, most reused controls in the Claude desktop interface: buttons, segmented controls, status lights, confirmation dialogs and attachment tiles. Their heights, radii and press feedback all come from one set of tokens, so viewing them together is the easiest way to check them against the spec. The 8 demos on this page correspond to Chapter 2 of the v1 handbook, and 2.0 changes are noted in each section. This page is a translation of the Chinese demo page.
Key values
| Item | Value | Source |
|---|---|---|
| Button height steps | XXS 20 · XS 24 · SM 28 · MD 32 · LG 40px | v1/02 §2.1.1 |
| Button variants | primary / secondary / ghost / danger / brand / onContent / outline | v1/02 §2.1.2 |
| Status light diameter | 6px | v1/02 §2.3 |
| Thinking wave cycle | 1.9s | v1/02 §2.3 |
| Dialog widths | sm 400 · md 520 · lg 720px | v1/02 §2.4 |
| Attachment tile | 7.5rem square | v1/02 §2.5 |
Button variants
Buttons come in 7 variants that differ only in fill and border; sizes and the press rebound share one set of rules.
Button sizes and loading state
5 heights from 20px to 40px. While loading, the button keeps its width and only swaps the label for a spinner, so the layout doesn't jump.
Joined buttons
When several buttons are joined into a group, the radius is removed on the adjacent sides and they share a 1px divider in between.
Segmented control
The segmented control shows the current item with a sliding selection block, and multiple instances don't interfere with each other.
Status lights and skeletons
Status lights, breathing lights, the three thinking dots and the skeleton sweep are the visual language for every "in progress" state in the interface.
Confirmation dialogs
Confirmation dialogs use one of 3 widths, and the confirm button for destructive actions uses the danger variant.
Attachment tiles and pills
Attachments are shown as square tiles; long file names are truncated in the middle so the extension stays visible.
2.4 MB
12 KB
3 KB
62%
Container-query toolbar
The toolbar shrinks based on its own container width (@container), not the window width.
How do I use these components in a project?
Copy the matching file from code-examples/ and import cds-theme.css. For example:
import { CdsButton } from './CdsButton';
<CdsButton variant="primary" size="md">发送</CdsButton>Note: the labels inside the demo components are still in Chinese (they come straight from the repository's components); the behavior and specs are the same.
Sources
The specs on this page come from Chapter 2 of the v1 handbook, the component code comes from the repository's code-examples/, and browser behavior follows the MDN documentation.
- open-claude-ui · code-examples/:
CdsButton.tsx,SegmentedControl.tsx,StatusIndicators.tsx,ConfirmationDialog.tsx,AttachmentCard.tsx,ContainerResponsiveBar.tsx. - cds-theme.css: button height, radius and color tokens.
- MDN: Container queries: the
@containerused by the container-query toolbar. - MDN: The
<dialog>element: native semantics for modal confirmation dialogs. - React docs: API reference
Related pages
AI Chat Interface Components
38 interactive AI chat interface components in React: message bubbles, composer, thinking collapse, model switcher, artifact sandbox. MIT licensed source.
Conversation & Input
Claude-style React chat UI components: message bubbles, thinking collapse, composer, / and @ commands, model switcher, MCP tool card. 6 live demos.