Badge

• Renders a plain span, so it is read inline with surrounding text.
• The icon is aria-hidden; the label must state the status on its own, not rely on tone color.
• Outgoing labels are hidden from assistive tech while they fade, so only the current text is read.
• It does not announce changes. Put it inside a live region if a status update must be spoken.

• A new label rises in with a short blur while the old one lifts away, and the pill width springs to fit.
• Passive reflows such as font swaps resize instantly; only a content change springs.
• Reduced motion swaps the label with a quick fade and snaps the width.

• The pill sizes to its label and never wraps, so keep labels to a word or two in narrow cells.
• Hover styles apply only on hover-capable fine pointers.

• Each badge has a ResizeObserver for the width spring; fine per row, but avoid thousands in one table.
• Font swaps and passive reflows resize instantly; only content changes animate.

• Use for short statuses and counts next to titles or in table cells. Use alert or toast for messages with sentences.
• Use dot for live states (online, syncing, down) and an icon when the shape adds meaning; the label is optically centred either way.
• Use tone for status and color for categories (GET teal, POST sky, PUT orchid, PATCH violet, DELETE rose); never use a categorical colour to mean success or failure.
• Keep the badge mounted and change its children to get the morph; remounting with a new key loses it.

The full library index for assistants is at /llms.txt.