Shadcn.io is not affiliated with official shadcn/ui
Rounded Button
A destructive button with fully rounded pill-shaped edges softening the visual aggression of dangerous actions
Sharp edges feel aggressive—pills feel friendlier. This React destructive button applies rounded-full className to shadcn/ui Button creating circular end caps despite the red danger color. Built with Tailwind's maximum border-radius override on the destructive variant, it creates softer delete UX. Perfect for modern interfaces like Notion's gentle deletions, friendly SaaS apps removing items, or mobile-first designs where pill buttons match iOS patterns—the rounded form reduces visual harshness while maintaining unmistakable red warning signal.
Rounded Button preview
Installation
Related Components
Standard Destructive
Default rectangular destructive button
Rounded Primary
Pill-shaped primary button
Destructive with Icon
Icon-enhanced delete button
Destructive Badge
Pill-shaped error indicator
Destructive with Count
Badge counter on destructive
Destructive Dialog
Dangerous action confirmation
FAQ
Was this page helpful?
Sign in to leave feedback.