feat: v2 button system (ButtonV2, CardAction) + /dev/buttons review surface

[tsahimatsliah]

Summary

Introduces a refreshed button system designed to address the user feedback that current buttons "feel disabled". Built ground-up from research into Apple HIG, Material 3, Linear, Notion, Vercel, GitHub Primer, ChatGPT, Claude, Cursor, and Tailwind UI.

The v2 system ships alongside v1 — no production call sites are migrated in this PR. v1 Button / QuaternaryButton are JSDoc-deprecated to nudge new code. Migration of real surfaces (post detail, feed cards, comment rows, profile actions, …) will follow as per-surface PRs once this foundation lands.

Key changes

ButtonV2 (new)

• Tightened icon-to-button ratio (~50%) — was 67–83% on v1.
• Equal horizontal padding + flex gap-X per size — drops v1's hardcoded negative-margin trick that made Medium/Large/XLarge visibly asymmetric.
• Variant-driven font weight (Primary font-semibold, others font-medium) — hierarchy carried by fill/border, not weight uniformity.
• Per-variant focus ring tinted to brand color so it never clashes with the button fill.
• New inactive (Primer "looks active, behaves disabled") prop — aria-disabled + not-allowed cursor while staying focusable + clickable so callers can show a tooltip/toast explaining why.
• Refined hover/pressed/disabled contrast in both light and dark themes (sequential 60 → 70 → 80 ladder light / 40 → 30 → 20 dark, vs v1's two-shade dark jump).

CardAction / CardActionBar (new)

• Purpose-built primitive for engagement bars (post detail, feed cards, comment rows).
• Built-in counter slot inside the click target (Reddit / X pattern — one affordance, one tap).
• density prop (comfortable 40px / compact 32px) sized to fit the production card width contract (272 px MIN feed card → 340 px MAX desktop card).
• :has()-driven responsive label collapse: when usePostActionsLabelVisibility hides the content wrapper, the button collapses to a true icon-only square (no rectangular ghost padding).
• Engagement-bar icon ratio bumped to 60–62% per density (matches Reddit, X, Instagram, Material 3 small) — defaults read at a glance from a feed scroll.
• Engagement-bar tightening for count-only buttons (!gap-1 !px-1.5) so a 5-action row fits inside the 272 px card MIN with the math documented inline.

buttons-v2.css + tailwind/buttons-v2.ts (new)

• Token system with theme-aware hover/press shadows (light tints with pepper.90 at 8%/6%; dark uses black at 30%/20%).
• Inset press-feedback shadow on :active (replaces v1's box-shadow: none that made active read as weaker than hover).
• Polish layer: font-smoothing: antialiased (the single biggest fix for "fat label" on Apple), tabular-nums, touch-action: manipulation, appearance: none, background-clip: padding-box, isolation: isolate.
• forced-colors: active block for Windows High Contrast Mode (WCAG 1.4.1).
• prefers-reduced-motion: reduce block.
• Scoped under .btn-v2 — does not touch v1's .btn cascade.

/dev/buttons (new, internal-only)

• Side-by-side OLD Button vs NEW ButtonV2 across every variant × color × size × state.
• Sticky controls bar to flip theme, background, and state simultaneously across the page.
• Real-card simulation at 272 px / 320 px / 480 px / fluid widths so we can verify CardAction never overflows the production card width contract.
• PostActionsV2 vignette mirrors the production post detail action bar 1:1 with the same ResizeObserver-driven label collapse — provable visual parity before any migration.
• Reference snapshots from Linear, Notion, Vercel, Cursor, ChatGPT, Claude for direct comparison.
• Production-gated (isDevelopment runtime check + <NextSeo nofollow noindex />).
• _app.tsx carves out /dev/* from the full provider tree (BootDataProvider, Serwist, auth) so /dev/buttons runs on a minimal QueryClient-only tree.

Buttons.mdx (new, Storybook docs)

• Migration guide explaining every v1→v2 difference, per-variant changes, the card width contract, and the CardAction density rules.

no-raw-button-class ESLint rule (new, not enabled)

• Flags raw btn-* / btn-v2-* class strings to prevent regressions back to hand-stamped variant classes.
• Defined but intentionally not opted into any project ESLint config — packages opt in once their own call sites are migrated.

What does NOT change

• No production app code consumes v2 yet — every existing Button / QuaternaryButton call site renders unchanged.
• v1 Button.tsx / QuaternaryButton.tsx are unchanged in behaviour — only @deprecated JSDoc was added.
• v1 buttons.css / tailwind/buttons.ts are untouched. v2 styles load alongside v1 with no override.
• All 16 existing buttons unit tests still pass.

Test plan

• pnpm storybook — smoke test ButtonV2 and CardAction stories in both light/dark themes
• /dev/buttons on localhost — flip theme/state/size/color combinations, confirm OLD/NEW parity expectations match documented intent
• /dev/buttons mock cards — confirm CardAction never overflows at 272 px / 320 px / 480 px widths
• /dev/buttons post-detail vignette — resize the viewport, confirm labels collapse to true icon-only squares (no rectangular ghosts)
• Manual spot-check on prod surfaces (feed, post page, profile, settings) — no regressions on existing v1 buttons
• pnpm --filter @dailydotdev/shared test — buttons specs green
• pnpm typecheck:strict:changed — green

Known follow-ups (for separate PRs)

These were caught during self-review and intentionally deferred so this PR stays scoped to "introduce v2":

1. Tighten the no-raw-button-class regex. The current pattern would flag the implementation files themselves (btn-v2, btn-label, btn-loader, btn-icon-left) when enabled. Either narrow it to variant tokens only, or add an allowlist for utility classes. Add a self-test that lints ButtonV2.tsx and expects zero reports.
2. Production-gate /dev/buttons at the routing level. The page is noindex + runtime-gated, but the JS bundle still ships. Add getStaticProps returning { notFound: true } in production and a Disallow: /dev line in public/robots.txt.
3. Unit tests for ButtonV2, CardAction. At least cover pressed, inactive, loading, density, and the :has() collapse branch.
4. MedalBadgeIcon convention bug. Every other icon uses IconPrimary={Outlined}, IconSecondary={Filled}; only MedalBadgeIcon is reversed. Surfaces ~20 call sites that need the secondary prop stripped or flipped. Should land before any real surface migrates to v2 so the toggle pattern doesn't need re-fixing per surface.

Migration plan (TL;DR for after this lands)

Per-surface PRs in this order, each independently reviewable:

1. MedalBadgeIcon flip (clean-up)
2. PostActions.tsx — post detail action bar (dev page already mirrors it 1:1 → visual parity provable)
3. Feed card engagement bar (ActionButtons.tsx and friends)
4. Comment row actions
5. Profile actions, squad analytics tiles
6. Enable no-raw-button-class per package as it's fully migrated
7. Delete v1 Button / QuaternaryButton

Made with Cursor

Preview domain

https://feat-button-system-overhaul.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	May 3, 2026 9:56am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		May 3, 2026 9:56am

[rebelchris]

The raw button change is ok, jsu feels overkill with all the tests/mock stuff :)