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.
Default button
Secondary button
Outline button
Ghost button
Destructive button
Link button variant
Extra small button
Small button
Large button
Disabled button
Icon button
Button with an icon on the right
Button in a loading state
Button with an icon on the left
Button with an invalid state highlight
Secondary button with an icon on the left
Secondary button with an icon on the right
Outline button with an icon on the left
Outline button with an icon on the right
Ghost button with an icon on the left
Ghost button with an icon on the right
Destructive button with an icon on the left
Destructive button with an icon on the right
Extra small icon button
Small icon button
Large (lg) icon-only button
Button rendered as a Next.js Link
Link button with an icon on the left
Link button with an icon on the right
Large button with an icon on the left
Large button with an icon on the right
Outline button with an invalid state
Ghost button with an invalid state
Button with an icon on the left
Ghost button with more/less toggle
Social login buttons with Remix Icons
Outline like button with count
Star button with count
Button with an unread badge
Button with icon, label, and shortcut keys
Copy button with feedback
Icon-only copy button with feedback
Animated hamburger / close toggle button
Async action button with loading and success states
Outline button with inline count badge
Button with status dot badge
Ghost button with a status badge
Icon button with notification badge
Go back link button
Go back link button with animation
Expanding button from icon to label
Multi-line button with icon, title & description
Sliding Icon Button (Hover reveal)
Shortcut Tooltip Button (Kbd hints)
Button with avatar
Outline button with avatar
Small button with avatar
Small outline button with avatar
Social login buttons with Remix icons
Social icon-only buttons with Remix icons
Theme toggle button with animated moon and sun icons
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.
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.