EmeraldButton

DealDash's flagship button — Linear-style 36px control, tokenized elevation, brand glow on hover, 1px press sink. Six variants, six sizes.

stable input #button#dealdash#emerald#cta#tokens

Loading preview…

Usage

- The only way to build buttons in an Emerald app — pages never compose raw button styles. - Keep one control-row height per row: default(36) with default inputs, never mixed. - Links that look like buttons render an anchor with the same classes (asChild pattern) — never nest a button inside an anchor. - The trio of --shadow-btn-* tokens re-themes every button at once; restyle there, not per-button.

Do / Don't

- **Do** use `default` for the single primary action per view; everything else steps down (outline/ghost). - **Do** pair destructive actions with a confirm dialog — the red variant is not the confirmation. - **Don't** scale on hover — brightness and tint only; motion never exceeds 120ms here. - **Don't** hardcode #1a7a5e or a bezier in a page; if a value isn't a token, add the token first.

Tokens

A11y

Real button/anchor elements, never divs. Focus-visible ring — 3px at 50% of --ring

Source

src/components/EmeraldButton.tsx

Live playground