Labels

Summary

Chip-style tags for user-applied metadata ("backend", "urgent"). Unlike lozenges (fixed status vocabulary) labels are freeform, link-friendly, and can be removable (closeable) or split into a text link + remove link.

The element chooses the text color: an <a class="neura-label"> renders in link color (border darkens on hover/focus), a <span class="neura-label"> in plain text color. Adjacent labels space themselves: each carries a 5px end margin, so a row of chips needs no wrapper.

Examples

documentation backend urgent frontend

HTML

<span class="neura-label">documentation</span>

<a class="neura-label" href="/labels/backend">backend</a>

<span class="neura-label neura-label-closeable">urgent<span
  class="neura-icon neura-icon-close" role="button" tabindex="0"
  aria-label="Remove label urgent"></span></span>

<span class="neura-label neura-label-closeable neura-label-split">
  <a class="neura-label-split-main" href="/labels/frontend">frontend</a><span
    class="neura-label-split-close neura-icon-close" role="button" tabindex="0"
    aria-label="Remove label frontend"></span>
</span>

JavaScript

Labels are CSS-only; removal is your click handler (this demo wires exactly this snippet):

document.querySelectorAll('.neura-label [role="button"]').forEach((btn) => {
  const remove = () => btn.closest('.neura-label').remove();
  btn.addEventListener('click', remove);
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); remove(); }
  });
});

CSS classes

Class	Effect
`.neura-label`	The chip. The element picks the text color: an `<a>` renders in link color, a `<span>` in body color.
`.neura-label-closeable`	Reserves space for a trailing close control: a `<span class="neura-icon-close" role="button" tabindex="0">` inside the label.
`.neura-label-split`	Split variant: the label body and the close control are separate segments.
`.neura-label-split-main`	The link segment of a split label.
`.neura-label-split-close`	The close segment of a split label; pair with `.neura-icon-close`.

AUI compatibility

Full parity: aui-label* classes alias onto the neura-label* rules, including AUI's exact 8×8 close-icon size. CSS-only; removal behavior is the consumer's click handler (see JavaScript above).