Shadcn Button Sliding Arrow

Sliding Icon Button (Hover reveal). Built with the Button component. A free, open source shadcn button example you can install with npx shadcn@latest add @reui/c-button-53 and edit as your own code.

Sliding Icon Button (Hover reveal)

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A pill Get Started whose arrow slides in from the right on hover as the label moves aside

When to use

Page, form and dialog actions in primary, secondary, outline, ghost, destructive and link weights
Icon only controls and sign in rows, such as close, search, copy, menu or theme switches and provider logos
Actions that report state or carry extras, such as a spinner, a saved check, a count or a shortcut

When not to use

Several related actions joined edge to edge as one segmented control: use the Button Group component
A control that stays pressed on or off, such as bold in an editor toolbar: use the Toggle component
An action attached inside a text field, such as a search submit or a clear: use the Input Group component

Agent notes

The base twin Button defaults to type button, so pass type submit inside a form; the radix twin renders a plain button that submits by default
A link needs its anchor passed through render with nativeButton false on the base twin, or wrapped with asChild on the radix twin
Set data-icon to inline-start or inline-end on a leading or trailing icon so the text sizes trim the padding on that side

Markdownhttps://reui.io/components/button/c-button-53.md

MCPget_example("c-button-53")

Installnpx shadcn@latest add @reui/c-button-53

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Button Sliding Arrow

Button

About Shadcn Button Sliding Arrow

Sliding Icon Button (Hover reveal). Built with the Button component. A free, open source shadcn button example you can install with npx shadcn@latest add @reui/c-button-53 and edit as your own code.

What You Can Build With Shadcn Button Sliding Arrow

Composes Button, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-button-53
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Button Examples

Default Default button
Secondary Secondary button
Outline Outline button
Ghost Ghost button
Destructive Destructive button
Link Link button variant
Extra Small Extra small button
Small Small button
Large Large button
Disabled Disabled button
Icon Button Icon button
Icon Right Button with an icon on the right

Related Shadcn Component Categories

Button Group
Open-source shadcn button group components for segmented controls, toolbar actions, and view switchers.
Calendar
Open-source shadcn calendar components for date picking, scheduling flows, and booking interfaces.
Card
Open-source shadcn card components for content previews, dashboard widgets, and product summaries.
Carousel
Open-source shadcn carousel components for image galleries, feature showcases, and testimonials.
Cascader
Nested multi-level selection with drill-down navigation, breadcrumbs, search and custom rows.
Chart
Open-source shadcn chart components for analytics dashboards, KPI tracking, and reports.

Frequently Asked Questions

When should I use Shadcn Button Sliding Arrow?

Use it for a pill Get Started whose arrow slides in from the right on hover as the label moves aside.

Shadcn Button as a whole fits:

Page, form and dialog actions in primary, secondary, outline, ghost, destructive and link weights
Icon only controls and sign in rows, such as close, search, copy, menu or theme switches and provider logos
Actions that report state or carry extras, such as a spinner, a saved check, a count or a shortcut

For several related actions joined edge to edge as one segmented control, use the Button Group component. For a control that stays pressed on or off, such as bold in an editor toolbar, use the Toggle component. For an action attached inside a text field, such as a search submit or a clear, use the Input Group component.

How do I install Shadcn Button Sliding Arrow?

Run npx shadcn@latest add @reui/c-button-53. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Button Sliding Arrow free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Button Sliding Arrow use?

It composes Button. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.