Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Nhãn trạng thái

Để chốt trạng thái của một dòng thành một từ khi các dòng khác nhau.

Hiển thị dữ liệu

Xem trước trực tiếp

Nguồn

<ul class="dc-badges">
  <li><span class="dc-badge dc-badge--ok"><span class="dc-badge__dot" aria-hidden="true"></span>승인</span></li>
  <li><span class="dc-badge dc-badge--warn"><span class="dc-badge__dot" aria-hidden="true"></span>검토 중</span></li>
  <li><span class="dc-badge dc-badge--danger"><span class="dc-badge__dot" aria-hidden="true"></span>반려</span></li>
  <li><span class="dc-badge dc-badge--info"><span class="dc-badge__dot" aria-hidden="true"></span>접수</span></li>
  <li><span class="dc-badge"><span class="dc-badge__dot" aria-hidden="true"></span>임시저장</span></li>
</ul>
.dc-badges {
  display: flex; flex-wrap: wrap; gap: var(--dc-2);
  margin: 0; padding: 0; list-style: none;
  font-family: var(--dc-font);
}
.dc-badge {
  display: inline-flex; align-items: center; gap: var(--dc-1);
  min-height: 24px; padding: 0 var(--dc-2);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-full);
  background: var(--dc-sunken);
  color: var(--dc-text-sub);
  font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.dc-badge__dot {
  width: 6px; height: 6px; border-radius: var(--dc-r-full);
  background: currentColor;
}
.dc-badge--ok {
  background: var(--dc-ok-soft); color: var(--dc-ok);
  border-color: color-mix(in srgb, var(--dc-ok) 30%, transparent);
}
.dc-badge--warn {
  background: var(--dc-warn-soft); color: var(--dc-warn);
  border-color: color-mix(in srgb, var(--dc-warn) 30%, transparent);
}
.dc-badge--danger {
  background: var(--dc-danger-soft); color: var(--dc-danger);
  border-color: color-mix(in srgb, var(--dc-danger) 30%, transparent);
}
.dc-badge--info {
  background: var(--dc-info-soft); color: var(--dc-info);
  border-color: color-mix(in srgb, var(--dc-info) 30%, transparent);
}
.dc-badge--outline {
  background: transparent; border-color: var(--dc-line-bold); color: var(--dc-text);
}
.dc-badge--outline.dc-badge--ok { border-color: var(--dc-ok); color: var(--dc-ok); }
.dc-badge--outline.dc-badge--danger { border-color: var(--dc-danger); color: var(--dc-danger); }
.dc-badge-host {
  display: inline-flex; align-items: center; gap: var(--dc-2);
  min-height: 44px; padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-bold); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: var(--dc-font); font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.dc-badge--count {
  min-width: 20px; min-height: 20px; padding: 0 6px;
  justify-content: center;
  background: var(--dc-brand); border-color: transparent;
  color: var(--dc-text-on);
  font-variant-numeric: tabular-nums;
}

Cách dùng

  • Không truyền nghĩa chỉ bằng màu — luôn có chữ kèm theo
  • Giữ tập tên trạng thái dưới năm và không trộn cách gọi trong một màn hình
  • Nhãn để đọc, không để bấm; cần bấm thì dùng tag hoặc nút

Điểm cần lưu ý

  • Dùng nền -soft với chữ màu đậm; hai màu nhạt chồng nhau sẽ dưới 4.5:1
  • Số đếm chặn ở 99+ và ghi rõ đang đếm gì trong span dc-sr

Tiếp theo