Button

A button allows a user to perform an action, with mouse, touch, and keyboard interactions.

import {Button} from './Button';

<Button>Press me</Button>

Events

Use the onPress prop to handle interactions via mouse, keyboard, and touch. This is similar to onClick, but normalized for consistency across browsers, devices, and interaction methods. Read our blog post to learn more.

The onPressStart, onPressEnd, and onPressChange events are also emitted as the user interacts with the button. Each of these handlers receives a PressEvent, which provides information about the target and interaction method. See usePress for more details.

import {Button} from './Button';
import {useState} from 'react';

function Example() {
  let [pointerType, setPointerType] = useState('');

  return (
    <>
      <Button
        onPressStart={e => setPointerType(e.pointerType)}
        onPressEnd={() => setPointerType('')}>
        Press me
      </Button>
      <p>{pointerType ? `You are pressing the button with a ${pointerType}!` : 'Ready to be pressed.'}</p>
    </>
  );
}

Pending

Use the isPending prop to display a pending state. Pending buttons remain focusable, but are otherwise disabled. Pending state changes are announced to assistive technologies.

import {Button} from './Button';
import {useState} from 'react';

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

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

Link buttons

The Button component always represents a button semantically. To create a link that visually looks like a button, use the Link component instead. You can reuse the same styles you apply to the Button component on the Link.

import {Link} from 'react-aria-components';

<Link className="react-aria-Button" href="https://adobe.com/" target="_blank">
  Adobe
</Link>

API

Default className: react-aria-Button