Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Rounded Button
A link-styled button with fully rounded pill edges creating modern minimal navigation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Even minimal links can be modern. This React link button applies rounded-full className to shadcn/ui's link variant creating circular end caps on text-only styling. Built with maximum border-radius on transparent background maintaining primary color underline, it creates contemporary inline action patterns. Perfect for pill-shaped tag navigation in blog filters, modern "Learn More" links in marketing pages, or iOS-style settings links in mobile-first designs—the rounded form softens minimal styling while preserving clear link affordance through color and underline cues.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Link
Default rectangular link button
Rounded Primary
Pill-shaped filled button
Rounded Outline
Pill-shaped bordered button
Link with Icon
Icon-enhanced link button
Standard Badge
Pill-shaped status indicator
Link Right Icon
Link with trailing arrow