SBadge <s-badge>

एक छोटा label जो किसी object का status दिखाता है, जैसे order, payment या fulfillment। SBadge Shopify के Polaris <s-badge> web component का typed Vue 3 wrapper है।

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

Best practices

• संदर्भ के अनुसार साइज़ चुनें। टेबल cells, list items या जहाँ भी कई badges एक साथ हों, वहाँ size="base" इस्तेमाल करें। size="large" को ऐसे अकेले badge के लिए रखें जिस पर ज़ोर देना ज़रूरी हो, जैसे पेज के ऊपर दिखाया गया मुख्य status।
• Labels को एक या दो शब्दों तक सीमित रखें। "Fulfilled" या "Out of stock" जैसे छोटे labels एक नज़र में पढ़ लिए जाते हैं। Status भूतकाल में लिखें, यानी "Refund" के बजाय "Refunded"।
• Tone को status से मिलाएँ। जिन errors या ज़रूरी समस्याओं पर कार्रवाई चाहिए उनके लिए tone="critical", ध्यान माँगने वाली समस्याओं के लिए tone="warning", सकारात्मक पुष्टि के लिए tone="success" और सामान्य statuses के लिए tone="info" इस्तेमाल करें। अपने पूरे app में एक ही status को हर जगह एक ही tone दें।
• Badges को उसी के पास रखें जिसका वे वर्णन करते हैं। List item में badge को title के पास रखें। टेबल में badges को उनका अपना column दें, ताकि merchants उसे जल्दी से स्कैन कर सकें।
• Badges का इस्तेमाल सिर्फ़ system statuses के लिए करें। Badges सिस्टम द्वारा तय किए गए स्थिर संकेत हैं, इसलिए merchants के बनाए tags या उनके द्वारा हटाए जा सकने वाले items के लिए इनका इस्तेमाल न करें।

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

सभी सुझावों के लिए <s-badge> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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	विवरण
color	"base" | "strong"	badge का visual weight और ज़ोर नियंत्रित करता है। - base: मध्यम ज़ोर वाला सामान्य weight, अधिकांश स्थितियों के लिए उपयुक्त। - strong: अधिक ज़ोर और प्रमुखता के लिए बढ़ा हुआ visual weight।
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	badge के अंदर दिखाया जाने वाला icon, जो अतिरिक्त visual संदर्भ देता है या badge के अर्थ को मज़बूत करता है। icon library का कोई भी icon नाम या कोई custom string identifier स्वीकार करता है।
size	"base" | "large" | "large-100"	badge का आकार। - base: अधिकांश badge उपयोगों के लिए उपयुक्त डिफ़ॉल्ट आकार। - large: अधिक दृश्यता और प्रमुखता के लिए बड़ा badge। - large-100: ज़ोर वाले contexts में अधिकतम दृश्यता के लिए बहुत बड़ा badge।
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	component का semantic अर्थ और color treatment। - info: जानकारी देने वाली सामग्री या उपयोगी सुझाव। - success: सकारात्मक परिणाम या सफल states। - warning: संभावित समस्याओं के बारे में महत्वपूर्ण चेतावनियाँ। - critical: तत्काल समस्याएँ या destructive actions। - auto: context के आधार पर अपने आप तय होता है। - neutral: बिना किसी विशेष उद्देश्य की सामान्य जानकारी। - caution: सलाह देने वाली सूचनाएँ जिन पर ध्यान देना ज़रूरी है।

पढ़ने में आसानी के लिए ऊपर के कुछ type columns छोटे किए गए हैं; पूरा union library के generate किए गए TypeScript types (src/lib/generated/types.ts) में उपलब्ध है।

Slots

Slot	विवरण
default	badge component के अंदर दिखाई जाने वाला text label, आमतौर पर एक छोटा status indicator या category label।