Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Standard

Button with Text (Standard) for React

The filled button, for the one action you want people to take, when a page should have a single obvious next step.

Framework
UI library

Solid background, text that contrasts with it. You get this when you do not pass a variant.

Use it for Save, Send, or Continue, and keep one of those per section. If the control should stay pressed, a Toggle fits better. In React, Base UI renders a real button, and the default type does not submit the form.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does this Button look like?

variant is left off, so it uses default: the primary fill and primary-colored text. Hover lightens the fill. This is the action you want people to find first.

How do I change the label?

The children are the label. The demo says Button so the fill is easy to see. Use Save, Send, or whatever the click actually does.

Why doesn't this Button submit my form?

type is button by default, so a click never submits by accident. Pass type="submit" on the one button that should send the form.

How do I add a quieter button beside it?

Give the other action variant="secondary" or variant="outline". One primary fill in the row is enough. A second one makes both harder to pick.

What does disabled do?

disabled lowers the opacity and ignores the click. Leave the button on the page when the action exists and can't run yet, and say why next to it.

How do I handle the click in React?

Pass onClick, as with any button.

All 35 button examples