Buttons

Live Button

This component is used to display a live indicator and to seek to the live edge on press.

API Reference

HTMLAttributes<HTMLButtonElement>

Ref<HTMLButtonElement>

This component displays the current live status of the stream. This includes whether it's live, at the live edge, or not live. In addition, this component is a button during live streams and will skip ahead to the live edge when pressed.

🚨 This component will have aria-hidden="true" applied when the current stream is not live.

import { LiveButton, type LiveButtonProps } from "@vidstack/react"; <LiveButton>
  <LiveIcon />
</LiveButton> 

Props

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

Callbacks

Callback	Type
`onMediaLiveEdgeRequest`	`function`

Data Attributes

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

Name	Description
`data-edge`	Playback is at the live edge.
`data-hidden`	Whether current media is _not_ live.
`data-focus`	Whether button is being keyboard focused.
`data-hocus`	Whether button is being keyboard focused or hovered over.

Live Button

API Reference

Props

`asChild`

`children`

`disabled`

Callbacks

`onMediaLiveEdgeRequest`

Data Attributes

`data-edge`

`data-hidden`

`data-focus`

`data-hocus`