Chip + Pill
Etiquetas inline para filtros, estados, tags y categorías. Distintos de .badge (contador/notificación) y de los inputs .tag. .chip = pastilla soft tintada · .pill = pequeña con borde.
Default
Activo
Trial
Vencido
Beta
Neutral
Copy
<div style="display:flex; flex-wrap:wrap; gap:.5rem">
<span class="chip">Default</span>
<span class="chip success">Activo</span>
<span class="chip warn">Trial</span>
<span class="chip danger">Vencido</span>
<span class="chip info">Beta</span>
<span class="chip neutral">Neutral</span>
</div>
Copy
<span class="chip">Default</span>
<span class="chip success">Activo</span>
<span class="chip warn">Trial</span>
<span class="chip danger">Vencido</span>
<span class="chip info">Beta</span>
<span class="chip neutral">Neutral</span>
Copy
<span class="chip">Default</span>
<span class="chip success">Activo</span>
<span class="chip warn">Trial</span>
<span class="chip danger">Vencido</span>
<span class="chip info">Beta</span>
<span class="chip neutral">Neutral</span>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Brand
Pagado
Pendiente
Error
Procesando
Copy
<div style="display:flex; flex-wrap:wrap; gap:.5rem">
<span class="chip solid">Brand</span>
<span class="chip solid success">Pagado</span>
<span class="chip solid warn">Pendiente</span>
<span class="chip solid danger">Error</span>
<span class="chip solid info">Procesando</span>
</div>
Copy
<span class="chip solid">Brand</span>
<span class="chip solid success">Pagado</span>
<span class="chip solid warn">Pendiente</span>
<span class="chip solid danger">Error</span>
Copy
<span class="chip solid">Brand</span>
<span class="chip solid success">Pagado</span>
<span class="chip solid warn">Pendiente</span>
<span class="chip solid danger">Error</span>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Todos
POS
Inventory
HR
CRM
Copy
<div style="display:flex; flex-wrap:wrap; gap:.5rem">
<button class="chip outline">Todos</button>
<button class="chip outline active">POS</button>
<button class="chip outline">Inventory</button>
<button class="chip outline">HR</button>
<button class="chip outline">CRM</button>
</div>
Copy
{# Filtros toggle — outline cambia a active al pulsar #}
<button class="chip outline">Todos</button>
<button class="chip outline active">POS</button>
<button class="chip outline">Inventory</button>
<button class="chip outline">HR</button>
Copy
{# Filtros toggle — outline cambia a active al pulsar #}
<button class="chip outline">Todos</button>
<button class="chip outline active">POS</button>
<button class="chip outline">Inventory</button>
<button class="chip outline">HR</button>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Copy
<div style="display:flex; align-items:center; flex-wrap:wrap; gap:.5rem">
<span class="chip sm">Small</span>
<span class="chip">Default</span>
<span class="chip lg">Large</span>
</div>
Copy
<span class="chip sm">Small</span>
<span class="chip">Default</span>
<span class="chip lg">Large</span>
Copy
<span class="chip sm">Small</span>
<span class="chip">Default</span>
<span class="chip lg">Large</span>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Pill — variante minimalista con borde
Borrador
Publicado
Revisión
Rechazado
Nuevo
Copy
<div style="display:flex; flex-wrap:wrap; gap:.5rem">
<span class="pill">Borrador</span>
<span class="pill success">Publicado</span>
<span class="pill warn">Revisión</span>
<span class="pill danger">Rechazado</span>
<span class="pill info">Nuevo</span>
</div>
Copy
<span class="pill">Borrador</span>
<span class="pill success">Publicado</span>
<span class="pill warn">Revisión</span>
<span class="pill danger">Rechazado</span>
<span class="pill info">Nuevo</span>
Copy
<span class="pill">Borrador</span>
<span class="pill success">Publicado</span>
<span class="pill warn">Revisión</span>
<span class="pill danger">Rechazado</span>
<span class="pill info">Nuevo</span>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Composición · uso en tarjetas
Plan Pro
Activo
Hub dedicado · 10 GB · soporte 24/5
Verifactu
SII
Beta access
Modificadores
Variantes: .success · .warn · .danger · .info · .neutral · .outline · .solidEstado: .active / [aria-pressed="true"] / [data-active="true"]Tamaños: .sm (alias .chip-sm) · default · .lg