Component
Slidable button
A drag-to-confirm track: the thumb has to be pulled most of the way across before the action fires, preventing an accidental tap from triggering something irreversible.
Standalone
slidable button.tsx
<NativeSlidableButton label="Slide to confirm" onConfirm={() => {}} />Example
At the bottom of a confirmation screen: a primary slide-to-confirm track and a red destructive variant for irreversible actions like canceling or deleting.
slidable-button-example.tsx
<NativeSlidableButton label="Slide to confirm" onConfirm={onConfirm} />
<NativeSlidableButton label="Slide to cancel" variant="destructive" onConfirm={onCancel} />Capabilities
| Prop | Type | Description |
|---|---|---|
| labelrequired | string | - |
| onConfirmrequired | () => void | - |
| variant | NativeSlidableButtonVariant | - |
| loading | boolean | - |
| disabled | boolean | - |
| className | string | - |