Patterns / Navigation

Navigation

Buttons carry navigation when it should look like an action; anchors carry it when it is a link.

Use asChild for real links

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.

<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.