shadcn.io is an independent project built on shadcn/ui
The default button with pill set, so it is a capsule instead of the usual radius. Match the cards and inputs around it, or it looks accidental.
Use it for a primary action on a round screen, like a mobile sheet. If the rest of the app is square, leave pill off the Button. In React, Ark UI takes the radius from the pill prop.
Installation
Anatomy
Usage
<Button pill>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. This button leaves variant off, so it's the primary fill with fully round ends. 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.
Is the label still just Button?
Yes. pill doesn't add text. Replace the children with the action, such as Follow or Subscribe, when that's the word you want on a pill.
API Reference
Button
Sets pill. The rest is on the Button page.
