Components
Buttons and icon actions
Use shared actions for deliberate changes and supporting tools.
On this page
Purpose and composition
Use shared actions for deliberate changes and supporting tools.
Compose form footers with Cancel plus a specific primary action; use danger for consequential removal.
Anatomy
| Part | Responsibility |
|---|---|
| Label | Action verb or named icon-only action |
| Icon | Optional decorative symbol |
| Boundary | Minimum height, padding and focus treatment |
Configuration and variants
| Input / variant | Contract |
|---|---|
| variant | primary / secondary / ghost / danger; secondary default |
| size | md 44px or sm 36px minimum |
| native props | disabled, type, onClick and other button attributes forwarded |
| IconButton | Required icon and label; active optional; 44px or 36px square |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Default | Variant-specific surface and label |
| Hover | Theme-aware surface/color change |
| Focus | Violet focus-visible ring |
| Disabled | 50% opacity and disabled cursor |
| Active icon | Violet selection treatment; parent owns semantics |
Interaction and responsive behavior
- Keep primary actions scarce within a task.
- Buttons shrink-0 and may wrap as a group.
- Explicitly provide type="button" inside forms when submission is not intended.
Accessibility contract
- Icon-only controls require label; decorative symbol is hidden.
- Disabled uses native button semantics.
- An active IconButton does not itself expose aria-pressed; supply it for toggles.
Known implementation limits
Some source tool buttons such as Bold, Italic and Insert link have no handlers. Their presence is not evidence of editing behavior.
Composition example
<Button variant="primary" icon="send" disabled={!ready} onClick={send}>Send reply</Button>Source references
| File | Responsibility |
|---|---|
| components/ui/primitives.tsx | Button and IconButton |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0