ActionButton

ActionButtons allow users to perform an action. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.

import {ActionButton} from '@react-spectrum/s2';

<ActionButton>Action</ActionButton>

Events

Use the onPress prop to handle interactions via mouse, keyboard, and touch. The onPressStart, onPressEnd, and onPressChange events are also emitted as the user interacts with the button.

import {ActionButton} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [count, setCount] = useState(0);

  return (
    <ActionButton onPress={() => setCount(c => c + 1)}>
      {count} Edits
    </ActionButton>
  );
}

Pending

Use the isPending prop to display a pending state. Pending buttons remain focusable, but are otherwise disabled. After a 1 second delay, an indeterminate spinner will be displayed in place of the button label and icon.

import {ActionButton} from '@react-spectrum/s2';
import {useState} from 'react';

function PendingButton() {
  let [isPending, setPending] = useState(false);

  return (
    <ActionButton
      variant="primary"
      isPending={isPending}
      onPress={() => {
        setPending(true);
        setTimeout(() => {
          setPending(false);
        }, 5000);
      }}>
      Save
    </ActionButton>
  );
}

API

<ActionButton>
  <Icon /> or <Avatar />
  <Text />
  <NotificationBadge />
</ActionButton>

ActionButton