Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Rounded Button
A destructive button with fully rounded pill-shaped edges softening the visual aggression of dangerous actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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