button
the house ink marks the primary action. destructive prints in key with the trash glyph and its word, so red stays a status colour.
bunx --bun shadcn@latest add @mk/buttonvariants
six variants on one height and one 1 px edge. the names and props are shadcn's, from base-nova, so markup written for shadcn's button works unchanged.
defaultsecondaryoutlineghostdestructivelink
defaultsecondaryoutlineghostdestructivelink
states
in light, hover and press overprint key on the ink. in dark they lift the ink, so plum stays plum when pressed. focus is the 2 px house ring, 2 px outside the button.
a disabled button keeps a flat fill and a plain label, and its edge prints at half.
+ key 20+ key 36, inset2 px ring, 2 px outkey 5key 88
default, disabledsecondary, disabledoutline, disabled
lift 0.04lift 0.08, chroma 95, inset2 px ring, 2 px outpaper 1paper 60
default, disabledsecondary, disabledoutline, disabled
screened back: there, but not available now
sizes
four heights for a word, four squares for a glyph alone. a button with only a glyph needs an aria-label.
xs · 24sm · 32default · 40lg · 48
icon-xsicon-smiconicon-lg
xs · 24sm · 32default · 40lg · 48
icon-xsicon-smiconicon-lg