useButtonBase

A base hook for all button-like components (e.g., Button, IconButton, ToggleButton). It centralizes focus handling, keyboard/mouse interaction, disabled/loading guards, optional toggle behavior, and ARIA/data attributes. Styling is not enforced.

Import

import { useButtonBase } from "@libdev-ui/base/hooks";

API

useButtonBase(props)

Props:

• disabled?: boolean
• loading?: boolean
• autoFocus?: boolean
• preventFocusOnPress?: boolean
• toggleable?: boolean
• pressed?: boolean (controlled)
• defaultPressed?: boolean (uncontrolled)
• onPressedChange?: (pressed: boolean) => void
• id?: string, type?: "button" | "submit" | "reset", name?: string, value?: string
• Events: onClick, onFocus, onBlur, onKeyDown, onKeyUp, onMouseDown, onMouseUp
• buttonRef?: React.Ref<HTMLButtonElement>

Return:

• focused: boolean
• focusVisible: boolean
• pressed: boolean
• interactive: boolean — true when not disabled/loading
• buttonRef: RefObject<HTMLButtonElement>
• focus(): void, blur(): void, setPressed(next: boolean): void
• getRootProps(): DataAttributes
• getButtonProps(extra?): ButtonHTMLAttributes<HTMLButtonElement>

Example (custom component)

function IconButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  const { getRootProps, getButtonProps } = useButtonBase(props);

  return (
    <span {...getRootProps()} className="icon-button-root">
      <button {...getButtonProps()} className="icon-button">
        {props.children}
      </button>
    </span>
  );
}

Accessibility: useButtonBase adds aria-disabled, aria-busy, and when toggleable is enabled — aria-pressed.