Badges, labels, and composite badges for status display and categorization.
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 |
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
Server-side: Project Tags (15 total, click loads from server)
React
TypeScript
Node.js
Express
PostgreSQL
» 10 more
Client-side: User Skills (7 total, JS toggle, no server round-trip)
JavaScript
Python
Java
C++
Ruby
Go
Rust
» 2 more
« Collapse
Client-side: Status Badges (8 total, small size)
Approved
Pending
Rejected
Review
Draft
Published
Archived
Deleted
» 3 more
« Collapse
Two modes: Set
on_toggle="event_name" for server-side loading (fires LiveView event). Omit it for client-side JS toggle (no round-trip). Both support limit, total, and translatable more_text/collapse_text.
Narrow Container
React
TypeScript
Node.js
Express
PostgreSQL
Redux
Sass
Docker
AWS
Redis
GraphQL
Jest
Webpack
ESLint
GitHub Actions
» 10 more
« Collapse
Full Width Comparison
React
TypeScript
Node.js
Express
PostgreSQL
Redux
Sass
Docker
AWS
Redis
GraphQL
Jest
Webpack
ESLint
GitHub Actions
» 10 more
« Collapse
Wrapping Demo (Static)
React
Vue
Angular
Svelte
Solid
TypeScript
JavaScript
Python
Go
Rust
Java
C++
Elixir
Full Width Comparison
React
Vue
Angular
Svelte
Solid
TypeScript
JavaScript
Python
Go
Rust
Java
C++
Elixir
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
Start-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: Use
max_width="5" etc. to constrain badge width with truncation. Use is_ellipsis_start to truncate from the start side instead.
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
Try it: Click label text to see details flash, click the button (×, ✎, ↓) for action flash. Uses
on_label_click and on_button_click attrs with separate LiveView events.
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
Frontend
Design
High Priority
API Integration
Backend
REST API
Critical