Button

Displays a button or a component that looks like a button, with multiple variants and sizes.

Install

npx shadcn@latest add https://atomx.acau.net/r/button.json

Usage

The Button is the primary interactive element in atomx. Use it for form submissions, calls to action, and navigation triggers. Choose the variant that matches the visual hierarchy of the action — default for the primary action on a surface, outline or ghost for secondary actions, destructive for dangerous or irreversible operations.

Avoid stacking multiple default buttons side by side; at most one primary action should draw the eye at a time.

Preview

Variants

Sizes

Disabled state

Props

All other props are forwarded to the underlying <button> element. Use asChild to render as a different element (e.g. a Next.js <Link>).