Toast

Notificación efímera con icono, título y descripción opcional. Variantes info, ok, warn, danger, brand. Se renderiza dentro de .ok-toast-region[data-pos] para gestionar la posición y el stack.

Stack en top-right

Pedido pagado

PED-2041 — €124,50 vía tarjeta

Sincronizando inventario

3 SKU pendientes — finalizará en 30s.

Stock crítico

Leche desnatada — quedan 1 unidad.

Pago rechazado

El TPV devolvió «fondos insuficientes».

<div class="toast-region" data-pos="top-right" style="position:relative;width:340px">
  <div class="toast ok">
  <span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 17 10"/></svg></span>
  <div class="body">
    <div class="title sm">Pedido pagado</div>
    <p class="meta">PED-2041 — €124,50 vía tarjeta</p>
  </div>
  <button class="close" aria-label="Cerrar">✕</button>
</div>
  <div class="toast info">
  <span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>
  <div class="body">
    <div class="title sm">Sincronizando inventario</div>
    <p class="meta">3 SKU pendientes — finalizará en 30s.</p>
  </div>
  
</div>
  <div class="toast warn">
  <span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span>
  <div class="body">
    <div class="title sm">Stock crítico</div>
    <p class="meta">Leche desnatada — quedan 1 unidad.</p>
  </div>
  <button class="close" aria-label="Cerrar">✕</button>
</div>
  <div class="toast danger">
  <span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg></span>
  <div class="body">
    <div class="title sm">Pago rechazado</div>
    <p class="meta">El TPV devolvió «fondos insuficientes».</p>
  </div>
  <button class="close" aria-label="Cerrar">✕</button>
</div>
</div>

{% from "toast.jinja" import toast %}
<div class="toast-region" data-pos="top-right" style="position:relative;width:340px">
  {{ toast("Pedido pagado", description="PED-2041 — €124,50 vía tarjeta", variant="ok", dismissible=True) }}
  {{ toast("Sincronizando inventario", description="3 SKU pendientes — finalizará en 30s.", variant="info") }}
  {{ toast("Stock crítico", description="Leche desnatada — quedan 1 unidad.", variant="warn", dismissible=True) }}
  {{ toast("Pago rechazado", description="El TPV devolvió «fondos insuficientes».", variant="danger", dismissible=True) }}
</div>

<div class="toast-region" data-pos="top-right" style="position:relative;width:340px">
  <Toast label="Pedido pagado" description="PED-2041 — €124,50 vía tarjeta" variant="ok" dismissible />
  <Toast label="Sincronizando inventario" description="3 SKU pendientes — finalizará en 30s." variant="info" />
  <Toast label="Stock crítico" description="Leche desnatada — quedan 1 unidad." variant="warn" dismissible />
  <Toast label="Pago rechazado" description="El TPV devolvió «fondos insuficientes»." variant="danger" dismissible />
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Variante brand simple

Nueva integración disponible

Conecta tu pasarela Adyen en 2 clics.

<div class="toast brand">
  <span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 15 8l6 1-4.5 4.4L18 20l-6-3-6 3 1.5-6.6L3 9l6-1Z"/></svg></span>
  <div class="body">
    <div class="title sm">Nueva integración disponible</div>
    <p class="meta">Conecta tu pasarela Adyen en 2 clics.</p>
  </div>
  
</div>

{% from "toast.jinja" import toast %}
{{ toast("Nueva integración disponible", description="Conecta tu pasarela Adyen en 2 clics.", variant="brand") }}

<Toast label="Nueva integración disponible" description="Conecta tu pasarela Adyen en 2 clics." variant="brand" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Solo título

Cambios guardados

<div class="toast ok">
  <span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 17 10"/></svg></span>
  <div class="body">
    <div class="title sm">Cambios guardados</div>
    
  </div>
  
</div>

{% from "toast.jinja" import toast %}
{{ toast("Cambios guardados", variant="ok") }}

<Toast label="Cambios guardados" variant="ok" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`title`	str	—	Título principal.
`description`	str	""	Texto secundario opcional.
`variant`	"info"\|"ok"\|"warn"\|"danger"\|"brand"	"info"	Color semántico.
`dismissible`	bool	false	Renderiza botón cerrar.
`attrs`	dict	{}	Atributos HTML extra.