SPressButton <s-press-button>

Um botão de alternância que fica pressionado ou não pressionado, para ativar e desativar um modo ou um filtro. SPressButton é o wrapper de Vue 3 tipado do web component <s-press-button> do Shopify Polaris.

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

Exemplo

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	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do Button. Ele é lido para usuários de tecnologias assistivas, como leitores de tela. Use-o quando houver apenas um ícone ou quando o texto do Button não oferecer contexto suficiente para usuários de tecnologias assistivas.
defaultPressed	boolean	Se o botão está pressionado por padrão.
disabled	boolean	Desativa o Button, o que significa que ele não pode ser clicado nem receber foco.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	O tipo de ícone a ser exibido no Button.
inlineSize	"auto" | "fill" | "fit-content"	A largura em linha exibida do Button. - auto: o tamanho do botão depende da superfície e do contexto. - fill: o botão ocupa 100% do tamanho em linha disponível. - fit-content: o botão ocupa o tamanho em linha mínimo necessário para caber o seu conteúdo.
lang	string	Indica o idioma do texto. É útil quando o texto está em um idioma diferente do restante da página. Permite que tecnologias assistivas, como leitores de tela, usem a pronúncia correta. Referência de valores (rótulo "subtag")
loading	boolean	Substitui o conteúdo por um indicador de carregamento enquanto uma ação em segundo plano é executada. Isso também desativa o Button.
pressed	boolean	Se o botão está pressionado.
tone	"neutral"	Define o tom do Button com base na intenção da informação transmitida.
variant	"secondary" | "tertiary"	Altera a aparência visual do Button.

Algumas colunas de tipo acima estão truncadas para facilitar a leitura; a união completa está disponível nos tipos TypeScript gerados da biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Escute-os com listeners no estilo @blur em <SPressButton>.

Slots

Slot	Descrição
default	O conteúdo do PressButton.