Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Link

Button with Right Icon (Link) for React

A link-styled button with an arrow after the label, when a quiet action should continue on to the next step in a flow.

Framework
UI library

The label comes first, then an arrow. The arrow is decorative, so the words have to say where this goes.

Use it for Next, Continue, or Open, when you want the forward cue without a filled button. If there is no next step, skip the arrow. A plain Button is clearer. In React, data-icon set to inline-end pads the icon after the text.

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 there an arrow on a link-styled Button?

ArrowRightIcon follows the label with data-icon="inline-end", so it sits in the icon padding and flips when the direction is right to left. variant="link" is primary text with an underline on hover, and no fill.

How do I make the arrow open a page in React?

The variant doesn't navigate, and the arrow doesn't either. Pass your link with render, such as render={<a href="/pricing" />}. Leave the icon where it is.

Can I use an external-link icon instead?

Yes. Any lucide-react icon works in that slot. Keep data-icon="inline-end" and aria-hidden="true". The icon is a hint. The label should still say where the click goes.

Is the arrow announced?

No. aria-hidden="true" removes it. Change the children from Button to the action, such as Next article, so the accessible name is the action.

Can this sit in a sentence?

Yes. With no fill, the label and the arrow can live in a paragraph or a card footer. Use a filled Button when this should be the main action on the page.

What does disabled do?

disabled fades the text and the arrow and ignores the click.

All 35 button examples