Choose a version:

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

Use this when using only an icon or the button text is not enough context for users using assistive technologies.
Anchor to click click ((event: <typeof buttonTagName>) => void) | null: Callback when the button is activated. This will be called before the action indicated by type.
Anchor to command command '--auto' | '--show' | '--hide' | '--toggle' | '--copy' Default: '--auto': Sets the action the commandFor should take when this clickable is activated.

See the documentation of particular components for the actions they support.

--auto: a default action for the target component.

--show: shows the target component.

--hide: hides the target component.

--toggle: toggles the target component.

--copy: copies the target ClipboardItem.
Anchor to commandFor commandFor string: ID of a component that should respond to activations (e.g. clicks) on this component.

See command for how to control the behavior of the target.
Anchor to disabled disabled boolean Default: false: Disables the button, disallowing any interaction.
Anchor to href href string: The URL to link to.

If set, it will navigate to the location specified by href after executing the onClick callback.

If a commandFor is set, the command will be executed instead of the navigation.
Anchor to id id string: A unique identifier for the element.
Anchor to loading loading boolean Default: false: Replaces content with a loading indicator.
Anchor to target target 'auto' | '_self' | '_blank' Default: 'auto': Specifies where to display the linked URL
Anchor to tone tone 'auto' | 'neutral' | 'critical' Default: 'auto': Sets the tone of the Button, based on the intention of the information being conveyed.
Anchor to type type 'button' | 'submit' Default: 'button': The behavior of the button.

'submit' - Used to indicate the component acts as a submit button, meaning it submits the closest form.

'button' - Used to indicate the component acts as a button, meaning it has no default action.

'reset' - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).

This property is ignored if the component supports href or commandFor/command and one of them is set.

Docs_Menu_Button_Action

accessibilityLabel
A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers. Use this when using only an icon or the button text is not enough context for users using assistive technologies.
```
string
```
click
Callback when the button is activated. This will be called before the action indicated by `type`.
```
((event: CallbackEventListener<typeof buttonTagName>) => void) | null
```
command
Sets the action the `commandFor` should take when this clickable is activated. See the documentation of particular components for the actions they support. - `--auto`: a default action for the target component. - `--show`: shows the target component. - `--hide`: hides the target component. - `--toggle`: toggles the target component. - `--copy`: copies the target ClipboardItem.
```
'--auto' | '--show' | '--hide' | '--toggle' | '--copy'
```
commandFor
ID of a component that should respond to activations (e.g. clicks) on this component. See `command` for how to control the behavior of the target.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
href
The URL to link to. - If set, it will navigate to the location specified by `href` after executing the `onClick` callback. - If a `commandFor` is set, the `command` will be executed instead of the navigation.
```
string
```
id
A unique identifier for the element.
```
string
```
loading
Replaces content with a loading indicator.
```
boolean
```
target
Specifies where to display the linked URL
```
'auto' | '_self' | '_blank'
```
tone
Sets the tone of the Button, based on the intention of the information being conveyed.
```
'auto' | 'neutral' | 'critical'
```
type
The behavior of the button. - `'submit'` - Used to indicate the component acts as a submit button, meaning it submits the closest form. - `'button'` - Used to indicate the component acts as a button, meaning it has no default action. - `'reset'` - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values). This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.
```
'button' | 'submit'
```

export interface Docs_Menu_Button_Action
  extends Omit<
    ButtonProps,
    'variant' | 'textDecoration' | 'inlineAlignment' | 'inlineSize' | 'size'
  > {}

CallbackEventListener

(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null

CallbackEvent

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Was this section helpful?

Basic Menu

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

return (

<s-button commandFor="order-actions-menu">Manage</s-button>

<s-menu

id="order-actions-menu"

accessibilityLabel="List of order actions"

<s-button onClick={() => console.log('Submit problem')}>

Submit problem

</s-button>

<s-button href="https://shopify.com">Request return</s-button>

<s-button tone="critical">Cancel order</s-button>

</s-menu>

</>

);

}

examples

Basic Menu

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  return (
    <>
      <s-button commandFor="order-actions-menu">Manage</s-button>
      <s-menu
        id="order-actions-menu"
        accessibilityLabel="List of order actions"
      >
        <s-button onClick={() => console.log('Submit problem')}>
          Submit problem
        </s-button>
        <s-button href="https://shopify.com">Request return</s-button>
        <s-button tone="critical">Cancel order</s-button>
      </s-menu>
    </>
  );
}

Preview

An example of a Menu component shows three actions: Submit problem, Request return, and Cancel order.

Anchor to best-practicesBest Practices

Consolidate actions into one menu

Use the menu component in the upper-right corner of full-page extensions, to be consistent with the Order status page.
Use menus to consolidate page-level actions, instead of adding multiple buttons around the page.