drdr-tag overview

Use tags to show the status or category of an item inline. Tags are non-interactive — they are labels only, not buttons or links.

Accessibility

  • Apply drdr-tag on an inline element (e.g. <span>)
  • Tags carry no interactive affordance — do not use them as buttons or links
  • Colours are intentionally hardcoded to NHS design system tag values and do not change with the active theme

Props

These are the CSS class modifiers available on the drdr-tag component.

Colour modifiers

Applied as an additional class on the element alongside drdr-tag.

Modifier Preview Use for
none Default Neutral status, informational labels
-green Confirmed Positive status — confirmed, complete, active
-red Cancelled Negative status — cancelled, failed, error
-grey Pending Neutral / pending — awaiting action, unknown
-warning In progress Attention / in-progress — pale amber background with dark text

Shape and size modifiers

Modifier Preview Use for
-pill Pill Fully rounded pill shape
-lg Large Larger tag (the default is intentionally compact)

Tags are non-interactive. Do not apply them to <button> or <a> elements — use the button or alert components instead.

Variants

Use a colour modifier alongside the base class to communicate status semantically.

          
<span class="drdr-tag">Default</span>
<span class="drdr-tag -green">Confirmed</span>
<span class="drdr-tag -red">Cancelled</span>
<span class="drdr-tag -grey">Pending</span>
<span class="drdr-tag -warning">In progress</span>

Live example:

Default Confirmed Cancelled Pending In progress

Icons in tags

Place an icon before the label — it inherits the tag's text colour and scales with the font size. Combine the warning, pill and large modifiers for the appointment "Change in progress" status (pale amber, dark text + icon).

          
<span class="drdr-tag -warning -pill -lg">
  <i class="icon icon--warning" aria-hidden="true"></i> Change in progress
</span>

Live example:

Change in progress

Badge

Use drdr-badge for notification counts and status indicators.

<span class="drdr-badge">3</span>

Live example:

1 3 99