Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Destructive

Button with Right Icon (Destructive) for React

A destructive button with an arrow after the label, when a dangerous action continues on into another step of the flow.

Framework
UI library

Destructive color, the label, then an arrow. Use the arrow when delete is step one of a flow, not when the delete happens immediately.

Use it for Delete and continue, or Remove and review. If the click should just delete, drop the arrow and confirm in an Alert Dialog. In React, Base UI will not tell anyone the icon is an arrow.

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 arrow after the label?

The destructive button ends with ArrowRightIcon and data-icon="inline-end". The arrow picks up the danger color, stays aria-hidden="true", and moves to the other side in a right-to-left layout.

Does the arrow mean this navigates?

No. The arrow is decorative. The control is still a button with type="button", so it doesn't open a URL and it doesn't submit a form unless you pass type="submit".

How do I use a different icon?

Replace ArrowRightIcon and keep data-icon="inline-end" if it should stay after the label. Use inline-start if it should lead. Leave aria-hidden="true" on while the text is enough.

What does destructive add to the arrow?

variant="destructive" paints a light danger fill and danger-colored text, and the arrow uses that same color. The arrow still doesn't mean the click is safe to repeat. Confirm a delete that can't be undone in an Alert Dialog.

Is the label supposed to say Button?

That's the placeholder. Continue to delete, or Review and delete, tells people the arrow moves them into the dangerous step.

What does a screen reader hear?

The label, Button in this demo. The arrow is hidden. Rename the children to the action, such as Next or Continue, so the name matches the arrow.

All 35 button examples