Skip to contentShopify logoPolaris

Common actions

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

Content

Actions should always clearly communicate their purpose by using a text label, an icon, or a combination of both.

See the actionable language guidelines for more detail.

An image showing icons used for common actions add, edit, delete, remove, copy.
Do

Use icons in place of text for common actions. Leveraging pre-existing knowledge will improve clarity and help reduce clutter, since these icons require no text label.

An image showing a list with a short label that describes the content in the list: "Add payment method".
Do

Keep labels short and concise.

An image showing a list with a long label: "Add options like size and color.
Don't

Add unnecessary words to the action label. Instead, use context and placement to communicate the outcome of an action.

An image showing two actions with the icon aligned to the left of the label.
Do

Place icons to the left of an action’s label.

An image showing three buttons with the icons representing the action verb.
Do

Use an icon that represents the verb when a label includes multiple words.

An image showing two buttons: "Print shipping label" and "Send account invite" with both using specialized icons to represent complex concepts.
Do

Use the appropriate icon to reinforce the message when referring to a specialized or complex action.

An image showing text labels following the verb noun formatting and highlighting what the object type is for each; "Add customer", "Edit address", "Delete products", "Copy email".
Do

Reflect the object type in the action’s label using the verb + noun format.

An image showing a list of actions with the most common actions paired with an icon and appropriate sytling.
Do

Use an icon along with the text label for common actions displayed within an action list.

Visual hierarchy

Style and placement help visually communicate the importance of an action on the page.

An image showing secondary and tertiary buttons in a card and a list.
Do

Use secondary or tertiary buttons to give actions less emphasis while making them accessible for as many users as possible.

Actions in editors need an additional level of emphasis to attract merchant attention and establish hierarchy between elements.

An image showing add actions in the Online Store Editor.
Do

Use the emphasis color role for actions in editors.

An image showing a card with primary and secondary buttons in the card footer.
Do

Use primary and secondary buttons to help merchants identify which action they’ll most likely want within a given view. See card layout patterns for more information.

An image showing a table using remove icon only tertiary buttons for each table row.
Do

Use a tertiary icon button for items and rows in a list or table.

An image showing a card with ten different actions using the secondary button style.
Don't

Avoid using more than two shaped or filled buttons within a card as they can degrade hierarchy and cause confusion.

Interactivity

Elements that are visually similar behave consistently throughout the interface. Consistency in behavior reduces confusion and cognitive load for merchants.

An image showing a variety of button styles in different states.
An image showing visible focus rings when interacting using the keyboard.
Do

Make focus rings visible when a merchant is using the keyboard to interact with the UI.

Don't

Make focus rings visible when a merchant is using a cursor to interact with elements.

Don't

Use disabled styles for elements that the merchant can interact with.

An image showing a text button using the emphasis color as the only indicator of interactivity.
Don't

Rely on color alone to indicate interactivity.

Platform considerations

Use interactions native to the device and type of input the merchant is using.

Desktop

Actions on desktop and mobile should consider both cursor and touch interactions, but the primary interaction for the desktop is cursor-based. Take advantage of added real-estate and interactions by using progressive disclosure to expose actions in context when the merchant needs them.

An image of two cards with items displaying actions on hover.
Do

Show list item actions like edit, delete, copy, and remove on hover.

Mobile

The primary interaction for the mobile is touch-based. Optimize for touch enabled devices by considering placement and target size of actions.

An image showing tags on desktop and responsive web.

    On this page