Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Destructive

Rounded Button (Destructive) for React

A destructive button with fully rounded ends, when a delete should match the pill shape of the rest of the screen.

Framework
UI library

Destructive color, with pill so the ends are fully round. Rounding does not make a delete safer. The label and a confirm step do.

Use the shape only when the rest of the screen is round. For the warning, keep the destructive variant and confirm in an Alert Dialog. In React, Base UI will not add that confirm 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="destructive" is the light danger fill and danger-colored text. pill rounds that fill. 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 round shape make a delete feel safer?

The shape doesn't change the meaning. The danger color does. If the delete can't be undone, confirm it in an Alert Dialog.

How do I change the label?

Replace Button with Delete, or with the object being removed. pill leaves the words alone.

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