Shadcn Button: 27 Ready to Use React Button Examples
Buttons carry almost every action in an interface, and the shadcn button gives you a consistent, accessible base with variant and size props styled through Tailwind CSS. This react button component ships as source code, so hover states, focus rings, and radii follow your design tokens instead of a vendor's.
This page gathers 27 copy-paste button examples for Next.js and Vite projects: solid, outline, ghost, and destructive treatments, icon buttons, loading states, buttons with badges and keyboard shortcut hints, split arrangements, and social sign-in styles, all typed in TypeScript.
Why use the Shadcn Button?
- Variant driven styling: Default, secondary, outline, ghost, destructive, and link variants cover most product needs through a single prop instead of ad hoc class strings.
- Sizes that compose: Small, default, large, and icon sizes keep buttons aligned across toolbars, forms, and dialogs.
- asChild flexibility: The asChild prop lets a Next.js Link or any other element inherit full button styling, keeping semantics correct for navigation.
- Consistent focus states: Every example keeps a visible focus ring, so keyboard users never lose their place.
- 27 starting points: From plain labels to icon, loading, and grouped arrangements, you rarely need to design a button from scratch.
Production tips
- One primary per view: Reserve the solid default variant for the single most important action and support it with outline or ghost buttons.
- Disable during async work: Swap the label for a spinner and disable the button while a request is in flight to prevent double submits.
- Label icon-only buttons: Icon buttons need an aria-label and usually a tooltip, since the icon alone is ambiguous to many users.
- Use destructive sparingly: Red buttons lose meaning when overused. Pair truly dangerous actions with a confirmation dialog instead of relying on color alone.
- Do not fake buttons with divs: A real button element gives you Enter and Space activation, form submission, and focus behavior for free.
Works well with other components
Buttons rarely appear alone. Related actions line up in a button group, overflow actions collapse into a dropdown menu, and destructive actions should confirm through an alert dialog. Icon-only triggers become self-explanatory with a tooltip, and async actions read clearly when the label yields to a spinner.
Every screen in our dashboard blocks leans on these same button patterns, from table toolbars to modal footers, so the examples here transfer directly.
Under the hood
The button needs no headless primitive. It is a plain HTML button element styled with Tailwind CSS, with variants managed through class-variance-authority as documented in the shadcn button docs. Native semantics already provide keyboard activation and form participation, so there is nothing to polyfill.
That simplicity means every example works unchanged in projects built on Radix UI or Base UI. The button has no primitive dependency to swap, only markup and classes you own.