SBadge <s-badge>

Một nhãn nhỏ cho biết trạng thái của một đối tượng, chẳng hạn đơn hàng, thanh toán hoặc giao hàng. SBadge là Vue 3 wrapper có type cho web component <s-badge> của Shopify Polaris.

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

Best practices

• Chọn kích thước theo ngữ cảnh. Dùng size="base" trong ô bảng, mục danh sách, hoặc bất cứ đâu có nhiều badge nằm cạnh nhau. Chỉ dùng size="large" cho một badge duy nhất cần được nhấn mạnh, chẳng hạn trạng thái chính hiển thị ở đầu trang.
• Giữ nhãn trong một hoặc hai từ. Nhãn ngắn như "Fulfilled" hay "Out of stock" giúp đọc lướt nhanh. Viết trạng thái ở thì quá khứ, ví dụ "Refunded" thay vì "Refund".
• Chọn tone phù hợp với trạng thái. Dùng tone="critical" cho lỗi hoặc vấn đề khẩn cấp cần xử lý, tone="warning" cho vấn đề cần chú ý, tone="success" cho xác nhận tích cực, và tone="info" cho trạng thái trung tính. Dùng cùng một tone cho cùng một trạng thái ở mọi nơi trong app của bạn.
• Đặt badge cạnh thứ nó mô tả. Trong một mục danh sách, đặt badge gần tiêu đề. Trong bảng, dành cho badge một cột riêng để người bán có thể đọc lướt.
• Chỉ dùng badge cho trạng thái hệ thống. Badge là chỉ báo tĩnh do hệ thống đặt, vì vậy đừng dùng chúng cho tag do người bán tạo hoặc cho các mục họ có thể xóa.

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

Xem best practices của Shopify cho <s-badge> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
color	"base" | "strong"	Kiểm soát độ đậm thị giác và mức nhấn mạnh của badge. - base: Độ đậm tiêu chuẩn với mức nhấn mạnh vừa phải, phù hợp với hầu hết trường hợp. - strong: Tăng độ đậm thị giác để nhấn mạnh và nổi bật hơn.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Icon hiển thị bên trong badge để cung cấp thêm ngữ cảnh thị giác hoặc củng cố ý nghĩa của badge. Chấp nhận bất kỳ tên icon nào từ thư viện icon hoặc một chuỗi định danh tùy chỉnh.
size	"base" | "large" | "large-100"	Kích thước của badge. - base: Kích thước mặc định phù hợp với hầu hết trường hợp dùng badge. - large: Badge lớn hơn để tăng khả năng hiển thị và độ nổi bật. - large-100: Badge cực lớn để hiển thị tối đa trong ngữ cảnh cần nhấn mạnh.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Ý nghĩa ngữ nghĩa và cách xử lý màu sắc của component. - info: Nội dung thông tin hoặc mẹo hữu ích. - success: Kết quả tích cực hoặc trạng thái thành công. - warning: Cảnh báo quan trọng về vấn đề tiềm ẩn. - critical: Vấn đề khẩn cấp hoặc hành động phá hủy. - auto: Tự động xác định dựa trên ngữ cảnh. - neutral: Thông tin chung không có mục đích cụ thể. - caution: Thông báo khuyến cáo cần chú ý.

Một số cột kiểu ở trên đã được rút gọn cho dễ đọc; union đầy đủ có trong type TypeScript được generate của thư viện (src/lib/generated/types.ts).

Slots

Slot	Mô tả
default	Nhãn văn bản hiển thị bên trong component badge, thường là chỉ báo trạng thái ngắn hoặc nhãn danh mục.