Badge

HTML

<!-- Colour badge -->
<span class="caat-badge caat-badge--primary">Primary</span>

<!-- Pill badge -->
<span class="caat-badge caat-badge--secondary caat-badge--pill">DBprime</span>

<!-- Badge on button with visually-hidden context -->
<button type="button" class="btn btn-primary position-relative">
  Messages
  <span class="caat-badge caat-badge--danger caat-badge--pill
              position-absolute top-0 start-100 translate-middle">
    4
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

<!-- Status badge with icon -->
<span class="caat-badge caat-badge--success caat-badge--pill">
  <i class="bi bi-check-circle-fill me-1" aria-hidden="true"></i>Active
</span>

HTL / Markup contract

<!-- Basic badge -->
<span class="caat-badge caat-badge--{variant}">
  {text}
</span>

<!-- Pill badge with icon -->
<span class="caat-badge caat-badge--{variant} caat-badge--pill">
  <i class="bi bi-{icon} me-1" aria-hidden="true"></i>
  {text}
</span>

<!-- Counter badge on button with visually-hidden context -->
<button type="button" class="btn btn-primary position-relative">
  {buttonLabel}
  <span class="caat-badge caat-badge--danger caat-badge--pill
              position-absolute top-0 start-100 translate-middle">
    {count}
    <span class="visually-hidden">{hiddenContext}</span>
  </span>
</button>

<!-- Status badge -->
<span class="caat-badge caat-badge--success caat-badge--pill">
  <i class="bi bi-check-circle-fill me-1" aria-hidden="true"></i>
  Active
  <span class="visually-hidden">membership status: active</span>
</span>

.caat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.35em 0.65em;
  border-radius: 0.375rem;
  white-space: nowrap;
  vertical-align: baseline;
}

.caat-badge--primary {
  background-color: var(--caat-blue-900, #003750);
  color: #fff;
}

.caat-badge--secondary {
  background-color: var(--caat-green-700, #367f32);
  color: #fff;
}

.caat-badge--warning {
  background-color: var(--caat-warning);
  color: var(--caat-ink);
}

.caat-badge--danger {
  background-color: var(--caat-danger);
  color: #fff;
}

.caat-badge--light {
  background-color: var(--caat-grey);
  color: var(--caat-ink, #102637);
  border: 1px solid var(--caat-grey-200, #dfe6ef);
}

.caat-badge--dark {
  background-color: var(--caat-ink, #102637);
  color: #fff;
}

.caat-badge--pill {
  border-radius: 50rem;
  padding: 0.35em 0.75em;
}

.caat-badge--soft-blue {
  background: var(--caat-blue-100);
  color: var(--caat-blue-900);
}

.caat-badge--active {
  background-color: var(--caat-success-bg, #d1e7dd);
  color: var(--caat-success-text, #0a3622);
}

.caat-badge--pending {
  background-color: var(--caat-warning-bg, #fff3cd);
  color: var(--caat-warning-text, #664d03);
}

.caat-badge--retired {
  background-color: var(--caat-blue-100, #e7f4fb);
  color: var(--caat-blue-900, #003750);
}

title: Badge
description: Small label for categorization, status, or notification counts.
fields:
  - name: text
    label: Badge Text
    type: textfield
    required: true
    maxLength: 30
    helpText: Short label (e.g., "Active", "DBplus", "4"). Max 30 characters.

  - name: variant
    label: Variant
    type: select
    required: true
    options:
      - value: primary
        label: Primary (CAAT Blue)
      - value: secondary
        label: Secondary (CAAT Green)
      - value: success
        label: Success
      - value: info
        label: Info
      - value: warning
        label: Warning
      - value: danger
        label: Danger
      - value: light
        label: Light
      - value: dark
        label: Dark
    helpText: Determines badge colour scheme.

  - name: pill
    label: Pill Shape
    type: checkbox
    required: false
    defaultValue: false
    helpText: Applies fully rounded corners. Recommended for status indicators and counters.

  - name: hiddenContext
    label: Visually Hidden Context
    type: textfield
    required: false
    maxLength: 80
    helpText: Screen-reader-only text appended to the badge (e.g., "unread messages"). Required when badge conveys non-decorative meaning.

  - name: icon
    label: Icon
    type: iconpicker
    required: false
    helpText: Optional Bootstrap Icon displayed before the label text (e.g., bi-check-circle-fill).