Skip to content

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

Free

Button with Left Icon (Secondary) for Solid

A muted button with an icon before the label, when a supporting action needs a symbol and should stay visually quiet.

UI library: Ark UI

Secondary fill, a mail icon, then the label. The icon does not replace the words.

Use it beside a primary button, for something like Invite or Share. If it is the action you want pressed, use the default Button. In Solid, Ark UI treats a hidden icon as decoration.

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

FAQ

Why is the icon before the label?

On this secondary button the mail icon leads, with data-icon="inline-start". That padding flips in a right-to-left layout. The secondary fill is the quiet weight, and the icon inherits its text 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.

How quiet is this one?

variant="secondary" uses the secondary fill, and the mail icon inherits that foreground. Pair it with a primary button when both actions are real and only one of them should dominate.

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". Disabled works the same here: pass disabled and the whole control fades, icon included.

API Reference

Button

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

All 35 button examples