Components
Slide Arrow Button
A pill button whose label rolls up while a chevron slides through its badge.
Hover or focus the button and the label rolls up to a fresh copy while, in
the lime badge, the chevron slides out to the right and a new one slides in
from the left. It is a real <button>, so onClick, type, disabled, and
refs all work. Pure CSS.
Installation
pnpm dlx shadcn@latest add @tween-ui/slide-arrow-buttonUsage
app/page.tsx
import SlideArrowButton from '@/components/tweenui/button/slide-arrow-button';
export default function Page() {
return <SlideArrowButton onClick={() => console.log('clicked')}>Get started</SlideArrowButton>;
}Props
Extends every native <button> attribute (onClick, type, disabled, ref, …).
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | Button label (a string — it is duplicated). |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type. |
className | string | — | Merged with the base styles. |
Accessibility
It renders a native <button>; the label supplies its accessible name and the
duplicate copy is aria-hidden. Hover and keyboard focus trigger the same
motion, and a focus ring is included. Under prefers-reduced-motion: reduce the
label and chevron stay put.