@react-aria/button

Basic Button

This code demonstrates how to create a basic accessible button using the useButton hook from @react-aria/button. The useButton hook provides the necessary props to ensure the button is accessible.

import { useButton } from '@react-aria/button';
import { useRef } from 'react';

function MyButton(props) {
  let ref = useRef();
  let { buttonProps } = useButton(props, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}

Button with Event Handling

This example shows how to handle events with the useButton hook. The onPress event is used to trigger an alert when the button is pressed.

import { useButton } from '@react-aria/button';
import { useRef } from 'react';

function MyButton(props) {
  let ref = useRef();
  let { buttonProps } = useButton({
    ...props,
    onPress: () => alert('Button pressed!')
  }, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}

Disabled Button

This code demonstrates how to create a disabled button using the useButton hook. The isDisabled property ensures that the button is not interactive.

import { useButton } from '@react-aria/button';
import { useRef } from 'react';

function MyButton(props) {
  let ref = useRef();
  let { buttonProps } = useButton({
    ...props,
    isDisabled: true
  }, ref);

  return (
    <button {...buttonProps} ref={ref} disabled>
      {props.children}
    </button>
  );
}