Alertalternative
Use Alert for prominent, longer messages with actionsBadge
Compact label for status, counts, or categorization. Draws attention to metadata without dominating the layout.
Setup
import { Badge } from '@fragments-sdk/ui';Examples
Default
Neutral badge for general labels
Loading preview...
Status Variants
All severity variants for different contexts
Loading preview...
With Dot
Live status indicators using dot prefix
Loading preview...
Announced Status
Opt into screen-reader status announcement behavior
Loading preview...
Outline
Minimal bordered badge for neutral emphasis
Loading preview...
Small Size
Compact badges for dense UIs
Loading preview...
Removable
User-created tags that can be dismissed
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Badge label text |
variant | enumdefaultsuccesswarningerrorinfooutline | default | Visual style indicating severity or category |
size | enumsmmdlg | md | Badge size |
dot | boolean | false | Show a colored dot indicator before the label |
icon | node | Not set | Optional icon element before the text |
onRemove | function | Not set | Makes the badge removable. Called when X is clicked. |
announce | boolean | false | Opt into role="status" live announcement semantics |
role | union | Not set | — |
Usage Guidelines
When to use
- Showing item status (active, pending, archived)
- Displaying counts or quantities inline
- Categorizing or tagging content
- Highlighting new or updated items
When not to use
- Conveying critical errors (use Alert instead)
- Long-form status messages (use Alert)
- Interactive filtering (use Chip/ToggleGroup)
- Navigation labels (use Tabs or links)
Best practices
- Keep badge text under 20 characters
- Use dot variant for live status indicators
- Pair success/error variants with meaningful labels, not just colors
- Use onRemove for user-created tags only, not system-generated badges
- Badges are not announced as live status updates by default; use announce for screen-reader status announcements when appropriate
Accessibility
- Badge text must be meaningful without relying on color alone
- Removable badges must have accessible dismiss button labels
- Avoid using badges as the sole indicator of important state changes