DYDevKitYard
ElementYard
Components

Badge Components

Preview, test and copy 4 focused badge components. Each example includes self-contained semantic HTML, CSS and a TypeScript React component.

Browse badgesDashboard UI Pack

Badges patterns

Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.

4 patterns

Status badges

Text-labelled status indicators for common application states.

statuslabels

Accessibility

  • Every status has a text label; colour is supplementary.
  • Uses native semantic elements and visible keyboard focus.
  • Text and controls do not rely on colour alone.

Responsive behaviour

  • Reflows below 620px without horizontal page overflow.
  • Interactive targets remain usable for touch and zoom.

Neutral badges

Non-interactive metadata labels for categories and versions.

metadataneutral

Accessibility

  • Plain spans communicate non-interactive metadata honestly.
  • Uses native semantic elements and visible keyboard focus.
  • Text and controls do not rely on colour alone.

Responsive behaviour

  • Reflows below 620px without horizontal page overflow.
  • Interactive targets remain usable for touch and zoom.

Dot status badge

A compact status where the dot reinforces explicit text.

dotavailability

Accessibility

  • Dots are decorative because status words carry the meaning.
  • Uses native semantic elements and visible keyboard focus.
  • Text and controls do not rely on colour alone.

Responsive behaviour

  • Reflows below 620px without horizontal page overflow.
  • Interactive targets remain usable for touch and zoom.

Linked category tags

Clearly interactive category tags implemented as links.

categorieslinks

Accessibility

  • Interactive tags are links with real destinations, unlike informational badge spans.
  • Uses native semantic elements and visible keyboard focus.
  • Text and controls do not rely on colour alone.

Responsive behaviour

  • Reflows below 620px without horizontal page overflow.
  • Interactive targets remain usable for touch and zoom.

Implementation notes

These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.