Triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use Button to let users perform specific tasks or initiate interactions throughout the interface. Buttons can also function as links, guiding users to internal or external destinations.

Requirements

Requires OctantisEventProxy hook. See Install Hooks README.

See

• https://shopify.dev/docs/api/app-home/polaris-web-components/actions/button

Attributes

• id (:string) (required) - A unique identifier for the element.

• accessibility_label (: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.

• command (:string) - Sets the action the command 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.

• command_for (:string) - Sets the element the commandFor should act on when this clickable is activated.

• disabled (:string) - Disables the button, meaning it cannot be clicked or receive focus.

• download (:string) - Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs, or the blob: and data: schemes.

• href (:string) - The URL to link to.

  If set, it will navigate to the location specified by href after executing the click event.
  If a commandFor is set, the command will be executed instead of the navigation.

• icon (:string) - The type of icon to be displayed in the button.

• interest_for (:string) - Sets the element the interestFor should act on when this clickable is activated.

• loading (:string) - Replaces content with a loading indicator while a background action is being performed.

  This also disables the button.

• target (:string) - Specifies where to display the linked URL.

• tone (:string) - Sets the tone of the Button, based on the intention of the information being conveyed.

• type (:string) - 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.

Must be one of "button", "reset", or "submit".

• variant (:string) - "auto" | "primary" | "secondary" | "tertiary"

  Changes the visual appearance of the Button.

• blur (:string)

• click (:string)

• focus (:string)

• Global attributes are accepted. Supports all globals plus: ["slot"].

Slots

• inner_block