SBadge <s-badge>

Ein kleines Label, das den Status eines Objekts anzeigt, etwa einer Bestellung, Zahlung oder Ausführung. SBadge ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-badge>.

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

Best Practices

• Größe passend zum Kontext wählen. Verwenden Sie size="base" in Tabellenzellen, Listeneinträgen oder überall dort, wo mehrere Badges nebeneinanderstehen. size="large" ist einem einzelnen Badge vorbehalten, das hervorgehoben werden soll, etwa dem Hauptstatus oben auf einer Seite.
• Labels auf ein oder zwei Wörter beschränken. Kurze Labels wie „Fulfilled“ oder „Out of stock“ lassen sich schnell erfassen. Formulieren Sie Status in der Vergangenheitsform, also „Refunded“ statt „Refund“.
• Tone passend zum Status wählen. Verwenden Sie tone="critical" für Fehler oder dringende Probleme, die ein Handeln erfordern, tone="warning" für Probleme, die Aufmerksamkeit brauchen, tone="success" für positive Bestätigungen und tone="info" für neutrale Status. Derselbe Status sollte in der gesamten App denselben Tone haben.
• Badges neben dem Beschriebenen platzieren. In einem Listeneintrag gehört das Badge neben den Titel. In einer Tabelle bekommen Badges eine eigene Spalte, damit Händler sie schnell überfliegen können.
• Badges nur für Systemstatus verwenden. Badges sind statische, vom System gesetzte Indikatoren. Für Tags, die Händler selbst anlegen, oder für entfernbare Elemente sind sie nicht gedacht.

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

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-badge> (auf Englisch).

Beispiel

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	Typ	Beschreibung
color	"base" | "strong"	Steuert das visuelle Gewicht und die Betonung des Badges. - base: Standardgewicht mit mäßiger Betonung, für die meisten Anwendungsfälle geeignet. - strong: Erhöhtes visuelles Gewicht für stärkere Betonung und Hervorhebung.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Ein Icon im Badge, das zusätzlichen visuellen Kontext liefert oder die Bedeutung des Badges unterstreicht. Akzeptiert jeden Icon-Namen aus der Icon-Bibliothek oder eine eigene String-Kennung.
size	"base" | "large" | "large-100"	Die Größe des Badges. - base: Standardgröße, geeignet für die meisten Anwendungsfälle von Badges. - large: Größeres Badge für mehr Sichtbarkeit und Prominenz. - large-100: Sehr großes Badge für maximale Sichtbarkeit in hervorgehobenen Kontexten.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Die semantische Bedeutung und farbliche Gestaltung der Komponente. - info: Informative Inhalte oder hilfreiche Tipps. - success: Positive Ergebnisse oder erfolgreiche Zustände. - warning: Wichtige Warnungen vor möglichen Problemen. - critical: Dringende Probleme oder destruktive Aktionen. - auto: Wird automatisch anhand des Kontexts bestimmt. - neutral: Allgemeine Informationen ohne bestimmte Absicht. - caution: Hinweise, die Aufmerksamkeit erfordern.

Einige Typspalten oben wurden zur besseren Lesbarkeit gekürzt; die vollständigen Unions finden sich in den generierten TypeScript-Typen der Bibliothek (src/lib/generated/types.ts).

Slots

Slot	Beschreibung
default	Die Textbeschriftung innerhalb der Badge-Komponente, typischerweise eine kurze Statusanzeige oder Kategoriebezeichnung.