badge

A special link, not quite as prominent as a button, based on <Badge /> styling.

• Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role. One badge per row; two side by side is a sign the row needs a second column.
• For a colored dot without text, use StatusDot. For clickable filter chips that toggle a query, use the pill variant or a small Button.
• Badges are static labels. Don’t wire on:click onto them; promote to a Button or link if the user can act on the value.
• Keep badge content to text or icon + text. Never stack two icons or a child Badge inside a Badge.
• Pair lifecycle badges (Alpha, Beta, Early Access) with a Tooltip that names the limit, like Alpha: API may change before GA.
• Title Case, one word when possible, two max: Active, Pending, Pro, Enterprise Trial. Match the canonical API or log term: Production not Prod, Deployed not Live, Canceled not Cancelled (the Vercel API uses one L).
• Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal. Map meaning to color: green for healthy, red for error, amber for warning, blue for informational or production, gray for neutral. Use contrast="low" to tone any of them down on dense surfaces.
• Skip stuffing sentences inside (Currently Active, You are on Pro); the surrounding row supplies the context.
• Set title for icon-only or ambiguous badges so screen readers announce the meaning. Don’t rely on color alone; the text has to be readable without it.