Variants
Carbon buttons: 48px tall, square, label on the left and an optional icon on the right. Use one primary button per view.
<button class="sd-btn sd-btn--primary">Primary</button> <button class="sd-btn sd-btn--secondary">Secondary</button> <button class="sd-btn sd-btn--tertiary">Tertiary</button> <button class="sd-btn sd-btn--ghost">Ghost</button> <button class="sd-btn sd-btn--ai">Ask AI</button>
| Variant | Class | When |
|---|---|---|
| Primary | sd-btn--primary | The main action of the view |
| Secondary | sd-btn--secondary | Alternative actions next to a primary |
| Tertiary | sd-btn--tertiary | Lower emphasis, often alone |
| Ghost | sd-btn--ghost | Toolbars and inline actions |
| AI | sd-btn--ai | Only actions that run AI |
Sizes
<button class="sd-btn sd-btn--primary">Default · 48px</button> <button class="sd-btn sd-btn--primary sd-btn--sm">Small · 32px</button>
Usage
Do
Pair a primary with a secondary, joined edge to edge.
Don’t
Don’t put two primary buttons side by side.
Buttons don’t move on hover: only the background changes.