SPressButton <s-press-button>

Un botón de alternancia que permanece pulsado o no pulsado, para activar y desactivar un modo o un filtro. SPressButton es el wrapper de Vue 3 tipado del web component <s-press-button> de Shopify Polaris.

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

Ejemplo

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	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del Button. Se lee a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Úsala cuando solo uses un icono o cuando el texto del Button no aporte suficiente contexto a los usuarios de tecnologías de asistencia.
defaultPressed	boolean	Si el botón está pulsado de forma predeterminada.
disabled	boolean	Desactiva el Button, de modo que no se puede hacer clic en él ni puede recibir el foco.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	El tipo de icono que se muestra en el Button.
inlineSize	"auto" | "fill" | "fit-content"	El ancho en línea que se muestra del Button. - auto: el tamaño del botón depende de la superficie y del contexto. - fill: el botón ocupa el 100 % del tamaño en línea disponible. - fit-content: el botón ocupa el tamaño en línea mínimo necesario para que quepa su contenido.
lang	string	Indica el idioma del texto. Es útil cuando el texto está en un idioma distinto al del resto de la página. Permite que las tecnologías de asistencia, como los lectores de pantalla, usen la pronunciación correcta. Referencia de valores (etiqueta "subtag")
loading	boolean	Reemplaza el contenido por un indicador de carga mientras se realiza una acción en segundo plano. Esto también deshabilita el Button.
pressed	boolean	Si el botón está pulsado.
tone	"neutral"	Define el tono del Button según la intención de la información que se transmite.
variant	"secondary" | "tertiary"	Cambia la apariencia visual del Button.

Algunas columnas de tipo de arriba están truncadas para facilitar la lectura; la unión completa está disponible en los tipos de TypeScript generados de la biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Escúchalos con listeners del estilo @blur en <SPressButton>.

Slots

Slot	Descripción
default	El contenido del PressButton.