Skip to contentShopify logoPolaris

Common actions

Standardizing recurring actions gives merchants a predictable way to complete common tasks.
OverviewBest practices

Add

Add inserts existing or new objects, items, or data into the UI. For example, adding an item to a list or adding an element into a layout.

A collection of examples of add actions in the page header, in a list, and in a table. Each button has a different level of emphasis and placement to create visual hierarchy.
Two tertiary buttons with the circle plus icon and an Add object label.
Do

Default to the circle plus icon for add actions.

Two secondary buttons with the plus icon and an Add object label.
Do

Use the plus icon in secondary and primary button variants. The plus icon supports the action while balancing the weight of the filled shaped element with the rest of the UI.

An image of two cards with a few list items and the add action at the bottom.
Do

Place add actions at the bottom of a list unless the list will likely be long. For example, a table or list of selected resources.

A select list of options with an add option at the botto of the list, outside of the scrollable area.
Do

Place add actions at the bottom of a list of selectable options. For example, when picking a collection or tag to add to a product. Keep the action visible by placing it outside of the scrollable area.

Two cards each with long lists of resources in a viewable state with a main add action in the list header.
Do

Place add actions in the header in long lists of resources.

A table of locations with the add action in the card header above the table.
Do

Place add actions associated with a table in the card, table, or page header. Use a secondary button when "Add" is the main action for a card that has a standalone table or list as its content.

A table of products with an add action at the bottom of the table.
Don't

Place add actions at the bottom of a table. This risks them getting lost and can cause confusion.

An image of the admin UI with an "Add product" button that triggers and intermediary modal.
Don't

Include intermediary steps during the creation of a resource. Place these configuration options on the newly created page itself.

Copy

Copy duplicates selected content and stores it temporarily in the merchant’s clipboard.

The polaris copy icon in a neutral and hover state with a “Copy item” tooltip.
Do

Use the clipboard icon with a tertiary icon button for copying a string of text.

The polaris link icon in a neutral and hover state with a “Copy link" tooltip.
Do

Use the link icon with a tertiary icon button for copying deep links and URLs.

Do

Show copy actions on hover for cursor interactions. See the copy to clipboard example.

Do

Provide feedback inline using a confirmation check icon post-click or tap.

Do

Use a confirmation “copied to clipboard” toast message when the action is within an action list.

Delete

Delete destroys an item or object and completely erases data from the system.

A row of buttons in different variations.
A list of action with a delete action at the bottom using the destructive styling along with the "delete" icon.
Do

Use the delete icon with a destructive item in an action list.

A list of action with a delete action at the bottom using the destructive styling along with the "delete" icon.
Do

Always place delete actions at the bottom of an action list.

Two icon only delete buttons with one in a hover state with a "Delete item" tooltip displayed.
Do

Use the delete icon for delete actions in lists.

An image of bulk action filters in an index table with a delete action using the "x" icon. There are add section actions at the end of each section. The actions use the text-emphasis color token.
Don't

Use the x icon for delete actions.

A list of menu items with each item displaying a delete icon using the tertiary icon button style.
Do

Place list item delete actions inline to the right. Default to a tertiary button with the delete icon.

Do

Display list item delete actions on hover when using a cursor.

A list of menu items with each item displaying a delete icon using the tertiary critical icon button style.
Don't

Don’t overuse critical styled buttons within a single view as it can dilute the meaning and importance of the action.

An image of a modal with two primary buttons. Save uses the default primary button style and delete uses the primary critical button style.
Don't

Don’t pair primary critical buttons with other button variants and tones that look jarring and create visual competition between elements.

Edit

Edit actions allow merchants to make changes to a piece of content or object that already exists in the system.

An image of two cards with edit actions in the card header and within a row of items.
Do

Use edit for modifying, updating or managing an item or object.

An image showing the "edit" icon in a neutral and hover state. The hover state displays a tooltip with "Edit item" as the label.
Do

Default to the edit icon with a tertiary icon button.

A card with a list of locations. Each location item has an edit button inline to the right using the secondary button style.
Caution

Avoid using too many buttons with filled or shaped containers in close proximity to each other, as they will make the interface feel cluttered and confusing.

More actions

More actions display available or additional actions for element or item.

A card with a more actions menu in the header in a hover state with a tooltip with a "Show actions" label.
A list of reports with the "menu horizontal" icon inline to the right to indicate the item has available actions.
Do

Use the menu horizontal icon to indicate available or more actions for an item.

An image shoiwng the "menu horizontal" icon in a secondary and tertiray icon button.
Do

Use a secondary or tertiary icon button.

An image of a card with more actions in the header.
Don't

Group actions in the card header by default. Instead, consider alternative solutions that place actions in context or appear within a given flow or task as needed. View card layout patterns for more information.

Pin

Pin sticks an object to an easily accessible location within the UI. Pinning allows merchants to keep important items available to quickly access later.

An image showing a list of reports with the "pin" icon displayed inline to the right to indicate each item can be pinned.
Do

Use the pin icon with a tertiary icon button to communicate an item can be pinned.

An image of a list of reports with pinned items at the top using the "pin filled" icon to indicate they are pinned.
Do

Use the pin filled icon on an item to show that it has been pinned.

An image of metafields with pinned and unpinned items grouped together.
Do

Placed pinned objects together to add clarity to the relationship between items.

An image of a list of reports with pinned reports at the top.
Do

Make it easy to unpin an item.

Remove

This action removes an item from a list or breaks the relationship between objects.

When an object is removed, it is taken out of a given context without deleting it from the system. For example, if a product is removed from a collection, it still exists and can be easily added back.

An image showing a table of products in a collection. Each table row displays a product with an option to remove the product displayed inline to the right using the "x" icon.
An image showing the x icon in a neutral and hover state. The hover state displays a tooltip with "Remove item" as the label.
Do

Use the x icon with a tertiary icon button.

A list of collections with one item in a hover state with the option to remove it displayed inline to the right using the "x" icon.
Do

Show remove actions on hover when the merchant is using a cursor to navigate.

An image of a card with a group of tags. One of the tags is in a hover state with the remove action displayed to the right using the "delete" icon.
Don't

Use the delete icon for remove actions.

    On this page