Badges are used to call attention to status, and come in a strong "filled" and light "outline" form.

Features:

- Supports multiple variants: "default", "brand", "inverted", "component", "success", "warning", and "error" for different semantic meanings. - The `strong` prop toggles between a filled (strong) and outlined (subtle) appearance. - Can display icons (e.g., status dots) alongside text for richer context. - Designed to be compact and easily embeddable in lists, cards, or next to headings.

Usage:

- Use badges to highlight new or beta features, status changes (e.g., "Added", "Removed"), or user roles (e.g., "Admin"). - Combine with icons to visually reinforce meaning (e.g., a dot for status). - Place badges near the content they annotate, such as next to feature names or user names.

Best Practices:

- Avoid overusing badges, as too many can reduce their impact. - Choose variant colors that align with your application's semantic color system. - Use concise, clear text within badges for quick recognition. - Ensure badges have sufficient contrast for accessibility.

Accessibility:

- Badges should have accessible text and sufficient color contrast. - When used with icons, ensure the icon is decorative or has an accessible label if it conveys meaning.