useButton

Provides the behavior and accessibility implementation for a button component. Handles mouse, keyboard, and touch interactions, focus behavior, and ARIA props for both native button elements and custom element types.

Example

Button.tsx

Button.css

Example

Button.tsx

Button.css

import {Button} from './Button';

<Button onPress={() => alert('Button pressed!')}>Press me</Button>

API

useButton(props: AriaButtonOptions<ElementType>, ref: RefObject<any>): ButtonAria<HTMLAttributes<any>>

AriaButtonProps

Name	Type	Default
`isDisabled`	`boolean`	Default: —
Whether the button is disabled.
`children`	`ReactNode`	Default: —
The content to display in the button.
`target`	`string`	Default: —
The target window for the link.
`elementType`	`ElementType \| JSXElementConstructor<any>`	Default: `'button'`
The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.

ButtonAria

Name	Type
`buttonProps`	`T`
Props for the button element.
`isPressed`	`boolean`
Whether the button is currently pressed.