Button
A button or a link styled as one, with sizes, variants, icons and a loading state that keeps its width.
Installation
npx yolkui add buttonVariants
Eleven variants in four sizes, 28 · 32 · 36 · 40, and an icon-only button at each size. Icon-only buttons need an aria-label.
default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link
Pill
shape="pill" rounds both ends; an icon-only pill is a circle.
default
secondary
outline
soft
ghost
destructive
accent
accent-soft
brand
brand-soft
link
Icons
Icons stay 16px at every size (14 at xs). The side holding an icon gets less padding, worked out from the markup, so there is no prop to set.
xs · 28
sm · 32
default · 36
lg · 40
States
Loading keeps the width and the name, and is announced once. Disabled stays focusable so a tooltip can say why. aria-invalid draws the error ring. A link styled as a button is ButtonLink.