Buttons

PIP Button

This component is used to enter and exit picture-in-picture mode 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 button for toggling the picture-in-picture (PIP) mode of the player.

import { PIPButton, type PIPButtonProps } from "@vidstack/react";import { PIPButton, type PIPButtonProps } from "@vidstack/react";const isActive = useMediaState('pictureInPicture');

<PIPButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</PIPButton>const isActive = useMediaState('pictureInPicture');

<PIPButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</PIPButton>

Prop Type Default

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

asChild

boolean

false

children

ReactNode

null

disabled

boolean

undefined

Data Attributes

Name	Description
`data-active`	Whether picture-in-picture mode is active.
`data-supported`	Whether picture-in-picture mode is available.