Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Secondary

Button with Text (Secondary) for React

A muted fill for an action that helps, and is not the one you want pressed, when the page already has a primary button.

Framework
UI library

Secondary uses the secondary color instead of the primary fill. People can still see it, and it does not compete with Save or Send.

Use it for Duplicate, Preview, or another supporting action in the same row. If it barely matters, the link variant on Button is lighter. In React, the secondary color comes from your theme.

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

How is a secondary Button different from the primary one?

variant="secondary" uses the secondary fill and secondary text. The default Button uses the primary color. Secondary stays visible and sits behind Save or Send.

When is secondary the wrong weight?

When this is the action you want pressed. That one should leave variant off, so it gets the primary fill. Secondary is for Duplicate, Preview, or another action in the same row.

How do I change the label?

The children are the label. Button is a placeholder. The variant doesn't add a verb for you.

Can it sit next to a primary Button?

Yes. Put the primary action first in reading order and this one beside it. Two primary fills in one row compete with each other.

What does disabled look like on secondary?

disabled fades the secondary fill and blocks the click. People can still tell which action it is.

Does a secondary Button submit the form?

Pass type="submit" if it should. Otherwise it stays type="button" and a supporting action won't send the form.

All 35 button examples