UX for order actions
Use the following guidelines to build your order action menu extensions.
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:

Anchor to Triggered actionsTriggered 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.
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:
