Skip to content

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

Free

Button with Left Icon (Link) for Svelte

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

UI library: Ark UI

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 Svelte, Ark UI keeps a hidden icon out of the button's name.

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.
Get MCPSee plans
Part of Pro

Anatomy

Button anatomy: root, icon, text

Usage

<Button variant="link"><MailIcon aria-hidden="true" data-icon="inline-start" />Button</Button>

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 Svelte?

The link variant doesn't navigate. Pass asChild and spread the props it gives you on your link.

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.

API Reference

Button

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

All 35 button examples