Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Link

Rounded Button (Link) for React

A link-styled button with fully rounded ends, when a quiet action should match the other pills already on the screen.

Framework
UI library

The link variant with the pill prop, so the ends are fully round. On a text button the rounding is easy to miss. Use it when the rest of the screen is already round.

Skip it in a dense table, where a square control is easier to scan. The filled Button with pill is the one people notice. In React, pill rounds the control and doesn't change what the click does.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does pill do to a link Button?

pill rounds the ends fully. variant="link" has no fill and no border, so the roundness mostly shows in the hit area and the focus ring. The text still underlines on hover.

Why does this look almost like the square link Button?

The link variant is the label on its own. There's no background for the radius to clip. You'll see the pill clearly once the control has padding around a longer label, or a focus ring.

How do I make it open a page in React?

Pass your link with render, such as render={<a href="/pricing" />}.

Pass pill as well if the link should keep the round hit area.

When is a round link worth it?

When the other controls on that line are pills and this quiet action should match. On a page of square buttons, leave pill off.

How do I change the label?

The children are the label. Button is a placeholder. Learn more, or Skip, is the sort of word this weight is for.

What does disabled do?

disabled fades the text and blocks the click. pill doesn't change that.

All 35 button examples