SBadge <s-badge>

注文、支払い、フルフィルメントなど、オブジェクトのステータスを示す小さなラベル。 SBadge は、Shopify Polaris の <s-badge> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• コンテキストに合わせてサイズを選ぶ。 テーブルのセル、リスト項目、複数のバッジが並ぶ場所では size="base" を使います。size="large" は、ページ上部に表示するメインのステータスなど、強調すべき単独のバッジに限って使います。
• ラベルは 1〜2 語に収める。 「Fulfilled」や「Out of stock」のような短いラベルはすばやく読み取れます。ステータスは過去形で書き、「Refund」ではなく「Refunded」とします。
• ステータスに合ったトーンを使う。 対応が必要なエラーや緊急の問題には tone="critical"、注意が必要な問題には tone="warning"、肯定的な確認には tone="success"、中立的なステータスには tone="info" を使います。同じステータスには、アプリ全体で同じトーンを使います。
• バッジは説明する対象の近くに置く。 リスト項目ではタイトルの近くにバッジを置きます。テーブルではバッジ専用の列を設け、マーチャントがひと目で確認できるようにします。
• バッジはシステムのステータスにだけ使う。 バッジはシステムが設定する静的なインジケーターです。マーチャントが作成するタグや、削除できる項目には使わないでください。

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

詳しいガイダンスについては、<s-badge> に関する Shopify のベストプラクティス（英語）を参照してください。

例

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: 注意が必要な勧告的な通知。

上記の一部の型の列は読みやすさのために省略されています。完全な union はライブラリが生成する TypeScript の型（src/lib/generated/types.ts）で確認できます。

Slots

Slot	説明
default	バッジコンポーネント内に表示されるテキストラベルです。通常は短いステータス表示やカテゴリラベルです。