Button and action components
Components people press: buttons in every variant and size, joined button groups, toggles and toggle groups.
The button runs its own loading, success and error flow from the promise you return, skips the spinner for fast requests and keeps focus while it works.
- ButtonButtons in every variant and size, with a built-in loading, success and error flow that skips the spinner for fast requests.
- Button groupButtons joined into one control, with shared seams, separators, text addons, nesting and vertical stacks.
- ToggleA button that stays on or off, with a fill that settles in when pressed, a clear hover-to-on step and icons that can fill with the state.
- Toggle groupA row of toggles for one choice or many, with a fill that slides to the picked item, joined or spaced items and arrow-key focus.
Built into Pro blocks
Blocks for AI products that are built from these components.
- Agent TodosThe plan an agent keeps while it works, one line per step. Handles steps in progress, failed steps and plan changes mid-run.
- ArtifactThe panel beside an AI chat that shows what the model made. Handles content still streaming, a sandboxed preview and versions you can restore.
- Chat SidebarThe sidebar of a chat app, with pinned chats, projects and recents. Handles rename in place, delete with undo and chats still replying.
- Chat ThreadThe conversation view of an AI chat. Handles replies that stream, edit and retry, and versions of a reply you can switch between.
- Code BlockCode blocks for AI answers. Highlighting keeps up with streaming, diffs can be accepted or rejected, and commands run in a terminal.
- Diff ReviewA review of an agent’s file edits before they land. Handles accept or reject per change, comments back to the agent and edits still streaming.