Design System
Button
Primary interactive element for triggering actions. Supports five intents, two priorities, three surface contexts, three sizes, icons, loading, and disabled states.
Playground
Intent
Five color intents to convey different semantic meanings.
Priority
Primary for main actions, secondary for supporting actions.
Surface
Default, dark (for dark surface backgrounds), and bold (neutral only, for use on bold-colored backgrounds).
Size
Three sizes: small, medium (default), and large. Large supports a description line.
Icons
Optional left and/or right icons. Pass any SVGR icon component.
Loading
Loading state shows a spinner and optional loading label. Button is non-interactive while loading.
Disabled
Disabled buttons have reduced opacity and non-interactive cursor.
When to Use
Best for
- Triggering primary and secondary actions (submit, confirm, cancel)
- Navigation to a new step in a flow or wizard
- Destructive actions with critical intent for clear visual warning
Consider alternatives when
- Navigating to a new page — use a link instead
- Toggling between states — use a toggle or switch component
- Showing status only — use a badge instead
Props
| Prop | Type | Required | Description |
|---|---|---|---|
label | string | Yes | Button text |
intent | "brand" | "neutral" | "info" | "warning" | "critical" | No | Color intent (default: "brand") |
priority | "primary" | "secondary" | No | Visual priority (default: "primary") |
surface | "default" | "dark" | "bold" | No | Surface context. "bold" is neutral-only (default: "default") |
size | "small" | "medium" | "large" | No | Size (default: "medium") |
description | string | No | Secondary text line (large size only) |
leftIcon | FC<SVGProps> | No | SVGR icon component for left slot |
rightIcon | FC<SVGProps> | No | SVGR icon component for right slot |
isLoading | boolean | No | Shows spinner and disables interaction |
loadingLabel | string | No | Override label text while loading |
isDisabled | boolean | No | Disables the button |
onClick | () => void | No | Click handler |
className | string | No | Additional CSS class names |
Import
import { Button } from '@/components/suite/desktop/Button';Design Tokens
| Purpose | Token |
|---|---|
| Background (brand primary) | var(--color-fill-element-brand-bold) |
| Background (brand secondary) | var(--color-fill-element-brand-soft) |
| Background (neutral primary) | var(--color-fill-element-contrast) |
| Background (neutral secondary) | var(--color-fill-element-neutral-soft) |
| Background (disabled primary) | var(--color-fill-element-bold-disabled) |
| Background (disabled secondary) | var(--color-fill-element-soft-disabled) |
| Text (disabled) | var(--color-content-disabled) |
| Focus ring | var(--color-border-element-focus-ring) |
| Backdrop blur | var(--blur-element-button) |
| Border radius (medium) | var(--primitive-radius-10) |