Breakout
Wrapping a link or button around a large chunk of content would be poor for accessibility and often leads to invalid HTML.
Instead, Breakout* components allows a link or button to stretch to the nearest position: relative ancestor, whilst ensuring only the relevant content is targeted
For semantics, both BreakoutButton and BreakoutLink components are provided, however they’re essentially identical.
You can use the asChild prop to change the rendered element.
Components
BreakoutButton
BreakoutLink
Further Reading
- “Nested Links” – Sara Soueidan