Tạo kiểu cho nhãn (labels) với CSS

Nhãn (labels/badge) dùng để hiển thị trạng thái: success, info, warning, danger... Dưới đây là cách tạo bộ nhãn hoàn chỉnh:

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 20px;
    }
    .label {
      font-size: 14px;
      font-weight: 600;
      color: white;
      padding: 6px 12px;
      border-radius: 4px;
      display: inline-block;
      margin-right: 8px;
      margin-bottom: 8px;
    }
    .success { background-color: #4caf50; }
    .info { background-color: #2196f3; }
    .warning { background-color: #ff9800; }
    .danger { background-color: #f44336; }
    .secondary { background-color: #6c757d; }
    .light { background-color: #e7e7e7; color: #333; }
  </style>
</head>
<body>
  <h1>Ví dụ Các Loại Nhãn (Labels)</h1>
  <span class="label success">Thành công</span>
  <span class="label info">Thông tin</span>
  <span class="label warning">Cảnh báo</span>
  <span class="label danger">Nguy hiểm</span>
  <span class="label secondary">Phụ</span>
  <span class="label light">Nhạt</span>
</body>
</html>

Kết quả

6 nhãn màu sắc khác nhau: xanh lá (success), xanh dương (info), cam (warning), đỏ (danger), xám (secondary), xám nhạt (light) - tất cả bo góc, chữ trắng/trắng, padding hợp lý.

Mở rộng

• Thêm hiệu ứng transition cho hover
• Tạo nhãn có thể đóng (dismissible) với nút ×
• Kết hợp với icon (Font Awesome) trước text