Skip to content

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

Free

Button with Right Icon (Outline) for Svelte

An outline button with an arrow after the label, when a secondary step should still feel like it goes forward from here.

UI library: Ark UI

A border, no strong fill, and an arrow after the text. The arrow is hidden from assistive tech.

Use it for View or Details beside a stronger action. If this is the press you want, use the filled Button. In Svelte, Ark UI only sets where the icon sits.

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

FAQ

Why is the arrow after the label?

The outline button ends with ArrowRightIcon and data-icon="inline-end". The arrow uses the label color, stays hidden from assistive tech, and swaps sides when the direction is right to left.

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.

Why is this one an outline?

variant="outline" is the bordered button, with the arrow in the same color as the label. It fits a next step that should be visible and should not look like the primary action.

Will it submit a form?

Only with type="submit". The demo leaves type at button.

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="outline". The rest is on the Button page.

All 35 button examples