# Expanding Arrow Button

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

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/expanding-arrow-button
```

## Usage

```tsx
import { ExpandingArrowButton } from '@/components/fetaui/expanding-arrow-button'

export function Example() {
  return <ExpandingArrowButton kind="primary">Get started</ExpandingArrowButton>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| kind | primary, secondary | primary |
| children | ReactNode | Get started |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For a main call to action on a landing page.

## When not to use

- For product interfaces: use Button.

## Accessibility

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

## Motion

- 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.