Tag

Classification label.

html

<span class="tag tag--solid" style="--c:#F5C2E0;">
  Bug
  
</span>
<style>
.tag { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px system-ui, sans-serif;
  padding: 3px 8px; border-radius: 4px; box-sizing: border-box; border: 1.5px solid var(--c); line-height: 1.4; }
.tag--solid { background: var(--c); color: #241430; }
.tag--outline { background: transparent; color: var(--c); }
.tag__remove { border: none; background: transparent; color: inherit; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; opacity: .7; }
.tag__remove:hover { opacity: 1; }
.tag__remove:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<span class="tag-tw tag-tw--solid inline-flex items-center gap-1 font-semibold text-[11.5px] px-2 py-0.5 rounded box-border border-[1.5px] leading-snug" style="--c:#F5C2E0;">
  Bug
  
</span>
<style>
.tag-tw { border-color: var(--c); }
.tag-tw--solid { background: var(--c); color: #241430; }
.tag-tw--outline { background: transparent; color: var(--c); }
</style>

react

export function Tag({
  label = "Bug",
  variant = "solid",
  color = "#F5C2E0",
  removable = false,
}) {
  const palette = variant === "solid"
    ? { background: color, color: "#241430", borderColor: color }
    : { background: "transparent", color, borderColor: color };
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontWeight: 600, fontSize: 11.5,
      padding: "3px 8px", borderRadius: 4, boxSizing: "border-box", border: "1.5px solid", lineHeight: 1.4, ...palette }}>
      {label}
      {removable && (
        <button type="button" aria-label={`Remove ${label} tag`} style={{ border: "none", background: "transparent",
          color: "inherit", fontSize: 12, lineHeight: 1, cursor: "pointer", padding: 0, opacity: 0.7 }}>×</button>
      )}
    </span>
  );
}