Q: How do I make a button work as a link?

Use the `asChild` prop and pass an ` ` (or NextLink, RouterLink, etc.) as the child. The Button renders no DOM element of its own — it forwards its className, focus management, and ARIA attributes onto the child. Example: ` Dashboard `. This preserves real anchor semantics (right-click → Open in new tab works) while keeping the button styling.

Question 1

What is a shadcn button?

Accepted Answer

A shadcn button is the foundational interactive element of every UI you build — submit forms, trigger dialogs, navigate, run actions. It's the shadcn/ui Button primitive (six variants × four sizes via class-variance-authority, asChild composition for wrapping anchors and Slots) styled with Tailwind CSS. Each example in this gallery is a single self-contained TSX file showing one specific composition pattern — copy, paste, and ship.

Question 2

Are these button examples free?

Accepted Answer

Yes. Every button example on shadcn.io is free to copy and use in personal or commercial projects. There's no gated source, no attribution requirement, and no runtime dependency on shadcn.io. Browse any example, view the code, run the installer, and move on.

Question 3

How is this different from a plain HTML <button>?

Accepted Answer

A plain `<button>` has zero opinions about size, padding, color, focus ring, hover state, disabled treatment, or accessibility — you'd build all of that from scratch and re-build it for every variant. The shadcn Button primitive ships with a vetted color/spacing system per variant (standard, secondary, destructive, outline, ghost, link), a size scale (default, sm, lg, icon), focus rings that work in dark mode, and asChild composition so the same styling applies to anchors, NextLink, or any custom Slot. Skip the bikeshedding, ship the action.

Question 4

When should I use a Button versus a Link or an IconButton?

Accepted Answer

Use Button when the element triggers an ACTION (submit, save, delete, open dialog) — even visually "link-style" buttons like the link variant should be `

Question 5

Which button variant should I pick for a primary CTA?

Accepted Answer

Standard (the default solid primary) for the single most-important action on a page or in a section — "Sign up", "Save", "Continue". Keep it to ONE primary CTA per visual context; multiple solid primaries cancel each other out and confuse the user about where to click. Pair with secondary (muted) or outline buttons for less-important actions in the same context.

Question 6

When should I use the destructive variant?

Accepted Answer

Reserve destructive (red) for irreversible actions: "Delete", "Remove member", "Cancel subscription". Pair it with an AlertDialog confirmation step — destructive actions deserve a friction point. NEVER use destructive for cancel buttons or "close dialog" actions; cancel is the OPPOSITE of destructive (it preserves state) and should be ghost or outline.

Question 7

How do I build a loading button?

Accepted Answer

See the loading variant (one per color treatment). Inside the Button: render a Lucide Loader2 icon with `animate-spin`, set `disabled` to true while the action is in flight, and optionally swap the label text to "Saving…". The disabled state matters — without it, users can fire the same action 5 times before the first one returns. Wire to a local `isPending` state from `useState` or `useFormStatus` (Next.js form actions) for the disabled flag.

Question 8

What's the difference between secondary, outline, and ghost?

Accepted Answer

Secondary has a muted background fill — good for the second-most-important action in a row. Outline has a transparent fill with a border — good when the button sits on a colored surface (e.g. inside a Card with bg-primary). Ghost has no background or border, only hover-state visibility — good for tertiary actions in dense rows (toolbars, table cells, dropdown menu items). Pick by the visual weight you want; secondary > outline > ghost.

Question 9

How do I install a button example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/button/…`, plus the shadcn/ui Button primitive if you don't already have it. Customize the variant, size, label, or icon in place.

Question 10

How do I make a button work as a link?

Accepted Answer

Use the `asChild` prop and pass an `` (or NextLink, RouterLink, etc.) as the child. The Button renders no DOM element of its own — it forwards its className, focus management, and ARIA attributes onto the child. Example: ``. This preserves real anchor semantics (right-click → Open in new tab works) while keeping the button styling.

Question 11

How do I add a custom variant or size?

Accepted Answer

Edit `components/ui/button.tsx` — it uses class-variance-authority. Add an entry to `variants.variant` for a new color (e.g. `success: "bg-emerald-500 text-white hover:bg-emerald-500/90"`), or to `variants.size` for a new size (e.g. `xs: "h-7 rounded-md px-2 text-xs"`). Then use via `<Button variant="success" size="xs">`. For full theming, drive colors from CSS variables so dark mode adapts automatically.

Question 12

How do I set up keyboard shortcuts on a button?

Accepted Answer

Buttons get Enter and Space activation for free via the native `

Question 13

Which libraries do button examples depend on?

Accepted Answer

shadcn/ui Button (the styled wrapper generated into your project by the CLI), Tailwind CSS (styling), class-variance-authority (the variant API), Radix UI Slot (powers the `asChild` composition), and Lucide React (icons). TypeScript is assumed. React 19 is the baseline. No state library — buttons are pure render plus the host's onClick handler.

Question 14

Are button examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Each Button renders a real `<button>` element so it's keyboard-focusable, Enter/Space activates, the focus ring is visible, and screen readers announce it as a button automatically. For icon-only buttons, use `aria-label="Save"` (or whatever the action is) so SR users hear meaningful text instead of just "button". Disabled state is propagated to `aria-disabled` and the focus order respects it.

Question 15

Can I use these button examples with React Server Components?

Accepted Answer

Buttons that just render (no onClick, e.g. submit buttons inside a Server Component form) work as Server Components. Buttons with onClick handlers, useState, or hooks like useFormStatus need a client boundary. The Button primitive itself works on either side; only the parent that holds the click handler enforces the `"use client"` directive.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4, so the examples use the v4 class names and design tokens. If you're on Tailwind v3, the classes still apply — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The variant tokens (primary, secondary, destructive, accent) are declared identically under both versions, just in different config locations.

React Button Examples for shadcn/ui

Browse every button example

Frequently Asked Questions