SBadge <s-badge>

显示对象状态的小标签，例如订单、付款或发货状态。 SBadge 是 Shopify Polaris <s-badge> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 根据场景选择尺寸。 在表格单元格、列表项或多个徽章并排出现的地方使用 size="base"。只有需要强调的单个徽章才使用 size="large"，例如显示在页面顶部的主要状态。
• 标签控制在一到两个词。 像“已发货”或“缺货”这样的短标签便于快速浏览。状态请使用表示已完成的说法，例如用“已退款”而不是“退款”。
• 让色调与状态相匹配。 对需要处理的错误或紧急问题使用 tone="critical"，对需要关注的问题使用 tone="warning"，对正面的确认使用 tone="success"，对中性状态使用 tone="info"。同一状态在整个应用中应使用相同的色调。
• 让徽章紧挨它所描述的内容。 在列表项中，将徽章放在标题附近。在表格中，为徽章单独设置一列，方便商家浏览。
• 仅将徽章用于系统状态。 徽章是由系统设置的静态指示器，因此不要将其用于商家创建的标签或可以移除的项目。

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

参阅 Shopify 关于 <s-badge> 的最佳实践（英文）以获取完整指南。

示例

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	类型	说明
color	"base" | "strong"	控制徽章的视觉权重和强调程度。 - base：标准权重，强调程度适中，适用于大多数场景。 - strong：增加视觉权重，以获得更高的强调程度和突出性。
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	显示在徽章内部的图标，用于提供额外的视觉上下文或强化徽章的含义。接受图标库中的任意图标名称或自定义字符串标识符。
size	"base" | "large" | "large-100"	徽章的尺寸。 - base：适合大多数徽章用例的默认尺寸。 - large：较大的徽章，提高可见性和突出度。 - large-100：特大徽章，在需要强调的上下文中提供最大可见性。
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	组件的语义含义和配色处理。 - info：说明性内容或实用提示。 - success：积极结果或成功状态。 - warning：关于潜在问题的重要警告。 - critical：紧急问题或破坏性操作。 - auto：根据上下文自动确定。 - neutral：无特定意图的一般信息。 - caution：需要注意的提醒通知。

为便于阅读，上面部分类型列已被截断；完整的联合类型见库中生成的 TypeScript 类型（src/lib/generated/types.ts）。

Slots

Slot	说明
default	徽章组件中显示的文本标签，通常是简短的状态指示或类别标签。