Skip to contentShopify logoPolaris

Page actions

Page actions let merchants take key actions at the bottom of specific pages in the interface. This is important because sometimes the primary call to action is hard to access when merchants are at the bottom of a page.

Used on a resource page (such as an individual order or product page) to let merchants take key actions at the bottom of the page. Usually, the primary action is Save and the secondary action is Delete.

import {PageActions} from '@shopify/polaris';
import React from 'react';

function PageExample() {
  return (
    <PageActions
      primaryAction={{
        content: 'Save',
      }}
      secondaryActions={[
        {
          content: 'Delete',
          destructive: true,
        },
      ]}
    />
  );
}

Not all page actions require a secondary action.

import {PageActions} from '@shopify/polaris';
import React from 'react';

function PageExample() {
  return (
    <PageActions
      primaryAction={{
        content: 'Save',
      }}
    />
  );
}

Use to create a custom primary action.

import {PageActions, Button} from '@shopify/polaris';
import React from 'react';

function PageExample() {
  return (
    <PageActions
      primaryAction={
        <Button
          primary
          connectedDisclosure={{
            accessibilityLabel: 'Other save actions',
            actions: [{content: 'Save as draft'}],
          }}
        >
          Save
        </Button>
      }
      secondaryActions={[
        {
          content: 'Delete',
          destructive: true,
        },
      ]}
    />
  );
}

Use to create a custom secondary action.

import {PageActions, Button} from '@shopify/polaris';
import React from 'react';

function PageExample() {
  return (
    <PageActions
      primaryAction={{
        content: 'Save',
      }}
      secondaryActions={
        <Button
          connectedDisclosure={{
            accessibilityLabel: 'Other save actions',
            actions: [{content: 'Save as draft'}],
          }}
        >
          Save
        </Button>
      }
    />
  );
}

Props

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

interface PageActionsProps
primaryAction?any

The primary action for the page.

secondaryActions?any

The secondary actions for the page.

Best practices

Page actions should:

  • Include a single primary action on the right. It should be the same as the primary action that shows in the title bar at the top of the page.
  • Include a maximum of two secondary actions, but doesn’t have to include any secondary actions.

Content guidelines

Call to action buttons

Buttons should be:

  • Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive merchants by mislabeling a button.

Do

  • Create order
  • Buy shipping label

Don’t

  • New order
  • Buy
  • Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.

Do

  • Activate Apple Pay
  • View shipping settings

Don’t

  • Try Apple Pay
  • View your settings
  • Scannable: avoid unnecessary words and articles such as the, an, or a.

Do

  • Add menu item

Don’t

  • Add a menu item