Primary buttons are solid-filled for the highest-emphasis actions. Secondary buttons have a border and fill on hover. Tertiary buttons are transparent and blend into the surface for lower-priority options. Destructive buttons signal dangerous or irreversible actions like delete and remove. All variants come in default and compact sizes.
Primary
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Secondary
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Tertiary
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Destructive
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Primary, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Secondary, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Tertiary, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Destructive, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Loading
Set loadingwhile an async action runs. The spinner takes the left icon slot in the variant's own colour, the label stays put, and clicks are blocked, without the dimmed look of disabled.