Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Outline

Button with Left Icon (Outline) for React

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

Framework
UI library

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 React, aria-hidden keeps the icon from being announced.

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 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.

All 35 button examples