Badges
Use small badges to mark statuses like new, beta, required, deprecated, or recommended.
Badges are helpful when you need a short status signal without interrupting the paragraph flow.
Use in MDX
Add a Badge inline anywhere inside an .mdx article:
<Badge tone="info">New</Badge>Available tones:
neutralinfosuccesswarningdanger
Implementation notes
The component lives in src/components/docs/Badge.astro. To adjust sizing or tones, update that file and the .docs-badge* rules in src/index.css.
Preview
Default New Recommended Beta Deprecated
You can also use badges inline with text, like Required steps or Optional integrations.