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.

Fullscreen bar component examples

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

import {
  Badge,
  ButtonGroup,
  FullscreenBar,
  Button,
  Text,
} 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 tone="info">Draft</Badge>
        <div style={{marginLeft: '1rem', flexGrow: 1}}>
          <Text variant="headingLg" as="p">
            Page title
          </Text>
        </div>
        <ButtonGroup>
          <Button onClick={() => {}}>Secondary Action</Button>
          <Button variant="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>
        )}
        <Text variant="headingLg" as="p">
          Page content
        </Text>
      </div>
    </div>
  );
}

Props

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.

Related components

  • To provide quick, at-a-glance feedback on the outcome of an action, use the App Bridge Toast API component.
  • To indicate to merchants that a page is loading or an upload is processing, use the App Bridge Loading API component.

    On this page