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.

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.

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.

Searchers look for 'react button component', 'form submit button', and 'button variants'. This page answers with real forms, toolbars, and dialog examples showing 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