FullscreenButton

Toggle button for entering/exiting fullscreen presentation mode

Interactive

Usage

import { FullscreenButton } from '@tryvienna/ui'

<FullscreenButton isFullscreen="false" />

Examples

Default

Default

<FullscreenButton isFullscreen="false" />

Fullscreen

Fullscreen

<FullscreenButton isFullscreen="true" />

Interactive

Interactive

{
const [isFullscreen, setIsFullscreen] = useState(false);
return (
  <div className="flex flex-col items-center gap-4">
    <FullscreenButton
      isFullscreen={isFullscreen}
      onClick={() => setIsFullscreen((v) => !v)}
    />
    <span className="text-xs text-muted-foreground">
      {isFullscreen ? 'Fullscreen (click to exit)' : 'Normal (click to enter fullscreen)'}
    </span>
  </div>
);

Custom Class Name

Custom Class Name

<FullscreenButton isFullscreen="false" className="bg-muted p-2 rounded-md" />

API Reference

FullscreenButton

Prop	Type	Default	Description
onClick	() => void	-
isFullscreen	boolean	-

Data Attributes

Component	data-slot
FullscreenButton	"fullscreen-button"