SBadge <s-badge>

주문, 결제, 주문 처리 같은 객체의 상태를 보여 주는 작은 라벨입니다. SBadge은(는) Shopify Polaris <s-badge> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 맥락에 맞는 크기를 고르세요. 표 셀, 목록 항목 등 여러 배지가 함께 놓이는 곳에서는 size="base"를 사용합니다. size="large"는 페이지 상단에 표시되는 주요 상태처럼 강조할 가치가 있는 단일 배지에만 사용합니다.
• 레이블은 한두 단어로 유지하세요. "Fulfilled"나 "Out of stock" 같은 짧은 레이블은 빠르게 훑어볼 수 있습니다. 상태는 과거형으로 작성해 "Refund"가 아니라 "Refunded"처럼 씁니다.
• 상태에 맞는 tone을 사용하세요. 조치가 필요한 오류나 긴급한 문제에는 tone="critical", 주의가 필요한 문제에는 tone="warning", 긍정적인 확인에는 tone="success", 중립적인 상태에는 tone="info"를 사용합니다. 같은 상태에는 앱 전체에서 같은 tone을 지정합니다.
• 배지는 설명하는 대상 옆에 두세요. 목록 항목에서는 배지를 제목 가까이에 둡니다. 표에서는 판매자가 훑어볼 수 있도록 배지에 별도 열을 할당합니다.
• 배지는 시스템 상태에만 사용하세요. 배지는 시스템이 설정하는 정적 표시기이므로, 판매자가 만드는 태그나 판매자가 제거할 수 있는 항목에는 사용하지 않습니다.

<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	배지 컴포넌트 안에 표시되는 텍스트 레이블로, 일반적으로 짧은 상태 표시나 카테고리 레이블입니다.