Skip to content

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

Free

Button with Right Icon (Link) for Solid

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

UI library: Ark UI

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 Solid, Ark UI pads the trailing icon after the text.

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="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 Solid?

The variant doesn't navigate, and the arrow doesn't either. Pass asChild and spread the props it gives you on your 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