# Gradient Button

Bold call-to-action button in the accent colour, lit softly from above. While busy it shows loading dots in place of the label, and on success it narrows to a check.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/gradient-button
```

## Import

```tsx
import { GradientButton } from "@/components/ui/gradient-button/gradient-button";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `from?` | `string` | Fill start color (hex). Defaults to the theme primary — ink, or  whatever `<Accent>` scopes above it — as a flat face lit from above. |
| `to?` | `string` | Fill end color (hex) for an art-directed sweep. Defaults to `from`  deepened ~22% when only `from` is given. |
| `angle?` | `"horizontal" | "vertical"` | Sweep direction for an art-directed `from`/`to`. |
| `size?` | `"sm" | "md" | "lg"` | Size preset. |
| `radius?` | `"pill" | "xl" | "lg" | "md"` | Corner radius. Default "pill". |
| `loading?` | `boolean` | Swap the label for busy dots and block presses while true. |
| `asyncTracking?` | `boolean` | Auto-track async onPress — when onPress returns a Promise, the button  enters the loading state until it resolves. Default true. |
| `success?` | `boolean` | The button becomes its own result: it narrows to `successLabel`, a  check draws, and it holds. Presses are blocked. |
| `successLabel?` | `React.ReactNode` | Label shown in the success state. Default: `children`. |
| `onSuccessSettled?` | `() => void` | Fires once the success result has held (~700ms). |
| `haptic?` | `"light" | "medium" | "heavy" | false` | Haptic feedback on press. Default "light"; false to disable. |
| `icon?` | `React.ReactNode` | Icon rendered before the label. |
| `textClassName?` | `string` | Extra classes for the label — default is primary-foreground (theme  fill) or white (custom `from`/`to`). |
| `className?` | `string` | Extra classes for the container. |
| `onPress?` | `| ((e: GestureResponderEvent) => void) | ((e: GestureResponderEvent) => Promise<unknown>) | null` | — |
| `children?` | `React.ReactNode` | — |

Source: https://lumioui.com/components/gradient-button