useButton

The useButton hook allows you to create accessible button components that behave consistent across devices and browsers. It does this for mouse, touch and keyboard interactions. Additionally, the useButton hook provides your component with proper focus behaviours and ARIA accessibility props.

Features

• Native HTML <button> support.
• Custom element type support like <a>.
• Consistent handling of mouse, touch and keyboard events.
• Cross browser support and normalization.
• Full ARIA accessibility support.

Synergy

• For proper hover behaviour combine with useHover.

Anatomy

A button is an element that can be clicked to perform a specific action. Usually it includes a text-based label as well as an icon to describe the action in more detail.

If the button does not include a textual label, such as a button that only contains an icon, an aria-label or aria-labelledby prop need to be provided to support assistive technology such as screen readers.

In addition to supporting mouse and touch clicks, the user can interact with a button through the Space or Enter keys. However, please keep in mind that if you provide an onClick handler, any method you provide will only be invoked through mouse click events. If you want to support keyboard presses and mouse clicks, please provide an onPress property.

Example

function Example() {
  const ref = useRef(null);

  const handlePress = () => {
    window.alert('The button was pressed!');
  };

  const {buttonProps, buttonState} = useButton({onPress: handlePress}, ref);

  return (
    <button {...buttonProps} ref={ref} type='submit'>
      Submit
    </button>
  );
}

function Example() {
  const ref = useRef(null);

  const handlePress = () => {
    window.alert('The button was pressed!');
  };

  const { buttonProps, buttonState } = useButton({
    onPress: handlePress
  }, ref);

  return (
    <button {...buttonProps} ref={ref} type="submit">
      Submit
    </button>
  );
}

function Example() {
  const ref = useRef(
    null
  );

  const handlePress =
    () => {
      window.alert(
        'The button was pressed!'
      );
    };

  const {
    buttonProps,
    buttonState
  } = useButton({
    onPress: handlePress
  }, ref);

  return (
    <button
      {...buttonProps}
      ref={ref}
      type="submit"
    >
      Submit
    </button>
  );
}