"Ten shapes, one shadow recipe. Everything else is bg/text overrides."
Every variant below is a real <Button> from echo-ui, not a mockup. Font/bg/text are override-able per-use via props independent of variant, see spec footer for the exact usage.
01 / SOLID
Primary
Essential
Spec40px / 16px / 0px
variant="primary"
02 / SOLID
Secondary
Standard
Speclime bg / ink text
variant="secondary"
03 / MINIMAL
Ghost
Low emphasis
Specbare outline, no shadow
variant="ghost"
Colour picker controls border+text here. Ghost has no fill to separately colour.
04 / DESTRUCTIVE
Danger
Alert
Specprimary + bg override
variant="primary" bg="#ba1a1a"
05 / AFFIRMATIVE
Success
Validation
Specprimary + bg override
variant="primary" bg="#2e7d32"
06 / DARK MODE
Neu
On dark
Specwalnut/chalk, Cascadia
variant="neu"
07 / MONO
Neu Mono
plsfundme
Specink/mellow, Ubuntu Mono
variant="neu-mono"
08 / MONO
Outline Mono
plsfundme
Spectransparent, Ubuntu Mono
variant="outline-mono"
Colour picker controls border+text here. Outline Mono has no fill to separately colour.
09 / FLAT
Accent
echov2
SpecIBM, minimal shadow
variant="accent"
10 / CURVED
Pill
tallish / yolo
Specrounded-full, strong neu
variant="pill"
Needs a background matching this button's colour almost exactly. That's what makes the shadow read as embossed, not bordered.
11 / SOFT
Soft
respri
Specgrey neu, Ubuntu Mono
variant="soft"
Same rule as Pill. Needs a near-matching background to look seamless rather than pasted on.
12 / RETRO
Retro
samSepiol
SpecWin95 bevel, Cascadia
variant="retro"
Locked to the exact Win95 bevel look. Background checker only, no colour override on this one.
