Gradient Button

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/gradient-button

Usage

import { GradientButton } from "@/components/ui/gradient-button/gradient-button";
<GradientButton />

API reference

Prop Type Default
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.

 "horizontal"
size "sm" | "md" | "lg"

Size preset.

 "md"
radius
"pill" | "xl" +2 "pill" | "xl" | "lg" | "md"

Corner radius. Default "pill".

 "pill"
loading boolean

Swap the label for busy dots and block presses while true.

 false
asyncTracking boolean

Auto-track async onPress — when onPress returns a Promise, the button enters the loading state until it resolves. Default true.

 true
success boolean

The button becomes its own result: it narrows to successLabel, a check draws, and it holds. Presses are blocked.

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

 "light"
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) => void) | ((e: GestureResponderEvent) => Promise<unknown>) | null
—
children React.ReactNode —