Basic Badges
Simple badges for status indication and categorization
Default Badges
Small Badges
Pill Badges
Rounded badges for a softer, modern appearance
Regular Pills
Small Pills
Badges with Icons
Enhanced badges with icon indicators
Labels
Text labels for categorization and tagging
Basic Labels
Outlined Labels
Badge Groups with Limits
Display many badges with automatic overflow handling - shows 5 badges and "... N more" indicator
Project Tags (15 total, showing 5)
User Skills (34 total, showing 5)
Small Badges (8 total, showing 5)
$badge-group-visible-limit SCSS variable (default: 5). Future Svelte component will make this configurable per instance.
Wrapping Demo
29 badges in narrow container
Full Width Comparison
Same 29 badges with full width
Fixed-Width Badges with Ellipsis
Badges with constrained width show ellipsis for overflow text. Hover for tooltip with full text.
Various Fixed Widths
Small Fixed-Width Badges
Practical Example: Tags with Consistent Width
Left-Side Ellipsis (Path/Hierarchy Display)
When the important part is at the end (breadcrumbs, file paths, etc.)
pa-badge--w-1x to pa-badge--w-10x. Use pa-badge--ellipsis-left to truncate from the left side instead.
Usage Examples
Real-world examples of badges and labels in context
User Status
Project Tags
Website Redesign
API Integration
Composite Badges
Three-part badges with separate icon, label, and button sections
Standard Color Variations
More Examples
Advanced: Mixed Section Colors
For advanced customization, you can mix individual section colors using separate classes.
Interactive Composite Badges
Examples with click handlers and dynamic behavior