Skip to contentShopify logoPolaris

Contextual save bar

The contextual save bar tells merchants their options once they have made changes to a form on the page. This component is also shown while creating a new object like a product or customer. Merchants can use this component to save or discard their work.

Use the save action to provide an opportunity to save changes. Use the discard action to allow merchants the option to discard their changes. Use the message to provide helpful context on the nature of those changes.

import {Frame, ContextualSaveBar} from '@shopify/polaris';
import React from 'react';

function Example() {
  return (
    <div style={{height: '250px'}}>
      <Frame
        logo={{
          width: 124,
          contextualSaveBarSource:
            'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-gray.svg?6215648040070010999',
        }}
      >
        <ContextualSaveBar
          message="Unsaved changes"
          saveAction={{
            onAction: () => console.log('add form submit logic'),
            loading: false,
            disabled: false,
          }}
          discardAction={{
            onAction: () => console.log('add clear form logic'),
          }}
        />
      </Frame>
    </div>
  );
}

Props

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

interface ContextualSaveBarProps
alignContentFlush?boolean

Extend the contents section to be flush with the left edge.

message?string

Accepts a string of content that will be rendered to the left of the actions.

saveAction?

Save or commit contextual save bar action with text defaulting to 'Save'.

discardAction? &

Discard or cancel contextual save bar action with text defaulting to 'Discard'.

fullWidth?boolean

Remove the normal max-width on the contextual save bar.

contextControl?ReactNode

Accepts a component that is used to help users switch between different contexts.

secondaryMenu?ReactNode

Accepts a node that is rendered to the left of the discard and save actions.

Required components

The contextual save bar component must be wrapped in the frame component.

Best practices

The contextual save bar component should:

  • Become visible when a form on the page has unsaved changes
  • Be used to save or discard in-progress changes
  • Provide brief and helpful context on the nature of in-progress changes
  • Save all changes on the page. Avoid scenarios where multiple forms on a single page can be edited at the same time. If specific sections of a page need to be independently editable, use an Edit button to launch a modal dialog for each section where changes can be made and saved.

Content guidelines

Messages in the contextual save bar component should be informative, clear, and concise. They should follow the {adjective}+{noun} pattern. Don’t use full sentences.

The standard message content is

  • “Unsaved changes” when editing existing content
  • “Unsaved {resource name}” when creating a new object

Do

  • Unsaved changes
  • Unsaved product

Don’t

  • You have unsaved changes
  • Red and white striped shirt not yet saved

Actions in the contextual save bar component should consist of a strong verb that encourages action. They should not include a noun.

Do

  • Save
  • Discard

Don’t

  • Save changes
  • Discard changes