Shadcn Button

Browse 61 production-ready shadcn button components for primary actions, form submissions, destructive actions, and loading states. Button is compatible with Radix UI and Base UI stacks and fully aligned with Shadcn Create styling.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Page, form and dialog actions in primary, secondary, outline, ghost, destructive and link weights
Icon only controls and sign in rows, such as close, search, copy, menu or theme switches and provider logos
Actions that report state or carry extras, such as a spinner, a saved check, a count or a shortcut

When not to use

Several related actions joined edge to edge as one segmented control: use the Button Group component
A control that stays pressed on or off, such as bold in an editor toolbar: use the Toggle component
An action attached inside a text field, such as a search submit or a clear: use the Input Group component

Agent notes

The base twin Button defaults to type button, so pass type submit inside a form; the radix twin renders a plain button that submits by default
A link needs its anchor passed through render with nativeButton false on the base twin, or wrapped with asChild on the radix twin
Set data-icon to inline-start or inline-end on a leading or trailing icon so the text sizes trim the padding on that side

Markdownhttps://web.dev.reui.io/components/button.md

MCPget_component("button")

Installnpx shadcn@latest add button

Full index for agents:llms.txtReUI MCP setup

Shadcn Button: Primary Actions & Form Submission

Shadcn Button is a clickable element for actions, form submission, and navigation. It follows Radix UI composition conventions and Base UI-style semantic HTML, with full compatibility for Shadcn Create styling.

It comes in multiple variants (primary, secondary, destructive, ghost, outline) with optional loading and disabled states, supporting icons, text, or both.

ReUI lists button components inside forms, toolbars, cards, and dialogs so you evaluate hierarchy, spacing, and icon placement next to other components. The sections below explain what the component is, why teams use it, key features, and integration guidance.

What is Shadcn Button?

A button is the primary interactive element for actions, form submission, and navigation. Shadcn Button composes native HTML button elements with Tailwind variants for color, size, and state so you get consistent styling without CSS battles.

Components here show primary buttons (blue, full-width), secondary buttons (outline, lower priority), destructive buttons (red, delete), and icon buttons. They help you choose variants, decide on text vs. icon, and judge spacing on mobile.

Why Use Shadcn Button?

Buttons are the fundamental interaction element in apps. Consistent styling across variants (primary, secondary, destructive) helps users scan for actions without confusion.

The forms, toolbars, and dialog examples on this page show how buttons pair with loading states, icons, and disabled states.

Shadcn Button Features

Multiple Variants. Primary (default), secondary (lower priority), destructive (red, delete), ghost (minimal), outline (bordered), and link variants for different contexts.
Size Variants. sm, md, lg for consistency across density levels and screen sizes, making touch targets at least 44px on mobile.
Loading State. Disable the button and show a spinner while a request is pending, paired with Lucide's Loader2 icon.
Icon Support. Place icons (from Lucide) before or after text, or render icon-only buttons with accessible labels.
Disabled State. Visually distinct disabled button with cursor-not-allowed, preventing clicks and showing why interaction is blocked.

Use primary Shadcn Button inside Shadcn Dialog or Shadcn Alert Dialog for primary actions, paired with secondary button for cancel.

Combine buttons with Shadcn Input and Shadcn Field in forms for submit and reset. Show buttons in Shadcn Card headers or footers for actions on that card's content.

Group buttons in a Shadcn Button Group for segmented controls or related actions. Use icon buttons with Shadcn Tooltip in toolbars for compact, accessible control.

Frequently Asked Questions

What button variant should I use for the primary action?

Use the default (blue) variant for the main action users should take. Secondary variant for alternative actions. Destructive (red) for delete or irreversible actions only.

Should buttons be full-width or fixed size?

Full-width on mobile and in forms for easier touch targeting. Fixed-width in toolbars and inline contexts. Match your layout and touch target guidelines (44px minimum).

How do I show a loading state on a button?

Disable the button, show a spinner icon, and optionally change text to 'Saving...' or 'Loading...'. Pair with a disabled prop to prevent duplicate clicks.

Can I use a button as a link?

Yes, use the link variant or render a button-styled link element. In Next.js, use Link component with asChild prop from Radix Slot.

What's the difference between secondary and ghost buttons?

Secondary is outlined with moderate contrast. Ghost is minimal, low-contrast, used sparingly in toolbars. Secondary works better for alternate actions.

How do I handle button focus states for accessibility?

Shadcn applies focus-visible so keyboard users see a ring. Ensure sufficient contrast (AA standard) and test with keyboard navigation.

How are ReUI button components different from isolated component demos?

They show buttons inside forms, dialogs, toolbars, and cards so you evaluate hierarchy, spacing, and icon placement in realistic contexts.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.