AI Badge Generator.

Create a status badge with five semantic tones — neutral grey, info blue, success green, warning amber, error red — each pairing a tinted background with a darker text color at 4.5:1 or better. Give it two sizes: sm at 18px tall with 11px text, md at 22px tall with 12px text, both at a 999px radius with 8px horizontal padding, a fixed line-height and inline-flex with align-items center, so a badge dropped into a table cell cannot change the row height. Always render a text label — the tone is redundant encoding, never the only signal. Render it as a span with no tabindex and no role, because a status badge is read-only output and adding a focus stop for it clutters keyboard navigation through a table.

Create a numeric count badge that clamps displayed values above 99 to "99+" while keeping the true count in the accessible name. Set min-width equal to the badge height so a single digit renders as a circle rather than a narrow oval, use tabular-nums so the width does not jitter between values, and hide the badge entirely at zero rather than rendering an empty circle. Wrap the count in an element with role="status" and aria-live="polite" so an update is announced without interrupting, and phrase the accessible text as "3 unread messages" rather than a bare numeral. Do not use aria-live="assertive" — a count change almost never justifies cutting off whatever is being read.

Create a dot indicator that anchors to the top-right of an icon or avatar: an 8px circle positioned absolutely with a small negative offset so it overhangs the edge, plus a 2px ring in the page surface color so it stays legible over a photo or a busy icon. Give the wrapper position: relative and explicitly no overflow: hidden — if the wrapper needs rounding, move the border-radius to an inner element so the dot is not clipped. Because a bare dot conveys nothing to a screen reader or a colorblind user, pair it with a visually hidden label naming the state or count. Mark the dot itself aria-hidden="true" so the label is announced once.

Create a removable tag chip: a label plus a dismiss control that is a real button element, not a span with a click handler, with aria-label naming the specific tag such as "Remove design" rather than a generic "Remove". Give the button a 16px glyph inside a 24px hit area, a visible focus ring, and Backspace or Delete as an alternative to Enter when it has focus. After removal, move focus to the next remaining chip, or to the group container when the last one is removed, so focus never lands on a detached node. Announce the removal through a polite live region. Keep the chip on the same height scale as the status badge so a row mixing both stays aligned.

Create a badge variant with a 12px leading icon before the label, one distinct glyph per state so severity survives in grayscale: a check for passed, a spinning arc for running, an octagon for failed, a clock for queued. Mark the icon aria-hidden="true" since the label already carries the meaning. Keep the icon optically aligned to the text baseline rather than centered on the line box, and hold the overall badge height identical to the icon-less variant so a mixed column in a table does not develop two row heights. For the running state, drive the spin with a CSS animation and replace it with a static arc under prefers-reduced-motion rather than removing the icon.

Create an outlined badge variant: a 1px border in the tone color, a transparent background, and label text in the same tone at a darkened step so it holds 4.5:1 against both light and dark surfaces. Match the filled variant on height, radius, padding and line-height exactly, so the two can be swapped per column without any row reflowing — account for the 1px border inside the box by using box-sizing: border-box rather than reducing the padding. Provide a variant prop with filled and outline values on one component rather than a second component. Verify the border remains visible against a hovered table row background, which is the case that usually makes outline badges disappear.