Hold Confirm

A button for actions that should not happen by accident, such as deleting an account. A colour fills the button while it is held and the action runs when it is full; letting go early drains it back and nothing happens. Because holding is hard for some people, a screen reader's activate action and the Enter key on the web run the action straight away. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add hold-confirm

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/hold-confirm.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { HoldConfirm } from "@/components/ui/hold-confirm";

export default function Example() {
  return <HoldConfirm label="Delete project" onComplete={() => console.log("deleted")} />;
}

Props