Skip to content

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

Free

Button with Left Icon (Outline) for Vue

An outline button with an icon before the label, when a secondary action should be recognizable without reading the whole label.

UI library: Ark UI

Same border as a plain outline button, with a mail icon in front of the text. The icon is decorative.

Use it for a secondary action people repeat, next to a stronger button. If this is the only action in the row, the filled Button carries more weight. In Vue, Ark UI keeps a hidden icon from being announced.

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="outline">
  <MailIcon aria-hidden="true" data-icon="inline-start" />Button
</Button>

FAQ

Why is the icon before the label?

This outline button leads with MailIcon and data-icon="inline-start". The attribute sets the icon padding, and the icon moves to the other side in a right-to-left layout. variant="outline" keeps the border. The icon uses the label's color.

How do I use a different icon?

Swap the component. MailIcon is a placeholder from lucide-react. Keep data-icon="inline-start" and aria-hidden="true" when the label already says what the button does.

Will a screen reader announce the icon?

No. aria-hidden="true" takes it out, and the label is the accessible name. Drop the label only if you add an aria-label on the button. An icon with no name is an unlabeled control.

How big is the icon?

You don't pass a numeric size. The button styles an svg that has no size-* class, and these demos leave that alone. Add className="size-4" on the icon only when you need to override it.

Why outline, with an icon?

variant="outline" keeps the border and the background, and the icon uses the same text color. It suits a secondary action that is easier to scan with a symbol, such as a mail action that is not the page's primary button.

Does the icon change what the click does?

No. It's decorative. The button's type is still button, so it won't submit a form unless you pass type="submit". The border is the outline variant. The icon doesn't add one.

API Reference

Button

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

All 35 button examples