---
title: PiPButton
frameworkTitle:
  html: media-pip-button
description: Accessible picture-in-picture toggle button with keyboard support and state reflection
---

import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import Demo from "@/components/docs/demos/Demo.astro";

{/* React demos */}
import BasicUsageDemoReact from "@/components/docs/demos/pip-button/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/pip-button/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/pip-button/react/css/BasicUsage.css?raw";

{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/pip-button/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/pip-button/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/pip-button/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/pip-button/html/css/BasicUsage.ts?raw";

## Anatomy

<FrameworkCase frameworks={["react"]}>
```tsx
<PiPButton />
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```html
<media-pip-button></media-pip-button>
```
</FrameworkCase>

## Behavior

Toggles picture-in-picture (PiP) mode. Detects platform support through `availability` — when PiP is `"unsupported"`, the toggle does nothing.

## Styling

You can style the button based on PiP state:

```css
/* In PiP mode */
media-pip-button[data-pip] {
  background: red;
}
```

Consider hiding the button when unsupported:

```css
media-pip-button[data-availability="unsupported"] {
  display: none;
}
```

## Accessibility

Renders a `<button>` with an automatic `aria-label`: "Enter PiP" or "Exit PiP". Override with the `label` prop. Keyboard activation: <kbd>Enter</kbd> / <kbd>Space</kbd>.

## Examples

### Basic Usage

<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
      { title: "App.css", code: basicUsageReactCss, lang: "css" },
    ]}>
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "index.html", code: basicUsageHtml, lang: "html" },
      { title: "index.css", code: basicUsageHtmlCss, lang: "css" },
      { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
    ]}>
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
</FrameworkCase>

<ApiReference component="PipButton" />