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.

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`defaultPressed`	`boolean`	`false`
`disabled`	`boolean`	`false`

Data Attributes

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.