An async button that shrinks to a spinner, then draws a tick or shakes a cross.
Pro<MorphButton />5 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| onPress Async work. Resolve → tick, reject → cross + shake. | () => Promise<unknown> | — |
| variant Look while idle. | "primary" | "accent" | "soft" | "outline" | "primary" |
| size 40 / 48 / 56pt tall. | "sm" | "md" | "lg" | "md" |
| color Brand colour for accent, soft and outline. | string | theme accent |
| successColor / errorColor Colours of the result circle. | string | theme success / danger |
| resetAfter ms the result stays before morphing back. | number | 1300 |
| minLoading Minimum ms the spinner is shown. | number | 600 |
| onSuccess / onError Called with the resolved value or the thrown error. | (value) => void | — |
| onStatusChange "idle" | "loading" | "success" | "error". | (status) => void | — |
| pill Fully rounded ends while idle. | boolean | true |
| block Full width; shrinks to the centre while busy. | boolean | false |
| left Icon before the label. | ReactNode | — |
| haptics Taps on start, success and error. | boolean | true |
| disabled Blocks presses. | boolean | false |
| textStyle Style for the idle label text. | StyleProp<TextStyle> | — |
| style Style for the outer animated wrapper (margins, alignment). | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Motion
- While the promise runs the button springs into a circle with a spinner. A resolve draws a success tick, a reject shakes with an error cross, then it springs back to its label.
- Touch
- Presses are ignored while it is busy, and the spinner shows for at least minLoading so fast requests still register.
- Haptics
- A light impact on start, then a success or error notification when the promise settles.
- Screen readers
- A button with busy and disabled states; while not idle its value reads "Working", "Done" or "Failed".
Source
Did you like the content?