SPressButton <s-press-button>

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

Example

SecondaryTertiaryDisabled

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

const pressed = ref(false)
</script>

<template>
  <!-- SPressButton is a toggle-style button (aria-pressed) — pressed/defaultPressed
       control the on/off state instead of a click counter. -->
  <SPressButton icon="star" accessibilityLabel="Favorite" :pressed="pressed" @click="pressed = !pressed" />
  <SPressButton variant="secondary">Secondary</SPressButton>
  <SPressButton variant="tertiary">Tertiary</SPressButton>
  <SPressButton disabled>Disabled</SPressButton>
</template>

Props

Prop	Type	Description
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.
defaultPressed	boolean	Whether the button is pressed by default.
disabled	boolean	Disables the Button meaning it cannot be clicked or receive focus.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (510 more)	The type of icon to be displayed in the Button.
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.
lang	string	Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values ("subtag" label)
loading	boolean	Replaces content with a loading indicator while a background action is being performed. This also disables the Button.
pressed	boolean	Whether the button is pressed.
tone	"neutral"	Sets the tone of the Button based on the intention of the information being conveyed.
variant	"secondary" | "tertiary"	Changes the visual appearance of the Button.

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 <SPressButton>.

Slots

Slot	Description
default	The content of the PressButton.