Button variants
All variant × size × icon combinations
Text buttons (with optional icons)
primary / xs
primary / xs · start
primary / xs · end
primary / xs · both
primary / sm
primary / sm · start
primary / sm · end
primary / sm · both
primary / default
primary / default · start
primary / default · end
primary / default · both
primary / lg
primary / lg · start
primary / lg · end
primary / lg · both
primary-2 / xs
primary-2 / xs · start
primary-2 / xs · end
primary-2 / xs · both
primary-2 / sm
primary-2 / sm · start
primary-2 / sm · end
primary-2 / sm · both
primary-2 / default
primary-2 / default · start
primary-2 / default · end
primary-2 / default · both
primary-2 / lg
primary-2 / lg · start
primary-2 / lg · end
primary-2 / lg · both
outline / xs
outline / xs · start
outline / xs · end
outline / xs · both
outline / sm
outline / sm · start
outline / sm · end
outline / sm · both
outline / default
outline / default · start
outline / default · end
outline / default · both
outline / lg
outline / lg · start
outline / lg · end
outline / lg · both
ghost / xs
ghost / xs · start
ghost / xs · end
ghost / xs · both
ghost / sm
ghost / sm · start
ghost / sm · end
ghost / sm · both
ghost / default
ghost / default · start
ghost / default · end
ghost / default · both
ghost / lg
ghost / lg · start
ghost / lg · end
ghost / lg · both
link / xs
link / xs · start
link / xs · end
link / xs · both
link / sm
link / sm · start
link / sm · end
link / sm · both
link / default
link / default · start
link / default · end
link / default · both
link / lg
link / lg · start
link / lg · end
link / lg · both
Icon-only buttons
primary / icon-xs
primary / icon-sm
primary / icon
primary / icon-lg
primary-2 / icon-xs
primary-2 / icon-sm
primary-2 / icon
primary-2 / icon-lg
outline / icon-xs
outline / icon-sm
outline / icon
outline / icon-lg
ghost / icon-xs
ghost / icon-sm
ghost / icon
ghost / icon-lg
link / icon-xs
link / icon-sm
link / icon
link / icon-lg
Disabled state (each variant)
primary
primary-2
outline
ghost
link