Looking for the old docs? Go here

Buttons

Toggle Button

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

This page is not ready yet, we’re working on getting it done for the 1.0 release. It should be available soon! In the meantime, feel free to use the API reference tables below.

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";
import { ToggleButton, type ToggleButtonProps } from "@vidstack/react";
<ToggleButton aria-label="...">
  <OnIcon />
  <OffIcon />
</ToggleButton>
<ToggleButton aria-label="...">
  <OnIcon />
  <OffIcon />
</ToggleButton>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
defaultPressed
boolean
false
disabled
boolean
false
NameDescription
data-pressedWhether the toggle is in an "on" state (pressed).
aria-pressedSame as `data-pressed` but `"true"` or `"false"`.
data-focusWhether button is being keyboard focused.
data-hocusWhether button is being keyboard focused or hovered over.