Button

Variants

Sizes

Loading state

As a link (asChild)

Use asChild to render the Button as its child element while keeping all of the styles. Combine with next/link for client-side navigation:

Accessibility notes

• Renders as a real <button> by default — keyboard activation via Enter and Space works out of the box.
• Sets aria-busy when loading is true, and the loading spinner has role=“status”.
• Focus is shown via :focus-visible only — no permanent ring on mouse click.
• The press animation translates 2px diagonally for users who allow motion, and drops to a subtle opacity change for users with prefers-reduced-motion: reduce.