Compose components
Preserve native semantics
Choose links, buttons, labels, inputs, and headings by behavior first, then apply components and visual styles without erasing meaning.
8 minute lesson
A polished component can still be inaccessible if the underlying element is wrong. Navigation is a link; an in-place action is a button.
Use the composition mechanism documented for your selected component base when another element must receive the component styles. Base UI, Radix, and React Aria may use different APIs. Verify the rendered DOM rather than assuming a prop named in an older example still applies.
Styling an anchor like a button does not turn it into a button, and that is good: it should still support copying the address, opening in a new tab, and modified clicks. Conversely, a button must not gain a fake href to perform an in-place mutation. Never nest one interactive element inside another to combine styles.
Composition can also change which element receives refs, event handlers, disabled state, and accessibility attributes. The source DOM is the evidence. Check the element name, role, accessible name, focus order, and keyboard behavior after composition, not only the React props before it.
Style a real Next.js Link as a button-like call to action using the documented API for your base. Inspect the final element, open it with a modified click, and compare it with an in-place button activated by Enter and Space. There should be no nested interactive nodes.
Lesson completed