Looking for the old docs? Go here

Buttons

Toggle Button

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

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>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
defaultPressed
boolean
false
disabled
boolean
false
/* Example. */
.component[data-foo] {}
NameDescription
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.