Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Rounded Button
An outline button with fully rounded pill edges combining border styling with modern curvature
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Borders meet curves—rounded outlines create modern secondary actions. This React outline button applies rounded-full className to shadcn/ui's border-only variant creating circular end caps on bordered styling. Built with maximum border-radius on outlined button maintaining subtle visual weight with contemporary form, it establishes modern secondary action patterns. Perfect for pill-shaped filter buttons in e-commerce interfaces, rounded "Skip" options in onboarding flows, or iOS-style bordered navigation in mobile-first designs—the rounded outline combines clear affordance through border with friendly modern aesthetics through curvature.
Pattern created by @haydenbleasel