The label slides up one row on hover or focus while a second label rises in.
FreeWeb and Mobile2 variantsMotion
Preview
npx shadcn add @fetaui/slide-text-buttonPlayground
Variants
Labels
Disabled
Variant
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/slide-text-button
Variants
Primary for the main call to action, Secondary for the one beside it.
Motion
Accessibility
- The accessible name is always the first label.
Motion
- The labels trade places on hover and on keyboard focus.
- With reduced motion, the press scale is off and color changes stay. Labels crossfade in place.
Responsive behavior
- On touch screens, only keyboard focus slides the label.
Performance
- The slide is a CSS transition on transform and opacity. No JavaScript runs on hover.
- Both labels are always in the DOM, so nothing mounts on hover.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/slide-text-button.
- Pass label and hoverLabel as strings of similar length. The button sizes to the wider one.
- aria-label is always label, so hoverLabel must not carry new meaning.
- variant is primary or secondary.
Related
ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.Expanding Arrow ButtonComponentA wide call to action where a chip opens across the button as its chevrons run.Gradient ButtonComponentAn accent button that keeps its color in Light and Dark. Hover sweeps a sheen.Metallic LinkComponentA link styled as a pill inside a chrome rim.