button
Pick a variant of the button component.
Shadcn Button: Create Stylish and Functional Buttons for Your UI
Shadcn Button is a clickable element for actions, form submission, and navigation. It follows Radix UI composition patterns 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 patterns 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.
Patterns 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.
Integrating with Other Components
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.