Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Secondary

Button with Right Icon (Secondary) for React

A muted button with an arrow after the label, when a supporting action leads people on to the next step in the flow.

Framework
UI library

Secondary color, the label, then an arrow. The arrow suggests forward. It is not a destination by itself.

Use it for See more or Continue when a primary button is already in the row. If nothing comes next, leave the arrow off the Button. In React, aria-hidden keeps the icon from being announced.

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 secondary button trails ArrowRightIcon with data-icon="inline-end". The arrow inherits the secondary foreground, is hidden from the accessible name, and flips in a right-to-left layout.

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.

How does secondary change the arrow?

The arrow inherits the secondary foreground. variant="secondary" is the quieter fill, for a forward action that sits beside a primary one.

Can I disable it?

disabled fades the label and the arrow together.

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