Expanding Arrow Button

A wide call to action where a chip opens across the button as its chevrons run.

FreeWeb and Mobile2 variantsMotion

npx shadcn add @fetaui/expanding-arrow-button

Playground

Kinds

Disabled

Kind

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/expanding-arrow-button

Primary for the main call to action, Secondary for a quieter one.

Motion

A native button. The label stays in the DOM as its name while hidden, and the chip is decoration.

The chip opens from 32 px to the full inner width over 500 ms as five chevrons run. The label hides.
Pressing returns to the rest layout. With reduced motion, the expanded look appears without motion.
Swift uses one chevron.

All motion is CSS, with no JavaScript on hover. React state changes only on press.
The chip animates width and padding, so that small area lays out while it opens. The chevrons use transform and opacity.
The button is a fixed 180 px, so nothing around it moves.

Give your coding assistant the Markdown reference instead of screenshots.

Import from @/components/fetaui/expanding-arrow-button.
Children are the label, default Get started. Keep it short for the 180 px width.
kind is primary or secondary.
The label hides while open but stays as the accessible name.
Demo clicks do nothing. Wire up onClick.