# Gradient Button

An accent button that keeps its color in Light and Dark. Hover sweeps a sheen.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/gradient-button
```

## Usage

```tsx
import { GradientButton } from '@/components/fetaui/gradient-button'
import { SparklesIcon } from '@fetaui/react/rounded/sparkles'

export function Example() {
  return <GradientButton color="emerald" icon={<SparklesIcon />}>Generate</GradientButton>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| color | emerald, violet, orange | emerald |
| icon | ReactNode |  |
| children | ReactNode |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For the one highlighted action in a view.

## When not to use

- For destructive actions: use Button.

## Accessibility

- A native button. White text stays on the gradient in both themes.

## Motion

- Hover sweeps a sheen once, a soft light follows the cursor and a ring of the button's own colors turns around the edge every 2.4 s.
- The button drifts up to 3 px toward the pointer and settles in 420 ms when it leaves. The icon tilts and pops on a spring.
- A press deepens the gradient, sinks the button to 0.97 and sends a ripple and six sparks out from the press point in 600 ms.
- With reduced motion, or `animated` off, only the color changes stay: no light, ring, pull, sheen or burst.