Button

Buttons allow users to perform an action. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

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

<Button>Save</Button>

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 {Button} from '@react-spectrum/s2';
import {useState} from 'react';

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

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

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 {Button} from '@react-spectrum/s2';
import {useState} from 'react';

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

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

API

<Button>
  <Icon />
  <Text />
</Button>

Button