---
title: FullscreenButton
frameworkTitle:
  html: fullscreen-button
description: A button component for toggling fullscreen mode
---

import { FullscreenButtonDemo } from '@/examples/react/FullscreenButton/FullscreenButtonDemo';
import componentModuleStr from '@/examples/react/FullscreenButton/BasicFullscreenButton.tsx?raw';
import cssModuleStr from '@/examples/react/FullscreenButton/FullscreenButton.module.css?raw';
import htmlStr from '@/examples/html/fullscreen-button/snippet.html?raw';
import htmlCssStr from '@/examples/html/fullscreen-button/fullscreen-button.css?raw';
import htmlJsStr from '@/examples/html/fullscreen-button/fullscreen-button.js?raw';
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
import ServerCode from '@/components/Code/ServerCode.astro';
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';

## Features

- Automatically switches icons based on fullscreen state
- Works with browser Fullscreen API
- Falls back gracefully when fullscreen not supported
- Accessible keyboard navigation

## Example

<FrameworkCase frameworks={["react"]}>
  <TabsRoot client:visible>
    <TabsList client:visible label="React implementation">
      <Tab client:visible value="component" initial>Component</Tab>
      <Tab client:visible value="css">CSS Module</Tab>
    </TabsList>
    <TabsPanel client:visible value="component" initial>
      <ServerCode code={componentModuleStr} lang="tsx" />
    </TabsPanel>
    <TabsPanel client:visible value="css">
      <ServerCode code={cssModuleStr} lang="css" />
    </TabsPanel>
    <FullscreenButtonDemo client:visible />
  </TabsRoot>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <TabsRoot client:visible>
    <TabsList client:visible label="HTML implementation">
      <Tab client:visible value="html" initial>HTML</Tab>
      <Tab client:visible value="css">CSS</Tab>
      <Tab client:visible value="javascript">JS</Tab>
    </TabsList>
    <TabsPanel client:visible value="html" initial>
      <ServerCode code={htmlStr} lang="html" />
    </TabsPanel>
    <TabsPanel client:visible value="css">
      <ServerCode code={htmlCssStr} lang="css" />
    </TabsPanel>
    <TabsPanel client:visible value="javascript">
      <ServerCode code={htmlJsStr} lang="js" />
    </TabsPanel>
    <FullscreenButtonDemo client:visible />
  </TabsRoot>
</FrameworkCase>

## Data Attributes

The FullscreenButton automatically sets data attributes based on fullscreen state:

- `data-fullscreen` - Present when in fullscreen, absent when not

Use these attributes for state-based styling in your CSS.

<FrameworkCase frameworks={["react"]}>

## Props

All standard button props are supported, plus:

| Prop | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | Button content (typically icons) |
| `className` | `string` | CSS class name |

</FrameworkCase>

## Accessibility

- Automatically includes proper ARIA labels
- Keyboard accessible (Space/Enter)
- Announces fullscreen state changes to screen readers

## Browser Support

The FullscreenButton uses the standard Fullscreen API, which is supported in all modern browsers.