Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Link

Button with Left Icon (Link) for React

A link-styled button with an icon before the label, when a quiet action is easier to scan with a symbol beside the words.

Framework
UI library

A mail icon sits before the label on the link variant. The icon is decorative, so the text is still the name of the action.

Use it when the symbol makes the verb faster to spot, like mail or download, in a sentence or a menu. If the icon is the only label, give the Button an accessible name. In React, aria-hidden keeps the icon out of the button's name.

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 is the icon in front of a link-styled Button?

MailIcon comes first, with data-icon="inline-start", so the padding matches an icon and the pair flips in a right-to-left layout. variant="link" leaves the fill off: primary text, underline on hover.

How do I use a different icon?

Replace MailIcon. Keep data-icon="inline-start" and aria-hidden="true" while the label names the action. Import the icon you mean from lucide-react.

Is the icon read out?

It's hidden from assistive tech with aria-hidden="true". The button's name is its text. If you remove the text, put an aria-label on the button.

How do I make this open a page in React?

The link variant doesn't navigate. Pass your link with render, such as render={<a href="/pricing" />}.

Can the icon sit inside a sentence?

Yes, because there's no fill. A small icon plus View details can live in a table cell or a card footer. A filled Button is the better weight when this should be the main action.

What does disabled do?

disabled fades the text and the icon, and the click does nothing.

All 35 button examples