Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Standard

Button with Right Icon (Standard) for React

A filled button with an arrow after the label, when the main action should move people forward to their next step.

Framework
UI library

Primary fill, the label, then an arrow. People read the word and get a nudge that something follows.

Use it for Continue, Next, or Review. If the click stays here and nothing comes after, drop the arrow. A Button with only the word is enough. In React, aria-hidden keeps the icon out of the accessible name.

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?

ArrowRightIcon is the last child, with data-icon="inline-end". The button pads for an icon on that side, and the arrow moves to the other side when the direction is right to left. It's aria-hidden="true" because the label is the name.

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.

Which button is this?

The default variant: primary fill, primary text, arrow after the label. Use it for the main forward step, such as Continue.

How do I make the arrow a link?

Turn the button into a link and keep the icon inside it. Pass your link with render, such as render={<a href="/pricing" />}.

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