Looking for the old docs? Go here

Buttons

Live Button

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

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";
import { LiveButton, type LiveButtonProps } from "@vidstack/react";
<LiveButton>
  <LiveIcon />
</LiveButton>
<LiveButton>
  <LiveIcon />
</LiveButton>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
disabled
boolean
false
CallbackType
onMediaLiveEdgeRequest
function
NameDescription
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.