Patterns / Navigation
Navigation
Navigation is sometimes an action and sometimes a link, and the two are not interchangeable. This page is about keeping a control that navigates a real anchor, so middle-click, right-click and the keyboard all keep working.
A button that navigates should still be an <a>. Pass asChild and Alpha renders your element with its styling, so middle-click, right-click and keyboard behaviour all keep working. The child can be a plain <a> or your router's link — these demos pass next/link, which renders one. The pair below is the same mechanism at two weights: a primary call to action, and an outlined ghost for navigation that should not shout.
<Button asChild> <Link href="/docs/components/button">Go to Button</Link> </Button>
Rendering <button> inside <a> — or the reverse — is invalid HTML and a nested-interactive failure for screen readers. asChild exists to avoid exactly that.