Actions
Button
Button with variants and tones. Wraps the Polaris <s-button> web component.
Usage
<template>
<ShButton variant="primary" @click="handleClick">Save</ShButton>
<ShButton variant="tertiary" tone="critical" @click="handleDelete">Delete</ShButton>
<ShButton loading disabled>Processing…</ShButton>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'auto' | 'primary' | 'secondary' | 'tertiary' | — | Button visual style |
tone | 'auto' | 'critical' | 'neutral' | — | Color tone |
disabled | boolean | — | Disables the button |
loading | boolean | — | Shows a loading spinner |
icon | PolarisIcon | — | Icon to display |
href | string | — | Makes the button a link |
target | 'auto' | '_blank' | '_self' | '_parent' | '_top' | string | — | Link target |
download | string | — | Download attribute for link buttons |
type | 'button' | 'reset' | 'submit' | — | Button type attribute |
accessibilityLabel | string | — | Accessible label |
command | '--auto' | '--show' | '--hide' | '--toggle' | — | Command for invoketarget pattern |
commandFor | string | — | Target element ID for command |
interestFor | string | — | Target element ID for interest |
Events
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Emitted on button click |
focus | FocusEvent | Emitted on focus |
blur | FocusEvent | Emitted on blur |
Slots
| Slot | Description |
|---|---|
default | Button label |
Polaris Element
Renders as <s-button>. See Polaris Button docs.