Button

Core button styles for common actions.

Success button for positive actions.

Eye-catching gradient, glow, soft, glass, and neon styles.

From extra small to extra large.

Compact buttons with just icons using the icon sizes.

Place icons inline with the button label via children.

Use the built-in leftIcon and rightIcon props instead of manual children.

The loading prop shows a built-in spinner and disables the button.

Disabled buttons for unavailable actions.

The fullWidth prop makes buttons span their container.

Control corner rounding with the rounded prop.

Common button patterns in applications.

With asChild, button styles are applied to your own element through Radix Slot: the navigation action renders as a single real <a>, so middle-click, opening in a new tab, and the browser's status bar all work — no <a> ends up nested inside a <button>. Variant classes, the loading spinner, and the left/right icons are carried into the child via Slottable, so nothing is lost from the button's contract. For in-app routing, use Next.js Link instead of <a>.