Skip to content

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

Free

Button with Right Icon (Destructive) for Solid

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

UI library: Ark UI

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 Solid, Ark UI will not tell anyone the icon is an arrow.

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="destructive">
    Button
    <ArrowRightIcon aria-hidden="true" data-icon="inline-end" />
  </Button>

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.

API Reference

Button

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

All 35 button examples