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 {
} from '@shopify/polaris';
import {useState, useCallback} from 'react';

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

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

  const fullscreenBarMarkup = (
    <FullscreenBar onAction={handleActionClick}>
          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
          <Button onClick={() => {}}>Secondary Action</Button>
          <Button variant="primary" onClick={() => {}}>
            Primary Action

  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


interface FullscreenBarProps
onAction() => void

Callback when back button is clicked.


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 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