Community Days | Button Test
Reference page for visually comparing every Button variant + size in the app. The Standardsection is what should appear in 99% of the codebase — and as of the cdo-default flip, it's what <Button> renders out of the box even without an explicit size prop. All other sections are either exception cases or legacy patterns to recognize and avoid.
🔗 Pages with top-right buttons — audit checklist
Click through each link to visually verify the button conforms to the cdo standard (now the Button default). Status reflects the current code as audited; ✅ already standard, ⚠️ partial, ❌ non-standard.
- ✅ /app/edit-event — “Event Guidelines”
- ✅ /app/new-event — “Event Guidelines” (PageLayoutButton)
- ✅ /app/alerts — “New Alert” (PageLayoutButton, cdo size)
- ✅ /app/sponsorships — “Browse Opportunities” (PageLayoutButton, cdo size)
- ✅ /app/sponsor-review — “New Application” (PageLayoutButton via DropdownMenuTrigger asChild)
- ✅ /calls — “Subscribe to All Calls” (PageLayoutButton, cdo size)
- ✅ /app/badges — 2× PageLayoutButton (cdo size)
- ✅ /app/indexing-management — 2× PageLayoutButton (cdo size)
- ✅ /app/speakerboard-management — “Refresh” (PageLayoutButton, cdo size)
- ◯ /app/dashboard — toolbar (no top-right button, but tab nav + dropdown)
- ✅ /app/dashboard — event card “Edit”, “Submit”, “Go To Event”
- ✅ /app/dashboard#calls — call card buttons (Edit, Submit, Join, etc.)
- ◯ /events — alert/filter buttons (audit if present)
Modal triggers (not directly linkable)
- • Crop Image modal → triggered by uploading any image in /app/edit-event → Images step
- • Submit Event Confirm (basic-pattern dark) → click Publish on a draft event in /app/dashboard
- • Create/Update Success (basic-pattern dark) → successful save on /app/edit-event or /app/new-event
- • Session Expired / Inactivity Warning → leave /app/edit-event idle for 8 minutes
- • Postpone / Cancel Event → kebab menu on a published event card in /app/dashboard
- • Sponsor Application form → click any sponsorship tier on a public event page
✅ The standard — cdo-* (cdo size is now the Button default)
Every button in the app should use a cdo-* color variant. Bold body-sized text, generous padding, content-driven height that clears the 44px touch standard. As of the defaultVariants flip, size='cdo' is implicit — explicit size='cdo' on existing call sites is harmless but no longer required for new code.
✅ Exception 1 — icon-only buttons
size='icon' is 44×44 square. Pair with variant='ghost' for transparent kebab/menu triggers, or any other variant for solid icon CTAs. Always include aria-label since there's no visible text.
✅ Exception 2 — basic-pattern modal outlines (dark overlay only)
cdo-*-outline-dark variants are designed for the basic-pattern modal (transparent content on a dark overlay). Use ONLY there. The on-dark color tokens (#54C8FF, #2ECC40, #DC73FF, #FF695E, #FF8EDF, #FFE21F) are calibrated for legibility against black.
⚠️ Light-context outlines — exception only
cdo-*-outline (without -dark) exists for narrow cases like delete-confirm modals where you want a less assertive button next to a filled CTA. Don't reach for these by default — use the filled cdo-* variants in normal card modals.
❌ Banned: shadcn default variants
These are the original shadcn variants. They exist on the Button but should NOT be used for new code — they don't map to a CDO color token, so the brand palette can't enforce consistency. Listed here so you can recognize and replace them in audits. (Note: with cdo-default applied, these variants now render at cdo SIZE — the typography matches — but the colors still bypass the CDO palette and that's the real problem.)
⚠️ Legacy sizes — opt-in escape hatches only
default / sm / lg use text-sm font-medium and don't match the CDO design rhythm. They used to be the silent default; after the cdo-default flip they're explicit opt-in escape hatches for the rare dense layout where cdo genuinely doesn't fit. Don't reach for them by default — and if you do, leave a comment explaining why.
🔗 Anchor button (asChild)
When a 'button' needs to navigate, preserve anchor semantics with asChild. Right-click / cmd-click / middle-click navigation works for free, plus screen-reader role announcements.
📐 Touch-target compliance check (44×44 minimum)
Hover/click each button — all should feel comfortable to tap on mobile. The CDO size auto-clears 44px from text-base + py-[0.785em] padding. Icon-size is exactly 44×44.
🎯 Disabled state
The Button base auto-applies disabled:pointer-events-none disabled:opacity-50 across every variant. Disabled state is consistent without per-variant overrides.