Buttons allow users to perform an action or make a decision.

Buttons provide a clear visual hierarchy between actions while maintaining consistency across variant, size, typography, spacing, iconography, radius, and interaction states.

Overview

The Button system is structured around three independent properties:

Property	Defines
Variant	The visual emphasis and importance of an action
Size	The physical size and density of the control
State	The current interaction condition

This separation keeps the component predictable and prevents unnecessary component variations.

Button
├── Variant
├── Size
└── State

1. Anatomy

A Button can contain the following elements:

Label — communicates the action.
Leading icon — supports the meaning of the action.
Trailing icon — provides additional context or indicates a next step.
Container — defines the Button's size, shape, background, and border.
Focus indicator — communicates keyboard focus.

Standard Button

┌─────────────────────────────┐
│  [Icon]   Button   [Icon]  │
└─────────────────────────────┘
   ↑          ↑         ↑
 Leading    Label    Trailing
  icon                 icon

Icon-only Button

┌──────────────┐
│     Icon     │
└──────────────┘