useButton Hook

The useButton hook provides a flexible way to manage button state and behavior in your React components. It handles both controlled and uncontrolled modes, loading states, and manages accessibility attributes.

Import

import { useButton } from 'react-button-pro';

Basic Usage

function CustomButton() {
  const buttonProps = useButton({
    isLoading: false,
    isDisabled: false,
    onClick: () => console.log('Clicked'),
  });
 
  return (
    <button {...buttonProps}>
      Click me
    </button>
  );
}

Features

State Management

Handles loading, disabled, and active states

Event Handling

Manages click events and keyboard interactions

Accessibility

Provides proper ARIA attributes and keyboard support

Type Safety

Full TypeScript support with proper type definitions

API Reference

Hook Parameters

interface UseButtonProps {
  isLoading?: boolean;
  isDisabled?: boolean;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
  type?: 'button' | 'submit' | 'reset';
  'aria-label'?: string;
  'aria-describedby'?: string;
  'aria-pressed'?: boolean;
  'aria-expanded'?: boolean;
  'aria-controls'?: string;
}

Return Value

interface UseButtonReturn {
  disabled: boolean;
  role: 'button';
  type: 'button' | 'submit' | 'reset';
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
  'aria-disabled': boolean;
  [key: string]: any;
}

Examples

With Loading State

function LoadingButton() {
  const [isLoading, setIsLoading] = useState(false);
  
  const buttonProps = useButton({
    isLoading,
    onClick: async () => {
      setIsLoading(true);
      await someAsyncOperation();
      setIsLoading(false);
    }
  });
 
  return (
    <button {...buttonProps}>
      {isLoading ? 'Loading...' : 'Click me'}
    </button>
  );
}

With Custom Events

function CustomEventButton() {
  const buttonProps = useButton({
    onClick: (e) => {
      e.preventDefault();
      console.log('Clicked');
    },
    onKeyDown: (e) => {
      if (e.key === 'Enter') {
        console.log('Enter pressed');
      }
    }
  });
 
  return (
    <button {...buttonProps}>
      Custom Events
    </button>
  );
}

With ARIA Attributes

function AccessibleButton() {
  const buttonProps = useButton({
    'aria-label': 'Close dialog',
    'aria-describedby': 'dialog-desc',
    'aria-expanded': false
  });
 
  return (
    <button {...buttonProps}>
      Close
    </button>
  );
}

Best Practices

State Management:
- Handle loading states appropriately
- Manage disabled state consistently
- Consider component lifecycle
- Clean up event listeners
Event Handling:
- Prevent default when needed
- Handle keyboard events
- Consider touch events
- Manage event bubbling
Accessibility:
- Provide descriptive ARIA labels
- Support keyboard navigation
- Handle focus management
- Consider screen readers
Performance:
- Memoize callbacks when needed
- Avoid unnecessary re-renders
- Clean up side effects
- Use proper dependency arrays

useButtonGroup - For managing button group state
useRipple - For adding ripple effects to buttons
useKeyboardFocus - For enhanced keyboard navigation

useButton

State Management

Event Handling

Accessibility

Type Safety

On this page