Directory
- Welcome
New
Badge Component
The Badge component creates compact, visually distinct labels perfect for displaying status indicators, counts, or categories. Its minimal footprint and flexible styling make it ideal for adding quick visual cues throughout your interface.
Quick Start
<Badge variant="primary">New Feature</Badge><Badge variant="warning" size="sm">Beta</Badge><Badge variant="error" styling="minimal">Critical</Badge>Variants & Sizes
Standard Variants
Default
Primary
Tip
Info
Warning
Error
Minimal Style
Default
Primary
Tip
Info
Warning
Error
Outline Style
Default
Primary
Tip
Info
Warning
Error
Size Options
Small
Medium
Default
Large
Customization
Custom Shape
Square Edges
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | primary | tip | info | warning | error | default | Visual style |
| size | sm | md | default | lg | default | Badge size |
| styling | default | minimal | outline | default | Style variant |
Best Practices
-
Consistent Usage
- Use the same variant for similar types of information
- Maintain consistent sizing within similar contexts
- Group related badges together when appropriate
-
Content Guidelines
- Keep text concise and clear
- Use sentence case for badge text
- Avoid truncating badge content
-
Visual Hierarchy
- Use more prominent variants sparingly
- Consider size in relation to surrounding content
- Maintain adequate spacing between multiple badges
Common Use Cases
Status Indicators
Category Labels
Version Tags
Notification Counts
Priority Markers
Feature Flags
Update Indicators
Limited Time Launch Sale
Ready to enhance your UI with beautiful, responsive badges? Get our AstroJS starter template now and access the Badge component along with our complete UI toolkit.
GET 60% OFF!
