shadcn.io is an independent project built on shadcn/ui
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 Vue, Ark UI will not add that confirm for you.
Installation
Anatomy
Usage
<Button :pill="true" variant="destructive">Button</Button>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.
API Reference
Button
Sets pill and variant="destructive". The rest is on the Button page.
