Button

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/button.json

Then run npx expo install --fix so react-native-reanimated match your Expo SDK. Files land in components/goodui-native/button.

Usage

import { Button } from "@/components/goodui-native/button/button";

export function SaveBar({ save }: { save: () => Promise<void> }) {
  return (
    <Button size="lg" successLabel="Saved" onPress={save}>
      Save changes
    </Button>
  );
}

When to use

Examples

<Button>Continue</Button>
<Button variant="secondary">Not now</Button>
<Button variant="ghost">Learn more</Button>
<Button variant="destructive" size="sm">Delete</Button>

<Button variant="secondary" errorLabel="Couldn't send" onPress={() => api.sendInvite(email)}>
  Send invite
</Button>

API reference

Motion and haptics

• •Press: scales to 0.97 on the snappy spring and fills an overlay, both from touch down.
• •Pending: the surface gathers into a circle on the morph spring; the layout never shifts.
• •Result: color leads, the surface opens, then the check draws itself or the error appears; an error also shakes.
• •Reduced motion: no scale, no shape change, no shake; states crossfade.

• •Haptic: tap on press (configurable with the haptic prop)
• •Haptic: success when the promise resolves
• •Haptic: error when it rejects

• •All animation runs on the UI thread through Reanimated shared values; React renders only on state changes.

Accessibility

• •accessibilityRole is button; disabled and busy are reported through accessibilityState.
• •The accessibility label follows the state: 'Save changes, in progress', then the success or error label.
• •Results are announced with AccessibilityInfo.announceForAccessibility.
• •Heights below 44 pt get a hitSlop that brings the touch target to 44 pt.

Notes for AI

Related