CTag

Nhãn trạng thái dạng pill: nền mờ, chữ đậm cùng tông, luôn bám design token nên đạt tương phản AA ở cả chế độ sáng và tối.

Dùng khi: hiển thị trạng thái của một bản ghi (đơn hàng, hồ sơ, phiếu), phân loại, hoặc điều kiện lọc đang áp dụng.

Không dùng khi: chỉ cần bật/tắt hai trạng thái — dùng CStatus cho gọn; cần nút bấm được — dùng CButton.

<!-- Đăng ký global qua layer, không cần import -->
<CTag color="success" dot>Hoàn thành</CTag>

Cơ bản

<script setup lang="ts">
// Nhãn mặc định — dùng khi trạng thái không mang ý nghĩa tốt/xấu.
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <CTag>Nháp</CTag>
    <CTag color="primary">
      Mới tạo
    </CTag>
    <CTag color="accent">
      Ưu tiên
    </CTag>
  </div>
</template>

Màu semantic

Bảy màu bám token; chọn theo ý nghĩa trạng thái chứ không theo thẩm mỹ.

<script setup lang="ts">
// Bảy màu semantic. Chọn theo ý nghĩa trạng thái, không chọn theo thẩm mỹ:
// success = đã xong, warning = đang chờ người khác, error = thất bại/từ chối.
const colors = ['default', 'primary', 'accent', 'success', 'warning', 'error', 'info'] as const
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <CTag
      v-for="color in colors"
      :key="color"
      :color="color"
    >
      {{ color }}
    </CTag>
  </div>
</template>

Có chấm dẫn đầu

<script setup lang="ts">
// `dot` thêm chấm tròn dẫn đầu — hợp với trạng thái vòng đời trong bảng danh sách.
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <CTag
      color="success"
      dot
    >
      Hoàn thành
    </CTag>
    <CTag
      color="warning"
      dot
    >
      Chờ duyệt
    </CTag>
    <CTag
      color="error"
      dot
    >
      Từ chối
    </CTag>
  </div>
</template>

Đóng được

Nút ✕ là <button> thật nên bấm được bằng bàn phím; close-text trở thành aria-label, hãy nêu rõ điều kiện bị bỏ thay vì chỉ "Xoá". Đây cũng là cách CTable dựng thanh điều kiện lọc.

<script setup lang="ts">
import { ref } from 'vue'

// Nhãn đóng được — dùng cho thanh điều kiện lọc. `close-text` là nhãn đọc màn hình
// của nút ✕, nên nêu rõ điều kiện bị bỏ chứ không chỉ "Xoá".
const filters = ref([
  { key: 'status', label: 'Trạng thái: Chờ duyệt' },
  { key: 'customer', label: 'Khách hàng: Công ty An Bình' },
])

function removeFilter(key: string) {
  filters.value = filters.value.filter((item) => item.key !== key)
}
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center">
    <CTag
      v-for="filter in filters"
      :key="filter.key"
      color="primary"
      closable
      :close-text="`Bỏ điều kiện ${filter.label}`"
      @close="removeFilter(filter.key)"
    >
      {{ filter.label }}
    </CTag>
    <CButton
      v-if="filters.length < 2"
      variant="text"
      size="sm"
      @click="filters = [
        { key: 'status', label: 'Trạng thái: Chờ duyệt' },
        { key: 'customer', label: 'Khách hàng: Công ty An Bình' },
      ]"
    >
      Đặt lại ví dụ
    </CButton>
  </div>
</template>

Trong cột trạng thái của CTable

<script setup lang="ts">
// Dùng trong cột trạng thái của CTable: map giá trị từ API sang màu + nhãn một chỗ,
// để mọi màn hình hiển thị cùng một trạng thái giống nhau.
type OrderStatus = 'done' | 'pending' | 'rejected'

const STATUS: Record<OrderStatus, { color: 'success' | 'warning' | 'error', label: string }> = {
  done: { color: 'success', label: 'Hoàn thành' },
  pending: { color: 'warning', label: 'Chờ duyệt' },
  rejected: { color: 'error', label: 'Từ chối' },
}

const columns = [
  { title: 'Mã đơn', dataIndex: 'code', key: 'code' },
  { title: 'Khách hàng', dataIndex: 'customer', key: 'customer' },
  { title: 'Trạng thái', dataIndex: 'status', key: 'status', width: 140 },
]

const dataSource = [
  { id: 1, code: 'DH-0001', customer: 'Công ty An Bình', status: 'done' as OrderStatus },
  { id: 2, code: 'DH-0002', customer: 'Tập đoàn Bắc Sơn', status: 'pending' as OrderStatus },
  { id: 3, code: 'DH-0003', customer: 'Cửa hàng Cường Thịnh', status: 'rejected' as OrderStatus },
]
</script>

<template>
  <CTable
    row-key="id"
    :columns="columns"
    :data-source="dataSource"
    :pagination="false"
  >
    <template #bodyCell="{ column, record }">
      <CTag
        v-if="column.key === 'status'"
        :color="STATUS[record.status as OrderStatus].color"
        dot
      >
        {{ STATUS[record.status as OrderStatus].label }}
      </CTag>
    </template>
  </CTable>
</template>

API

Props

Tên	Kiểu	Mặc định	Mô tả
color	"default" | "primary" | "error" | "accent" | "success" | "warning" | "info"	'default'	Màu semantic của nhãn; nền mờ + chữ đậm cùng tông, luôn đạt tương phản AA.
dot	boolean	false	Hiển thị chấm tròn dẫn đầu.
closable	boolean	false	Hiện nút ✕ ở cuối (sự kiện close) — vd thẻ điều kiện lọc.
closeText	string	'Xoá'	Nhãn đọc màn hình của nút ✕ — nên nêu rõ đối tượng bị xoá.

Sự kiện

Tên	Payload	Mô tả
close	[]	Bấm nút ✕ (chỉ có khi `closable`) — trang tự bỏ nhãn khỏi danh sách.

Slot

Tên	Props của slot	Mô tả
#default	any	Nội dung nhãn.

Giao diện

Màu lấy từ cặp *-soft (nền) và màu chữ tương ứng của @tasco/theme — ý nghĩa từng màu ở Màu & tương phản:

Biến	Sáng	Tối	Tương phản
--tasco-color-success	#089b00	#22c55e	3.68:1 / 7.15:1
--tasco-color-success-soft	#ecfdf5	#10241a	1.05:1 / 1.00:1
--tasco-color-success-text	#087e02	#22c55e	5.26:1 / 7.15:1

Cần đổi khoảng cách hay bo góc: ghi đè class BEM c-tag, c-tag--<color>, c-tag__dot, c-tag__close. Không hardcode mã màu — thêm token vào @tasco/theme rồi dùng biến.

Khả năng tiếp cận

• Nút ✕ là phần tử <button type="button">, focus và bấm được bằng bàn phím.
• close-text là nhãn đọc màn hình duy nhất của nút đó, nên viết đủ nghĩa khi đứng một mình.
• Màu không phải kênh thông tin duy nhất: luôn có chữ trong nhãn; dot chỉ là bổ trợ.

Lưu ý

• Nhãn không tự cắt chữ dài — với nội dung dài, cắt ở tầng dữ liệu hoặc bọc trong CTooltip.
• Đừng dùng CTag làm nút: không có trạng thái focus và không phát sự kiện click.
• Map trạng thái sang màu ở một chỗ dùng chung (như demo cột trạng thái) để các màn hình không hiển thị khác nhau cho cùng một giá trị.

Liên quan

• CStatus — chỉ báo hoạt động/ngừng hoạt động.
• CTable — thanh điều kiện lọc dùng chính CTag đóng được.
• Màu & tương phản — bảng màu và cặp tương phản.