The Button primitive applies `whitespace-nowrap` + a fixed `h-{size}`
because it's tuned for single-line CTAs. Consumers using Button as a
card-shaped picker — title above description, icon next to multi-line
label — hit collapsed/clipped content because of those constraints.
CardButton is the right primitive for that use case:
- block layout, full-width, left-aligned by default
- whitespace: normal so multi-line content wraps
- height: auto so any number of stacked rows works
- focus-visible ring tied to --bl-focus-ring/--bl-accent (matches Button)
- disabled opacity + pointer-events
- selected? prop with subtle inset accent ring (override-able)
- asChild support via Radix Slot for <Link>/<a> handoff
Bumps @bytelyst/ui to 0.1.6 and re-exports CardButton + CardButtonProps
from the package entry point.
Initial consumers: 5 sites in learning_ai_invt_trdg (StrategyWizard
risk + hours pickers, SimpleView buy + sell plan cards, MyStrategiesTab
diagnostic toggle). See docs/ui/UI_AUDIT.md Pattern A in that repo.
Generated with [Devin](https://cli.devin.ai/docs)
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
953730ff51