SButton <s-button>

Ejecuta una acción o navega, con variantes primary, secondary y tertiary, iconos y un estado de carga. SButton es el wrapper de Vue 3 tipado del web component <s-button> de Shopify Polaris.

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

Buenas prácticas

• Usa un verbo claro como etiqueta. Di exactamente lo que hace el botón, como "Save", "Edit" o "Add tags". Usa mayúscula solo al inicio, omite palabras de relleno como "a" o "the" y no uses puntuación.
• Reserva tone="critical" para acciones destructivas. Úsalo solo cuando una acción sea difícil o imposible de revertir y, en general, ajusta el tono a la importancia de la acción.
• Haz que la jerarquía sea evidente. Asigna variant="primary" a la acción principal, variant="secondary" a las acciones de apoyo y variant="tertiary" a las complementarias, para que los comerciantes sepan qué acción es la más importante.
• Coloca los botones de forma coherente. Pon los botones en los mismos lugares en toda tu app para que los comerciantes aprendan dónde buscarlos.
• Etiqueta los botones que solo tienen icono. Si un botón tiene un icono y no tiene texto, dale un accessibilityLabel que indique a los usuarios de lectores de pantalla lo que hace.

<SButton icon="edit" accessibilityLabel="Edit product" />

Consulta las buenas prácticas de Shopify para <s-button> (en inglés) para ver todas las recomendaciones.

Ejemplo

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	Tipo	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del componente para tecnologías de asistencia como los lectores de pantalla. Úsala para aportar contexto adicional cuando el contenido visible por sí solo no transmite con claridad el propósito del componente.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Define la acción que debe realizar el commandFor cuando se activa este elemento clicable. Consulta la documentación de cada componente para conocer las acciones que admite. - --auto: una acción predeterminada para el componente de destino. - --show: muestra el componente de destino. - --hide: oculta el componente de destino. - --toggle: alterna el componente de destino. - --copy: copia el ClipboardItem de destino.
commandFor	string	ID de un componente que debe responder a las activaciones (p. ej., clics) en este componente. Consulta command para saber cómo controlar el comportamiento del destino.
disabled	boolean	Desactiva el Button, de modo que no se puede hacer clic en él ni puede recibir el foco.
download	string	Hace que el navegador trate la URL enlazada como una descarga, usando la cadena como nombre de archivo. La descarga solo funciona con URL del mismo origen o con los esquemas blob: y data:.
href	string	La URL a la que enlazar. - Si se establece, navegará a la ubicación especificada por href después de ejecutar el evento click. - Si se establece un commandFor, se ejecutará el command en lugar de la navegación.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Un icono que se muestra dentro del botón, normalmente colocado antes del texto del botón. Usa iconos para ayudar a los usuarios a identificar rápidamente la acción del botón o para facilitar la lectura rápida. Acepta cualquier nombre de icono de la biblioteca de iconos o un identificador de cadena personalizado.
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.
interestFor	string	ID de un componente que debe responder al interés (p. ej., al pasar el cursor por encima y al enfocar) en este componente.
lang	string	El idioma del contenido de texto. Úsalo cuando el texto esté en un idioma distinto al del resto de la página, para que las tecnologías de asistencia, como los lectores de pantalla, usen la pronunciación correcta. El valor debe ser una subetiqueta de idioma válida del registro de subetiquetas de idioma de la IANA.
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.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Especifica dónde mostrar la URL enlazada.
tone	"auto" | "neutral" | "critical"	El significado semántico y el tratamiento de color del componente. - critical: problemas urgentes o acciones destructivas. - auto: se determina automáticamente según el contexto. - neutral: información general sin una intención específica.
type	"button" | "reset" | "submit"	El comportamiento del Button. - submit: indica que el componente actúa como botón de envío, es decir, envía el formulario más cercano. - button: indica que el componente actúa como un botón, es decir, no tiene ninguna acción predeterminada. - reset: indica que el componente actúa como botón de restablecimiento, es decir, restablece el formulario más cercano (devuelve los campos a sus valores predeterminados). Esta propiedad se ignora si el componente admite href o commandFor/command y alguno de ellos está establecido.
variant	"auto" | "primary" | "secondary" | "tertiary"	La apariencia visual del componente button. - auto: la variante se determina automáticamente según el contexto del componente button. - primary: botón de alto énfasis para la acción principal de la página. Debe usarse con moderación. - secondary: botón de énfasis medio para acciones secundarias. - tertiary: botón de bajo énfasis para acciones menos importantes.

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

Slots

Slot	Descripción
default	El texto de la etiqueta o los elementos que se muestran dentro del componente button y que describen la acción que se realizará al hacer clic.