Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Secondary

Rounded Button (Secondary) for React

A muted button with fully rounded ends, when a supporting action should share the pill shape of the controls around it.

Framework
UI library

Secondary color and the pill prop. The shape is the only difference from a normal secondary button.

Use it next to a round primary button so the pair matches. If only one button is round, it looks accidental. Leave pill off the Button unless the screen is already built that way. In React, pill is on or off, with no radius in between.

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 do I get the fully rounded ends?

Pass pill. The component rounds the ends fully and marks the button with data-pill. Use the prop rather than a rounding class, so the shape stays the component's.

Does pill change the colors?

No. variant="secondary" is the quieter fill, and pill rounds it to match a primary pill beside it. pill only changes the radius. The label, the type, and the click are the same as a square button of that variant.

When is a pill the wrong shape?

When the buttons around it have the normal radius. One pill in a square group looks accidental. Use it when the screen is already built from round controls.

Should both buttons in a pair be pills?

If one is. A round primary next to a square secondary looks unfinished. Pass pill on both, or on neither.

How do I change the label?

The children are the label. Button is the placeholder, on a secondary pill.

What does disabled do to a pill?

disabled fades it and ignores the click. The round ends stay. The shape doesn't change the disabled behavior.

All 35 button examples