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.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Slots
No slots found for this component, run `yarn gen:docs` to generate component meta first.
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.
- 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.
- Scannable: avoid unnecessary words and articles such as the, an, or a.
Related components
- To add actions to the top of a page, see the page component’s action props
- To create a call to action within the context of other page content, use the button component
- To let merchants move through a collection of items that spans multiple pages, see the pagination component