SButton <s-button>

import { SButton } from 'polaris-vue-elements'

Example

PrimarySecondaryTertiaryCritical

LoadingDisabled

Clicked 0 times

<script setup>
import { ref } from 'vue'
import { SButton } from 'polaris-vue-elements'

const clicks = ref(0)
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
    <SButton variant="primary">Primary</SButton>
    <SButton variant="secondary">Secondary</SButton>
    <SButton variant="tertiary">Tertiary</SButton>
    <SButton tone="critical">Critical</SButton>
  </div>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px;">
    <SButton loading>Loading</SButton>
    <SButton disabled>Disabled</SButton>
  </div>
  <div style="margin-top: 8px;">
    <SButton @click="clicks++">Clicked {{ clicks }} times</SButton>
  </div>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	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.
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.
disabled	boolean	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	"color" | "info" | "status" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" … (553 more)	An icon displayed inside the button, typically positioned before the button text. Use icons to help users quickly identify the button's action or to improve scannability. Accepts any icon name from the icon library or a custom string identifier.
inlineSize	"auto" | "fill" | "fit-content"	The displayed inline width of the Button. - auto: the size of the button depends on the surface and context. - fill: the button will takes up 100% of the available inline size. - fit-content: the button will take up the minimum inline-size required to fit its content.
interestFor	string	ID of a component that should respond to interest (e.g. hover and focus) on this component.
lang	string	The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the IANA language subtag registry.
loading	boolean	Replaces content with a loading indicator while a background action is being performed. This also disables the Button.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Specifies where to display the linked URL.
tone	"auto" | "neutral" | "critical"	The semantic meaning and color treatment of the component. - critical: Urgent problems or destructive actions. - auto: Automatically determined based on context. - neutral: General information without specific intent.
type	"button" | "reset" | "submit"	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.
variant	"auto" | "primary" | "secondary" | "tertiary"	The visual appearance of the button component. - auto: The variant is automatically determined by the button component's context. - primary: High emphasis button for the primary action on the page. Should be used sparingly. - secondary: Medium emphasis button for secondary actions. - tertiary: Low emphasis button for less important actions.

Some type columns above are truncated for readability; the full union is available in the library's generated TypeScript types (src/lib/generated/types.ts).

Events

Event	Type
blur	CustomEvent
click	CustomEvent
focus	CustomEvent

Listen for these with @blur-style listeners on <SButton>.

Slots

Slot	Description
default	The label text or elements displayed inside the button component, describing the action that will be performed when clicked.