Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Button with Text (Link) for Solid

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

UI library: Ark UI

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 Solid, Ark UI still renders a button, so this does not navigate on its own.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Part of Pro

Anatomy

Button anatomy: root, icon, text

Usage

<Button variant="link">Button</Button>

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.

API Reference

Button

Sets variant="link". The rest is on the Button page.