Buttons

Toggle Button

This component is a generic button for displaying on and off states on press.

API Reference

HTMLAttributes<HTMLButtonElement>

Ref<HTMLButtonElement>

A toggle button is a two-state button that can be either off (not pressed) or on (pressed).

import { ToggleButton, type ToggleButtonProps } from "@vidstack/react"; <ToggleButton aria-label="...">
  <OnIcon />
  <OffIcon />
</ToggleButton> 

/* Example. */
.component[data-foo] {}

Name	Description
`data-pressed`	Whether the toggle is in an "on" state (pressed).
`aria-pressed`	Same as `data-pressed` but `"true"` or `"false"`.
`data-focus`	Whether button is being keyboard focused.
`data-hocus`	Whether button is being keyboard focused or hovered over.