FrameworkStyle

useButton

Hook for creating accessible button components with keyboard and pointer interaction

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 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 

import { useButton } from '@videojs/react';
import { useState } from 'react';

import './BasicUsage.css';

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="react-use-button-basic">
      <button ref={buttonRef} {...getButtonProps()} className="react-use-button-basic__button" disabled={disabled}>
        Activated {count} times
      </button>
      <label className="react-use-button-basic__label">
        <input type="checkbox" checked={disabled} onChange={(e) => setDisabled(e.target.checked)} />
        Disabled
      </label>
    </div>
  );
}

API Reference

Parameters

Parameter Type Default
params* UseButtonParameters —

Return Value

Property Type
getButtonProps function
buttonRef Ref<HTMLElement>

Video.js is a free and open source HTML5 video player.
The term VIDEO.JS is a registered trademark of Brightcove Inc.
© 2010–2026 Video.js contributors  |  Sponsored by Mux

VideoJS