Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Link

Button with Text (Link) for React

Text in the primary color, with an underline on hover and no fill, when the action should read like a link and stay quiet.

Framework
UI library

The link variant is the label on its own. It uses the primary color and underlines when you hover, so it can sit in a sentence, a table cell, or a card footer.

Use it for View details, Learn more, or Skip. If the click should open another URL, use a real link. The filled Button is the one you want people to find first. In React, Base UI still renders a button, so this does not navigate on its own.

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

Why doesn't this Button go anywhere?

variant="link" sets the look: primary-colored text, no fill, and an underline on hover (underline-offset-4). It is still a button, so the click doesn't open a URL.

When does the underline show?

On hover. The label is plain until then. Add your own class if it should be underlined the whole time. The text color is the theme's primary color.

How is this different from an outline Button?

Outline has a border and a button shape. The link variant is the label on its own, so it can sit in a sentence, a table cell, or a card footer. The filled Button is the one people should find first.

Can I put it inside a paragraph?

Yes. There's no fill, so it can sit in a line of text. View details, Learn more, and Skip are the usual labels. If the click should open a URL, make it a real link, as above.

What does disabled do to a link Button?

disabled fades the text and blocks the click. The underline style stays, so it still looks like the quiet action.

All 35 button examples