Skip to main content

Search

Badge Component Breakdown

Overview

The dd-badge component is a compact, non-interactive pill used to communicate a status or severity level at a glance, such as critical, warning, info, or pass. Its colour-coded surface pairs with a short text label for fast, scannable recognition.

This component is ideal for audit summaries, dashboards, and inline status indicators next to titles or table cells. In WordPress, configure it via ACF fields for severity and label. In Drupal, use a Paragraph type with a select field for severity and a text field for the label, allowing dynamic rendering based on data.

Basic Usage

Wrap the badge in a container with class dd-badge and place the visible text inside a dd-badge__label element. Apply a severity modifier such as -critical or omit it for the neutral variant. An optional dd-badge__icon may precede the label.

Preview

Critical Warning Info Pass 14 tasks

Code

<span class="dd-badge -critical"><span class="dd-badge__icon" aria-hidden="true">🔴</span><span class="dd-badge__label">Critical</span></span>
<span class="dd-badge -warning"><span class="dd-badge__icon" aria-hidden="true">⚠️</span><span class="dd-badge__label">Warning</span></span>
<span class="dd-badge -info"><span class="dd-badge__icon" aria-hidden="true">ℹ️</span><span class="dd-badge__label">Info</span></span>
<span class="dd-badge -pass"><span class="dd-badge__icon" aria-hidden="true">✅</span><span class="dd-badge__label">Pass</span></span>
<span class="dd-badge"><span class="dd-badge__label">14 tasks</span></span>

Use spacers or inline gaps when placing multiple badges in a row.

CSS Modifiers (from _dd_badge.scss)

The SCSS file defines the base pill shape, padding, and typography, with severity modifiers mapping to design tokens. Key modifiers include:

  • -critical: Error tokens for the most severe status.
  • -warning: Warning tokens for cautionary status.
  • -info: Info tokens for neutral informational status.
  • -pass: Success tokens for passing or healthy status.
  • No modifier: Neutral variant using default surface tokens for unclassified status.

Framework files

  • source/scss/components/_dd_badge.scss (styles)

Accessibility and Best Practices

Meaning is carried by the dd-badge__label text, never by colour alone (WCAG 1.4.1 Use of Colour), so a badge remains understandable in greyscale or to colour-blind users. The optional dd-badge__icon is decorative and marked aria-hidden="true". The badge is non-interactive, so it takes no role, tabindex, or focus. Keep labels short and unambiguous, and ensure the surface and text colours meet WCAG AA contrast.