Action Button

A button that carries its own progress. Press it and, if the action returns a promise, the label gives way to a spinner, then to a tick that pops in, or a cross and a shake if it fails, before it settles back to idle. The button never changes size, so nothing around it moves, the outcome is read out to screen readers, and pressing while it is busy does nothing. 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 action-button

Manual

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

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

Usage

import { ActionButton } from "@/components/ui/action-button";

export default function Example() {
  return (
    <ActionButton
      label="Save changes"
      onPress={async () => {
        await fetch("/api/save", { method: "POST" });
      }}
    />
  );
}

Props