---
title: UX for order actions
description: Learn about the UX guidelines for building your order action menu extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions
  md: >-
    https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions.md
---

ExpandOn this page

* [Button labels](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions.md#button-labels)
* [Triggered actions](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions.md#triggered-actions)
* [Button logic](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions.md#button-logic)

# UX for order actions

Use the following guidelines to build your order action menu extensions.

***

## Button labels

To create a consistent experience across the UI, adhere to the following guidelines for button labels:

* Aim for 2 words (verb and noun).

* Lead with a strong verb that encourages actions.

* Avoid unnecessary words and articles such as “the,” “an,” or “a”.

* Use sentence case.

  The following is an example:

![The example of the button that follows the guidelines says "Cancel order", written in sentence case. The example of the button that doesn't follow the guidelines says "Cancel This Order", written in title case and using "this", which is unnecessary.](https://shopify.dev/assets/assets/images/apps/customer-accounts/order-action-menu-extensions/ux-guidelines-button-labels-BTC4SyDx.png)

***

## Triggered actions

If a `Button` triggers an event with `onPress`, or if the `Button` opens a modal using the `customer-account.order.action.render` extension target, avoid adding the `to` prop. There is no guarantee that the `onPress` event, or the opening of the modal, will finish before the navigation happens.

***

## Button logic

When there are three or more actions, the button on the right is converted into a dropdown to accommodate all available actions that the customer can take. Unless payment is due, the **Buy again** button typically occupies the left position. If payment is due, then the **Pay now** button takes precedence.

The following are some examples:

![Examples showing that when there are only one or two order actions, buttons display. When there are three or more actions that a customer can take on their order, one button displays and a "Manage" dropdown contains the other actions.](https://shopify.dev/assets/assets/images/apps/customer-accounts/order-action-menu-extensions/ux-guidelines-button-logic-BH8_XK6o.png)

***

* [Button labels](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions.md#button-labels)
* [Triggered actions](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions.md#triggered-actions)
* [Button logic](https://shopify.dev/docs/apps/build/customer-accounts/order-action-extensions/ux-for-order-actions.md#button-logic)