Skip to content

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

Free

Button with Right Icon (Link) for Ark UI

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

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, Ark UI pads the trailing 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

Anatomy

Button anatomy: root, icon, text

Usage

<Button variant="link">
  Button
  <ArrowRightIcon aria-hidden="true" data-icon="inline-end" />
</Button>

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 asChild and put an a or your router's link inside. The button's styles move onto the link. 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.

API Reference

Button

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

All 35 button examples