Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Outline

Button with Right Icon (Outline) for React

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

Framework
UI library

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 React, data-icon only sets where the icon sits.

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

All 35 button examples