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 |
Basic Badges
Simple badges for status indication and categorization
Default Badges
Default
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Small Badges
Default
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Pill Badges
Rounded badges for a softer, modern appearance
Regular Pills
Default
Primary
Secondary
Success
Warning
Danger
Info
Small Pills
Default
Primary
Secondary
Success
Warning
Danger
Info
Badges with Icons
Enhanced badges with icon indicators
✓
Completed
!
Warning
✕
Error
ℹ
Info
★
Featured
⏱
Pending
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 |
Labels
Text labels for categorization and tagging
Basic Labels
Frontend
React
TypeScript
Bug Fix
Enhancement
Breaking Change
Documentation
Outlined Labels
Frontend
React
TypeScript
Bug Fix
Enhancement
Breaking Change
Documentation
Badge Groups with Limits
Display many badges with automatic overflow handling - shows 5 badges and "... N more" indicator
Project Tags (15 total, showing 5)
React
TypeScript
Node.js
Express
PostgreSQL
Redux
Sass
Docker
AWS
Redis
GraphQL
Jest
Webpack
ESLint
GitHub Actions
»
10 more
User Skills (34 total, showing 5)
JavaScript
Python
Java
C++
Ruby
Go
Rust
»
29 more
Small Badges (8 total, showing 5)
Approved
Pending
Rejected
Review
Draft
Published
Archived
Deleted
»
3 more
Note: The visible limit is controlled by
$badge-group-visible-limit SCSS variable (default: 5). Future Svelte component will make this configurable per instance.
Wrapping Demo
29 badges in narrow container
React
Vue
Angular
Svelte
Solid
TypeScript
JavaScript
Python
Go
Rust
Java
C++
C#
Ruby
PHP
Swift
Kotlin
Dart
Scala
Elixir
Haskell
Clojure
Elm
F#
OCaml
Erlang
Julia
R
MATLAB
Full Width Comparison
Same 29 badges with full width
React
Vue
Angular
Svelte
Solid
TypeScript
JavaScript
Python
Go
Rust
Java
C++
C#
Ruby
PHP
Swift
Kotlin
Dart
Scala
Elixir
Haskell
Clojure
Elm
F#
OCaml
Erlang
Julia
R
MATLAB
Fixed-Width Badges with Ellipsis
Badges with constrained width show ellipsis for overflow text. Hover for tooltip with full text.
Various Fixed Widths
Short
This is medium text
This is longer text that will be truncated
Very long badge text that definitely needs ellipsis
Super extremely long badge text example
Small Fixed-Width Badges
OK
Status
Completed Task
Pending Review Process
Critical Error in Production
Practical Example: Tags with Consistent Width
JavaScript
TypeScript
React
Node.js
PostgreSQL Database
Express.js Framework
Left-Side Ellipsis (Path/Hierarchy Display)
When the important part is at the end (breadcrumbs, file paths, etc.)
Settings > User Preferences > Notifications > Email
/var/www/html/application/config/database.php
Components > Forms > Inputs > TextArea.svelte
Europe > Germany > Berlin > Mitte > Alexanderplatz
Note: Custom tooltips show full text on hover. Width classes range from
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
John Doe
Online
Jane Smith
Away
Mike Johnson
Offline
Project Tags
Website Redesign
API Integration
Composite Badges
Three-part badges with separate icon, label, and button sections
Standard Color Variations
✓
Primary
⚙
Secondary
★
Success
🔥
Danger
⚠
Warning
ℹ
Info
◇
Light
◆
Dark
More Examples
🔥
Critical
◇
Draft
◆
Published
Advanced: Mixed Section Colors
For advanced customization, you can mix individual section colors using separate classes.
📁
Project Alpha
🎯
Target Met
⚡
High Performance
🔧
Maintenance
Interactive Composite Badges
Examples with click handlers and dynamic behavior
📋
Task #1234
👤
John Doe
🏷️
v2.1.0
Demo Actions: Click labels to view details, click buttons for actions. Check browser console for event logs.
CSS Classes Reference
Badges
pa-badge- Base badgepa-badge--xs- Extra smallpa-badge--sm- Smallpa-badge--lg- Largepa-badge--xl- Extra largepa-badge--pill- Rounded pill shapepa-badge--ellipsis-left- Left-side text truncationpa-badge__icon- Icon element inside badge
Badge Colors
pa-badge--primary- Primary/accent colorpa-badge--secondary- Secondary/mutedpa-badge--success- Success (green)pa-badge--warning- Warning (yellow/orange)pa-badge--danger- Danger (red)pa-badge--info- Info (blue)pa-badge--light- Lightpa-badge--dark- Dark
Badge Groups
pa-badge-group- Container for grouped badges (limits visible to 5)pa-badge-group--show-all- Show all badges without limit
Labels
pa-label- Base label (bordered variant of badge)pa-label--xs/sm/lg/xl- Sizespa-label--outline- Transparent backgroundpa-label--primary/secondary/success/warning/danger/info- Colors
Composite Badges
pa-composite-badge- Three-part badge containerpa-composite-badge--primary/secondary/success/warning/danger/info/light/dark- Colorspa-composite-badge__icon- Left icon sectionpa-composite-badge__label- Middle label section (clickable)pa-composite-badge__button- Right action buttonpa-composite-badge--label-*- Override label section colorpa-composite-badge--btn-*- Override button section color