shadcn.io is an independent project built on shadcn/ui
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 Svelte, Ark UI does not round the neighbors for you.
Installation
Anatomy
Usage
<Button pill variant="outline">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="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.
API Reference
Button
Sets pill and variant="outline". The rest is on the Button page.
