# useButton

Hook for creating accessible button components with keyboard and pointer interaction

## Import

```tsx
import { useButton } from "@videojs/react";
```

`useButton` provides button behavior including keyboard activation and accessibility checks. It returns a `getButtonProps` function for spreading onto a `<button>` element and a `buttonRef` for validation.

`getButtonProps` merges internal button props (click/keyboard handlers, disabled state) with any external props you pass in. Use [`renderElement`](https://videojs.org/docs/framework/react/reference/api/render-element) to render the button with state-driven props and render prop support. In development mode, `buttonRef` warns if the rendered element is not a `<button>`.

## Examples

### Basic Usage

**App.tsx**

```tsx
import { useButton } from '@videojs/react';
import type { Ref } from 'react';
import { useState } from 'react';

export default function BasicUsage() {
  const [count, setCount] = useState(0);
  const [disabled, setDisabled] = useState(false);

  const { getButtonProps, buttonRef } = useButton({
    displayName: 'ActivateButton',
    onActivate: () => setCount((c) => c + 1),
    isDisabled: () => disabled,
  });

  return (
    <div className="demo">
      <button ref={buttonRef as Ref<HTMLButtonElement>} {...getButtonProps()} className="button" disabled={disabled}>
        Activated {count} times
      </button>
      <label className="label">
        <input type="checkbox" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} />
        Disabled
      </label>
    </div>
  );
}
```

**App.css**

```css
.demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.button {
  align-self: flex-start;
  padding: 8px 20px;
  font-variant-numeric: tabular-nums;
  color: #111827;
  cursor: pointer;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: opacity 0.2s;
}

.button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.875rem;
  color: #6b7280;
}
```

## API Reference

`useButton(params): UseButtonReturnValue`

### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `params` (required) | `{ displayName: string; onActivate: ((event: UIEvent, source: ButtonActivationSource) => void); isDisabled: (() => boolean) }` | — | Button configuration with activation handler and disabled check. |

### Return Value

| Property | Type |
| --- | --- |
| `getButtonProps` | `((externalProps?: ComponentPropsWithRef<'button'>) => ComponentPropsWithRef<'button'>)` |
| `buttonRef` | `Ref<HTMLElement>` |

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt