SBadge <s-badge>

Une petite étiquette qui indique le statut d'un objet, comme une commande, un paiement ou un traitement. SBadge est le wrapper Vue 3 typé du web component <s-badge> de Shopify Polaris.

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

Bonnes pratiques

• Choisissez la taille selon le contexte. Utilisez size="base" dans les cellules de tableau, les éléments de liste ou partout où plusieurs badges se côtoient. Réservez size="large" à un badge unique qui mérite d'être mis en avant, comme le statut principal affiché en haut d'une page.
• Limitez les libellés à un ou deux mots. Des libellés courts comme "Fulfilled" ou "Out of stock" se lisent d'un coup d'œil. Formulez les statuts au passé, donc "Refunded" plutôt que "Refund".
• Accordez le ton au statut. Utilisez tone="critical" pour les erreurs ou les problèmes urgents qui exigent une action, tone="warning" pour les problèmes qui méritent l'attention, tone="success" pour les confirmations positives et tone="info" pour les statuts neutres. Donnez le même ton au même statut partout dans votre app.
• Placez les badges à côté de ce qu'ils décrivent. Dans un élément de liste, mettez le badge près du titre. Dans un tableau, donnez aux badges leur propre colonne pour que les marchands puissent la parcourir rapidement.
• N'utilisez les badges que pour les statuts système. Les badges sont des indicateurs statiques définis par le système : ne les utilisez donc pas pour des étiquettes créées par les marchands ni pour des éléments qu'ils peuvent supprimer.

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

Consultez les bonnes pratiques de Shopify pour <s-badge> (en anglais) pour l'ensemble des recommandations.

Exemple

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	Type	Description
color	"base" | "strong"	Contrôle le poids visuel et l'emphase du badge. - base : poids standard avec une emphase modérée, adapté à la plupart des cas. - strong : poids visuel accru pour une emphase et une visibilité plus fortes.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Une icône affichée dans le badge pour apporter un contexte visuel supplémentaire ou renforcer sa signification. Accepte n'importe quel nom d'icône de la bibliothèque d'icônes ou un identifiant personnalisé sous forme de chaîne.
size	"base" | "large" | "large-100"	La taille du badge. - base : taille par défaut adaptée à la plupart des usages. - large : badge plus grand pour une visibilité et une proéminence accrues. - large-100 : très grand badge pour une visibilité maximale dans les contextes mis en avant.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	La signification sémantique et le traitement des couleurs du composant. - info : contenu informatif ou conseils utiles. - success : résultats positifs ou états de réussite. - warning : avertissements importants sur des problèmes potentiels. - critical : problèmes urgents ou actions destructrices. - auto : déterminé automatiquement selon le contexte. - neutral : information générale sans intention particulière. - caution : avis nécessitant de l'attention.

Certaines colonnes de type ci-dessus sont tronquées pour plus de lisibilité ; l'union complète est disponible dans les types TypeScript générés de la bibliothèque (src/lib/generated/types.ts).

Slots

Slot	Description
default	Le libellé texte affiché dans le composant badge, généralement un court indicateur de statut ou un libellé de catégorie.