---
title: FullscreenButton
frameworkTitle:
  html: media-fullscreen-button
description: Accessible fullscreen toggle button with keyboard support and state reflection
---

import ComponentReference from "@/components/docs/api-reference/ComponentReference.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/fullscreen-button/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.css?raw";

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

## Anatomy

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

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

## Behavior

Toggles fullscreen mode. The button derives two state hooks from `availability`:

- **`disabled`** (`true` until fullscreen is available, or when the `disabled` prop is set) — sets `aria-disabled="true"` and `data-disabled`. A prop-disabled, available button stays focusable but does not activate.
- **`hidden`** (`true` while fullscreen is `"unavailable"` or `"unsupported"`) — applies the native HTML `hidden` attribute on the custom element; the React component returns `null`.

## Styling

You can style the button based on fullscreen state:

<FrameworkCase frameworks={["html"]}>
```css
/* In fullscreen */
media-fullscreen-button[data-fullscreen] {
  background: red;
}

/* Non-interactive (disabled prop) */
media-fullscreen-button[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
```
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
React renders a `<button>` element. Add a `className` to style it:

```css
/* In fullscreen */
.fullscreen-button[data-fullscreen] {
  background: red;
}

/* Non-interactive (disabled prop) */
.fullscreen-button[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
```
</FrameworkCase>

The button remains hidden until fullscreen is available. The HTML element receives the native `hidden` attribute, and the React component returns `null`. No extra CSS is required.

## Accessibility

Renders a `<button>` with an automatic `aria-label`: "Enter fullscreen" or "Exit fullscreen". 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>

<ComponentReference component="FullscreenButton" />
