Badges, labels, and composite badges for status display and categorization.
Referencia de tamaños de insignia
| Tamaño | Clase | Tamaño de fuente | Relleno | Ejemplo |
|---|---|---|---|---|
| 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 |
Insignias básicas
Simple badges for status indication and categorization
Insignias predeterminadas
Default
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Insignias pequeñas
Default
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Insignias tipo píldora
Rounded badges for a softer, modern appearance
Píldoras normales
Default
Primary
Secondary
Success
Warning
Danger
Info
Píldoras pequeñas
Default
Primary
Secondary
Success
Warning
Danger
Info
Insignias con iconos
Enhanced badges with icon indicators
✓
Completado
!
Advertencia
✕
Error
ℹ
Información
★
Destacado
⏱
Pendiente
Referencia de tamaños de etiqueta
| Tamaño | Clase | Tamaño de fuente | Relleno | Ejemplo |
|---|---|---|---|---|
| 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 |
Etiquetas
Text labels for categorization and tagging
Etiquetas básicas
Frontend
React
TypeScript
Corrección de errores
Mejora
Cambio incompatible
Documentación
Etiquetas con contorno
Frontend
React
TypeScript
Corrección de errores
Mejora
Cambio incompatible
Documentación
Grupos de insignias con límites
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.
Contenedor estrecho
React
TypeScript
Node.js
Express
PostgreSQL
Redux
Sass
Docker
AWS
Redis
GraphQL
Jest
Webpack
ESLint
GitHub Actions
» 10 more
« Collapse
Comparación de ancho completo
React
TypeScript
Node.js
Express
PostgreSQL
Redux
Sass
Docker
AWS
Redis
GraphQL
Jest
Webpack
ESLint
GitHub Actions
» 10 more
« Collapse
Demostración de ajuste de línea (estática)
React
Vue
Angular
Svelte
Solid
TypeScript
JavaScript
Python
Go
Rust
Java
C++
Elixir
Comparación de ancho completo
React
Vue
Angular
Svelte
Solid
TypeScript
JavaScript
Python
Go
Rust
Java
C++
Elixir
Insignias de ancho fijo con puntos suspensivos
Badges with constrained width show ellipsis for overflow text. Hover for tooltip with full text.
Varios anchos fijos
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
Insignias pequeñas de ancho fijo
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.
Insignias compuestas
Three-part badges with separate icon, label, and button sections
Variaciones de color estándar
✓
Primary
⚙
Secondary
★
Success
🔥
Danger
⚠
Warning
ℹ
Info
◇
Light
◆
Dark
Más ejemplos
🔥
Critical
◇
Draft
◆
Published
Avanzado: colores de sección mixtos
For advanced customization, you can mix individual section colors using separate classes.
📁
Project Alpha
🎯
Target Met
⚡
High Performance
🔧
Maintenance
Insignias compuestas interactivas
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.
Ejemplos de uso
Real-world examples of badges and labels in context
Estado del usuario
John Doe
En línea
Jane Smith
Ausente
Mike Johnson
Sin conexión
Etiquetas del proyecto
Rediseño del sitio web
Frontend
Diseño
Prioridad alta
Integración de API
Backend
REST API
Crítico