SBadge <s-badge>

Um pequeno rótulo que mostra o status de um objeto, como um pedido, um pagamento ou um envio. SBadge é o wrapper de Vue 3 tipado do web component <s-badge> do Shopify Polaris.

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

Boas práticas

• Escolha o tamanho de acordo com o contexto. Use size="base" em células de tabela, itens de lista ou qualquer lugar onde vários badges fiquem juntos. Reserve size="large" para um único badge que mereça destaque, como o status principal exibido no topo de uma página.
• Use rótulos de uma ou duas palavras. Rótulos curtos como "Processado" ou "Esgotado" são lidos rapidamente. Escreva os status no particípio, ou seja, "Reembolsado" em vez de "Reembolso".
• Combine o tom com o status. Use tone="critical" para erros ou problemas urgentes que exigem ação, tone="warning" para problemas que precisam de atenção, tone="success" para confirmações positivas e tone="info" para status neutros. Dê ao mesmo status o mesmo tom em todo o seu app.
• Mantenha os badges junto ao que descrevem. Em um item de lista, coloque o badge perto do título. Em uma tabela, dê aos badges uma coluna própria para que os lojistas possam percorrê-la com o olhar.
• Use badges apenas para status do sistema. Badges são indicadores estáticos definidos pelo sistema, então não os use para tags criadas pelos lojistas nem para itens que eles possam remover.

<SBadge tone="success">Fulfilled</SBadge>
<SBadge tone="warning">Partially refunded</SBadge>

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

Exemplo

NeutralInfoSuccessCautionWarningCritical

With iconLargeStrong color

<script setup>
import { SBadge } from 'polaris-vue-elements'
</script>

<template>
  <SBadge tone="neutral">Neutral</SBadge>
  <SBadge tone="info">Info</SBadge>
  <SBadge tone="success">Success</SBadge>
  <SBadge tone="caution">Caution</SBadge>
  <SBadge tone="warning">Warning</SBadge>
  <SBadge tone="critical">Critical</SBadge>

  <SBadge tone="success" icon="check-circle">With icon</SBadge>
  <SBadge tone="info" size="large">Large</SBadge>
  <SBadge tone="info" color="strong">Strong color</SBadge>
</template>

Props

Prop	Tipo	Descrição
color	"base" | "strong"	Controla o peso visual e a ênfase do badge. - base: peso padrão com ênfase moderada, adequado para a maioria dos casos de uso. - strong: peso visual maior para mais ênfase e destaque.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Um ícone exibido dentro do badge para oferecer contexto visual adicional ou reforçar o significado do badge. Aceita qualquer nome de ícone da biblioteca de ícones ou um identificador de string personalizado.
size	"base" | "large" | "large-100"	O tamanho do badge. - base: tamanho padrão adequado para a maioria dos usos de badge. - large: badge maior para mais visibilidade e destaque. - large-100: badge extra grande para visibilidade máxima em contextos de destaque.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	O significado semântico e o tratamento de cor do componente. - info: conteúdo informativo ou dicas úteis. - success: resultados positivos ou estados de sucesso. - warning: avisos importantes sobre possíveis problemas. - critical: problemas urgentes ou ações destrutivas. - auto: determinado automaticamente com base no contexto. - neutral: informações gerais sem uma intenção específica. - caution: avisos de alerta que precisam de atenção.

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

Slots

Slot	Descrição
default	O rótulo de texto exibido dentro do componente de badge, normalmente um indicador de status curto ou um rótulo de categoria.