Skip to contentShopify logoPolaris

Fullscreen bar

The Fullscreen bar is a header component that should be presented at the top of an app when it is in fullscreen mode. This is designed to ensure a uniform placement for a button to exit that mode. The Fullscreen bar can be customized by adding children.

Use to provide structure for the top of an application while in fullscreen mode.

import {
  Badge,
  ButtonGroup,
  FullscreenBar,
  DisplayText,
  Button,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';

function FullscreenBarExample() {
  const [isFullscreen, setFullscreen] = useState(true);

  const handleActionClick = useCallback(() => {
    setFullscreen(false);
  }, []);

  const fullscreenBarMarkup = (
    <FullscreenBar onAction={handleActionClick}>
      <div
        style={{
          display: 'flex',
          flexGrow: 1,
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingLeft: '1rem',
          paddingRight: '1rem',
        }}
      >
        <Badge status="info">Draft</Badge>
        <div style={{marginLeft: '1rem', flexGrow: 1}}>
          <DisplayText size="small">Page title</DisplayText>
        </div>
        <ButtonGroup>
          <Button onClick={() => {}}>Secondary Action</Button>
          <Button primary onClick={() => {}}>
            Primary Action
          </Button>
        </ButtonGroup>
      </div>
    </FullscreenBar>
  );

  return (
    <div style={{height: '250px', width: '100%'}}>
      {isFullscreen && fullscreenBarMarkup}
      <div style={{padding: '1rem'}}>
        {!isFullscreen && (
          <Button onClick={() => setFullscreen(true)}>Go Fullscreen</Button>
        )}
        <DisplayText size="small">Page content</DisplayText>
      </div>
    </div>
  );
}

Use this default to show ONLY the Back button.

import {FullscreenBar, Button, DisplayText} from '@shopify/polaris';
import {useState, useCallback} from 'react';

function FullscreenBarExample() {
  const [isFullscreen, setFullscreen] = useState(true);

  const handleActionClick = useCallback(() => {
    setFullscreen(false);
  }, []);

  const fullscreenBarMarkup = <FullscreenBar onAction={handleActionClick} />;

  return (
    <div style={{height: '250px', width: '100%'}}>
      {isFullscreen && fullscreenBarMarkup}
      <div style={{padding: '1rem'}}>
        {!isFullscreen && (
          <Button onClick={() => setFullscreen(true)}>Go Fullscreen</Button>
        )}
        <DisplayText size="small">Page content</DisplayText>
      </div>
    </div>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface FullscreenBarProps
onAction() => void

Callback when back button is clicked.

children?React.ReactNode

Render child elements.

Best practices

The Fullscreen bar component should:

  • Be presented when an App is in fullscreen mode as a means of exiting that mode.
  • Fire an action to exit fullscreen mode.
  • To provide quick, at-a-glance feedback on the outcome of an action, use the toast component.
  • To indicate to merchants that a page is loading or an upload is processing, use the loading component.