Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Outline

Rounded Button (Outline) for React

An outline button with fully rounded ends, when a secondary action should follow the pill shape of the rest of the page.

Framework
UI library

Outline, plus pill, so the border itself is a capsule. The border makes the round shape easier to see than it is on a link.

Use it for Skip or Back in a round onboarding step. In a data table, the square outline is easier to scan. Set pill on Button only where the shape is a real pattern. In React, pill doesn't round the neighbors for you.

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="outline" is the border on the background color, and pill rounds that border into a capsule. 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.

Does the border follow the curve?

Yes. The outline variant's border is on the button, and pill rounds the whole control, border included.

When should this be the primary action?

When it shouldn't. A primary action in the same row should use the default variant. Outline, even as a pill, is the quieter one.

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