SBadge <s-badge>

Una pequeña etiqueta que muestra el estado de un objeto, como un pedido, un pago o un envío. SBadge es el wrapper de Vue 3 tipado del web component <s-badge> de Shopify Polaris.

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

Buenas prácticas

• Elige el tamaño según el contexto. Usa size="base" en celdas de tabla, elementos de lista o en cualquier lugar donde haya varios badges juntos. Reserva size="large" para un único badge que merezca destacar, como el estado principal que se muestra en la parte superior de una página.
• Limita las etiquetas a una o dos palabras. Las etiquetas cortas como "Fulfilled" u "Out of stock" se leen de un vistazo. Escribe los estados en pasado, es decir, "Refunded" en lugar de "Refund".
• Ajusta el tono al estado. Usa tone="critical" para errores o problemas urgentes que requieren acción, tone="warning" para problemas que requieren atención, tone="success" para confirmaciones positivas y tone="info" para estados neutros. Da el mismo tono al mismo estado en toda tu app.
• Mantén los badges junto a lo que describen. En un elemento de lista, coloca el badge cerca del título. En una tabla, dale a los badges su propia columna para que los comerciantes puedan recorrerla rápidamente.
• Usa los badges solo para estados del sistema. Los badges son indicadores estáticos definidos por el sistema, así que no los uses para etiquetas que crean los comerciantes ni para elementos que pueden eliminar.

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

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

Ejemplo

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	Descripción
color	"base" | "strong"	Controla el peso visual y el énfasis del badge. - base: peso estándar con un énfasis moderado, adecuado para la mayoría de los casos. - strong: mayor peso visual para un énfasis y una prominencia superiores.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Un icono que se muestra dentro del badge para aportar contexto visual adicional o reforzar su significado. Acepta cualquier nombre de icono de la biblioteca de iconos o un identificador de cadena personalizado.
size	"base" | "large" | "large-100"	El tamaño del badge. - base: tamaño predeterminado adecuado para la mayoría de los casos de uso del badge. - large: badge más grande para mayor visibilidad y prominencia. - large-100: badge extra grande para la máxima visibilidad en contextos destacados.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	El significado semántico y el tratamiento de color del componente. - info: contenido informativo o consejos útiles. - success: resultados positivos o estados de éxito. - warning: advertencias importantes sobre posibles problemas. - 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. - caution: avisos que requieren atención.

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

Slots

Slot	Descripción
default	La etiqueta de texto que se muestra dentro del componente badge, normalmente un indicador de estado breve o una etiqueta de categoría.