Shadcn.io is not affiliated with official shadcn/ui
Rounded Button
An outline button with fully rounded pill edges combining border styling with modern curvature
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.
Rounded Button preview
Installation
Related Components
Standard Outline
Rectangular border button
Rounded Primary
Pill-shaped filled button
Rounded Link
Pill-shaped minimal button
Outline Left Icon
Border button with left icon
Standard Badge
Pill-shaped indicator
Rounded Secondary
Pill-shaped muted button
FAQ
Was this page helpful?
Sign in to leave feedback.