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
drdr-tag--green	Confirmed	Positive status — confirmed, complete, active
drdr-tag--red	Cancelled	Negative status — cancelled, failed, error
drdr-tag--grey	Pending	Neutral / pending — awaiting action, unknown

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 drdr-tag--green">Confirmed</span>
<span class="drdr-tag drdr-tag--red">Cancelled</span>
<span class="drdr-tag drdr-tag--grey">Pending</span>
          
        

Live example: