SButton <s-button>

Executa uma ação ou navega, com variantes primary, secondary e tertiary, ícones e um estado de carregamento. SButton é o wrapper de Vue 3 tipado do web component <s-button> do Shopify Polaris.

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

Boas práticas

• Use um verbo claro no rótulo. Diga exatamente o que o botão faz, como em "Salvar", "Editar" ou "Adicionar tags". Use apenas a primeira letra maiúscula, dispense palavras de preenchimento como artigos e não use pontuação.
• Reserve tone="critical" para ações destrutivas. Use-o apenas quando uma ação for difícil ou impossível de desfazer e, em geral, ajuste o tom à importância da ação.
• Deixe a hierarquia evidente. Dê à ação principal variant="primary", às ações de apoio variant="secondary" e às complementares variant="tertiary", para que os lojistas percebam qual ação importa mais.
• Posicione os botões de forma consistente. Coloque os botões nos mesmos lugares em todo o seu app para que os lojistas aprendam onde procurá-los.
• Rotule botões só com ícone. Se um botão tem um ícone e nenhum texto, dê a ele um accessibilityLabel que diga aos usuários de leitores de tela o que ele faz.

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

Veja as boas práticas da Shopify para <s-button> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do componente para tecnologias assistivas, como leitores de tela. Use-o para fornecer contexto adicional quando o conteúdo visível sozinho não transmite com clareza a finalidade do componente.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Define a ação que o commandFor deve executar quando este elemento clicável é ativado. Consulte a documentação de cada componente para ver as ações compatíveis. - --auto: uma ação padrão para o componente de destino. - --show: exibe o componente de destino. - --hide: oculta o componente de destino. - --toggle: alterna o componente de destino. - --copy: copia o ClipboardItem de destino.
commandFor	string	ID de um componente que deve responder às ativações (por exemplo, cliques) neste componente. Consulte command para saber como controlar o comportamento do destino.
disabled	boolean	Desativa o Button, o que significa que ele não pode ser clicado nem receber foco.
download	string	Faz com que o navegador trate a URL vinculada como um download, usando a string como nome do arquivo. O download só funciona com URLs de mesma origem ou com os esquemas blob: e data:.
href	string	A URL do link. - Se definida, navegará para o local especificado por href após executar o evento click. - Se um commandFor estiver definido, o command será executado em vez da navegação.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Um ícone exibido dentro do botão, normalmente posicionado antes do texto do botão. Use ícones para ajudar os usuários a identificar rapidamente a ação do botão ou para facilitar a leitura rápida. Aceita qualquer nome de ícone da biblioteca de ícones ou um identificador de string personalizado.
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.
interestFor	string	ID de um componente que deve responder ao interesse (por exemplo, passar o cursor e focar) neste componente.
lang	string	O idioma do conteúdo de texto. Use isto quando o texto estiver em um idioma diferente do restante da página, permitindo que tecnologias assistivas, como leitores de tela, usem a pronúncia correta. O valor deve ser um subtag de idioma válido do registro de subtags de idioma da IANA.
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.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Especifica onde exibir a URL vinculada.
tone	"auto" | "neutral" | "critical"	O significado semântico e o tratamento de cor do componente. - critical: problemas urgentes ou ações destrutivas. - auto: determinado automaticamente com base no contexto. - neutral: informações gerais sem uma intenção específica.
type	"button" | "reset" | "submit"	O comportamento do Button. - submit: indica que o componente funciona como um botão de envio, ou seja, envia o formulário mais próximo. - button: indica que o componente funciona como um botão, ou seja, não tem nenhuma ação padrão. - reset: indica que o componente funciona como um botão de redefinição, ou seja, redefine o formulário mais próximo (retornando os campos aos valores padrão). Esta propriedade é ignorada se o componente oferecer suporte a href ou commandFor/command e um deles estiver definido.
variant	"auto" | "primary" | "secondary" | "tertiary"	A aparência visual do componente de botão. - auto: a variante é determinada automaticamente pelo contexto do componente de botão. - primary: botão de alta ênfase para a ação principal da página. Deve ser usado com moderação. - secondary: botão de ênfase média para ações secundárias. - tertiary: botão de baixa ênfase para ações menos importantes.

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

Slots

Slot	Descrição
default	O texto ou os elementos do rótulo exibidos dentro do componente de botão, que descrevem a ação executada ao clicar.