Question 1

What is a button component?

Accepted Answer

The control for actions: submit a form, open a dialog, save, delete. shadcn.io's Button renders a real button with variants, sizes, a pill shape and a loading state, built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid. Each example in this gallery is one small file showing one composition.

Question 2

Are these button examples free?

Accepted Answer

Yes. Every button example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How is Button different from a plain button element?

Accepted Answer

It is a button element underneath, so focus, Enter and Space, and form submission work as usual. Button adds the design: variants, a size scale, focus rings, disabled styles, icon spacing with `data-icon`, a `pill` shape and a built-in loading state. Its `type` defaults to `button`, so it never submits a form by accident.

Question 4

When should I use a Button instead of a link?

Accepted Answer

Use a Button for actions that stay on the page, even when it uses the link variant. Use a real link when the click opens another URL; Button can render as a link while keeping its styles, and the Button page shows how for each library.

Question 5

Which variant should I use for the main action?

Accepted Answer

The default, filled variant, for the one action you want people to take: Save, Continue, Sign up. Keep one per section, and give the other actions secondary, outline or link so they don't compete.

Question 6

When should I use the destructive variant?

Accepted Answer

For actions that remove something or can't be undone: Delete, Remove member, Cancel subscription. Confirm the irreversible ones in an Alert Dialog. Cancel in a dialog keeps things as they are, so it isn't destructive.

Question 7

How do I build a loading button?

Accepted Answer

Disable the button while the request runs and put a Spinner before the label, marked `data-icon` `inline-start`, as the Loading examples do. Or use the built-in loading state, which hides the label, centers a spinner and keeps the button's width.

Question 8

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

Accepted Answer

Secondary has a muted fill, for the second action in a row. Outline has a border on the page background, for Cancel or Back. Link is the label alone in the primary color, underlined on hover, for quiet actions in text, tables and card footers.

Question 9

How do I install a button example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and the components it uses, Button and, where needed, Badge, Kbd or Spinner, to your project.

Question 10

How do I make a button open a page?

Accepted Answer

Render it as a link so it keeps the button's styles and gets real link behavior, such as opening in a new tab. Each library does this its own way; the Button page shows it for every library and framework.

Question 11

How do I add a custom variant or size?

Accepted Answer

Edit the Button component in your project and add an entry to its variants or sizes. Color new variants from theme tokens, such as `bg-success text-success-foreground`, so they follow light and dark mode.

Question 12

How do I show a keyboard shortcut on a button?

Accepted Answer

Put a Kbd after the label, as the With Kbd examples do. Kbd only draws the keys; listen for the shortcut yourself and run the same handler as the click.

Question 13

What do the button examples depend on?

Accepted Answer

The Button component and Tailwind CSS, plus Badge, Kbd, Spinner and Lucide icons where an example uses them. The examples have no state of their own.

Question 14

Are button examples accessible?

Accepted Answer

Each renders a real button, focusable and activated by Enter and Space, with a visible focus ring. Icons inside a labeled button have `aria-hidden`, and an icon-only button needs an `aria-label`. A disabled button can't be focused or pressed.

Question 15

Can I use these examples with React Server Components?

Accepted Answer

On React, these examples have no state or handlers, so they render from a Server Component. A button that handles a click in your app needs a client component around that handler.

Question 16

Which Tailwind CSS version do these examples need?

Accepted Answer

Tailwind CSS v4, the version shadcn.io's components are written for. The examples use its class names and theme tokens, such as `bg-primary-foreground/20`.

Button Examples

Button with Count

Button with Kbd

Button with Left Icon

Button with Right Icon

Button with Text

Loading Button

Rounded Button

Button with Count

Button with Kbd

Button with Left Icon

Button with Right Icon

Button with Text

More component examples

Button Group

Toggle

Toggle Group

Calendar

Card

Carousel

Chart

Checkbox

Button examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every button example. One prompt away.