Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Destructive

Button with Left Icon (Destructive) for React

A destructive button with an icon before the label, when a delete should be obvious before anyone reads the word itself.

Framework
UI library

The destructive color, with an icon in front of the label. The demo uses a mail icon. For a real delete, swap in a trash icon and keep it decorative.

Use it for Delete or Remove when a symbol helps people spot the danger. If the stakes are high, confirm in an Alert Dialog first. In React, the icon adds no meaning of its own.

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?

MailIcon leads the label, with data-icon="inline-start", on the destructive variant. The danger color covers the icon too. The padding flips when the direction is right to left.

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.

The icon is a mail mark. Is this still a delete?

The color is variant="destructive", a light danger fill with danger-colored text. The glyph is MailIcon, a stand-in. For a delete, use an icon that means delete and keep aria-hidden="true" as long as the label says Delete.

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". If the delete can't be undone, confirm it in an Alert Dialog.

All 35 button examples