Icon button

Installation

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

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

Usage

import { IconButton } from "@/components/goodui-native/icon-button/icon-button";
import { ShareIcon, BellIcon } from "./icons";

export function ArticleHeader({ share, unread }: { share: () => Promise<void>; unread: number }) {
  return (
    <>
      <IconButton
        accessibilityLabel="Share"
        icon={(color, size) => <ShareIcon color={color} size={size} />}
        onPress={share}
      />
      <IconButton
        accessibilityLabel="Notifications"
        variant="ghost"
        badge={unread}
        icon={(color, size) => <BellIcon color={color} size={size} />}
      />
    </>
  );
}

When to use

Examples

<IconButton accessibilityLabel="Add" variant="solid" tone="accent" icon={plus} />
<IconButton accessibilityLabel="Edit" variant="soft" icon={pencil} />
<IconButton accessibilityLabel="Filter" variant="outline" shape="square" icon={sliders} />
<IconButton accessibilityLabel="Delete" variant="soft" tone="danger" icon={trash} />

<IconButton
  accessibilityLabel="Save to collection"
  selected={saved}
  onPress={() => setSaved((s) => !s)}
  haptic="select"
  icon={(color, size) => <BookmarkIcon color={color} size={size} filled={saved} />}
/>

<IconButton accessibilityLabel="More" icon={dots} onPress={openMenu} onLongPress={openContextMenu} />

API reference

Motion and haptics

• •Touch down: the surface scales to 0.9 and the icon to 0.88 inside it on the snappy spring; on release the surface returns on snappy and the icon on morph, a beat later, so the press has depth.
• •A press overlay fades in on touch down and out on release.
• •selected crossfades a solid fill and the icon color (when icon is a function) with a timing.
• •Async: the icon fades to a spinner, then a check draws itself or an alert mark appears with a shake.
• •Long press (or a 500 ms hover on the web): a hint bubble rises 6 pt and scales in on the morph spring; it leaves 1.2 s after release or when the pointer leaves.
• •Reduced motion: no press scale, no shake; the hint and states only fade.

• •Haptic: tap on press (configurable with the haptic prop; use 'select' for toggles)
• •Haptic: tap when onLongPress runs
• •Haptic: success when the promise resolves, error when it rejects

• •Press, selected and hint animations run on the UI thread; React renders on status, hint visibility and prop changes only.

Accessibility

• •accessibilityLabel is required; the role is button and disabled, busy and selected (for non-solid variants) are reported in accessibilityState.
• •A badge count is added to the label ('Notifications, 3 new', 'more than 99 new') and the badge itself is hidden from screen readers.
• •The label follows async state: 'Share, in progress', then 'done' or 'failed', and the result is announced.
• •Sizes below 44 pt get a hitSlop that brings the touch target to 44 pt.
• •The long-press hint repeats the label visually and is hidden from screen readers, which already read the label.
• •With `selected` set, the web reports it as a toggle (aria-pressed).

Notes for AI

Related