shadcn.io is not affiliated with official shadcn/ui
Button examples · Standard
Rounded Button (Standard) for React
A filled button with fully rounded ends, when the main action should match the other pill controls already on the page.
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, the radius comes from that prop.
Preview
Installation
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.
Related
- Button with Text (Standard)The one filled action
- Rounded Button (Outline)A pill with a border
- Rounded Button (Link)Round ends on a quiet action
- Button with Left Icon (Standard)An icon on the main action
- Badge with Text (Standard)A default badge with a short label for a
- Rounded Button (Secondary)A pill, kept quiet