Badge Sizes Reference
| Size | Class | Font Size | Padding | Example |
|---|---|---|---|---|
| XS | .pa-badge--xs | 1rem (10px) | 0.2rem 0.4rem | Extra Small |
| SM | .pa-badge--sm | 1.2rem (12px) | 0.25rem 0.5rem | Small Badge |
| Default | .pa-badge | 1.2rem (12px) | 0.4rem 0.8rem | Default Badge |
| LG | .pa-badge--lg | 1.4rem (14px) | 0.5rem 1rem | Large Badge |
| XL | .pa-badge--xl | 1.6rem (16px) | 0.6rem 1.2rem | Extra Large |
Simple badges for status indication and categorization
Default Badges
Small Badges
Rounded badges for a softer, modern appearance
Regular Pills
Small Pills
Enhanced badges with icon indicators
Label Sizes Reference
| Size | Class | Font Size | Padding | Example |
|---|---|---|---|---|
| XS | .pa-label--xs | 1rem (10px) | 0.2rem 0.4rem | Extra Small |
| SM | .pa-label--sm | 1.2rem (12px) | 0.25rem 0.5rem | Small Label |
| Default | .pa-label | 1.2rem (12px) | 0.4rem 0.8rem | Default Label |
| LG | .pa-label--lg | 1.4rem (14px) | 0.5rem 1rem | Large Label |
| XL | .pa-label--xl | 1.6rem (16px) | 0.6rem 1.2rem | Extra Large |
Text labels for categorization and tagging
Basic Labels
Outlined Labels
Display many badges with automatic overflow handling - shows 5 badges and "... N more" indicator
Legacy Mode: Project Tags (15 total)
Legacy Mode: User Skills (7 total, isPill style)
Status Badges (8 total, small size)
limit prop (e.g., <BadgeGroup limit=10>). Narrow Container Demo
Full Width Comparison
Wrapping Demo (Static)
Full Width Comparison
Use generic data from database/API with member mappings - no need to transform data first!
Simple Member Mapping (Non-clickable)
Map properties from your data objects directly (category maps to variant colors)
Custom Callbacks with Click Handling
Click badges to see product details! Callbacks handle transformations and clicks.
displayValueMember, variantMember, pillMember, sizeMember to map
properties, or use callbacks like getDisplayValueCallback for custom logic.
Add onbadgeclick to handle clicks and get the full data item back! Works with
any data structure from your API/database. 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.)
wr-3 to wr-10 combined with text-truncate for fixed-width badges.
Use isEllipsisStart prop to truncate from the left side instead. Display composite badges from database/API data with member mappings and click handlers
Task List with Comment Counts
Click task name to open, click comment count to view comments
onlabelclick and onbuttonclick to handle
interactions separately. Works with any data structure! Real-world examples of badges and labels in context
User Status
Project Tags
Website Redesign
API Integration
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.
Examples with click handlers and dynamic behavior