The largest page in the kit. Two published components, 264 variants across three axes, plus two hidden icon layers that would have made it four times bigger.
Two components, 264 variants
Button - Variant × State × Size: Default · Secondary · Outline · Ghost · Destructive · Link × Default · Hover · Focus · Pressed · Disabled · Loading × xs · sm · default · lg
Icon Button - Variant × State × Size: the same, less Link × the same six states × icon-xs · icon-sm · icon · icon-lg
Using the Button
Why is Loading a state but the icons are not?
Because the spinner changes the width. Loading widens the default button from 64 to 86, and anything that moves the geometry has to be a real variant or every copy needs resizing by hand. leftIcon and rightIcon sit at the ends of the row and move nothing, so they ship as hidden layers - as axes they would have taken 264 variants to 1,056.
Why does Icon Button have no Link?
Because an icon-only link is a ghost icon button. Link is a text treatment - it underlines on hover and carries no fill - and there is no text to underline. Dropping it is what makes Icon Button 120 rather than 144.
Why do Pressed and Disabled not change colour?
They change opacity instead: 60% pressed, 50% disabled, and nothing else moves. One rule covers all six variants, so a disabled destructive button still reads as destructive rather than turning into a generic grey - and there are no twelve extra colours to keep in step with the rest.
What is the difference between default and lg?
Four pixels of height, and nothing else. Both sit at spacing.2-5 padding, radius.lg, a 14px label and 16px icons. Only xs has its own padding. It is worth knowing before you reach for lg expecting more room inside it.