Botón flotante "volver" para páginas internas — fixed top-right con blur. Patrón típico de páginas de detalle (módulo, settings, legal, etc.) donde el usuario llega por un enlace directo y quiere volver al hub principal.
Distinto de: .back-btn (inline en headers) y .topbar-back-btn (icono dentro del topbar). El .back-pill está position:fixed, vive sobre cualquier contenido.
Contenido de la página (simulado). El pill flota fixed encima cuando se usa en una página real — para mostrarlo aquí está dentro del frame con position:absolute.
<div style="position:relative; min-height:200px; padding:1.5rem; border:1px dashed var(--line-2); border-radius:var(--radius-md)">
<a class="back-pill" href="#" style="position:absolute; top:12px; right:12px">
<iconify-icon icon="lucide:arrow-left"></iconify-icon>
<span class="lbl">Volver</span>
</a>
<p style="margin:0; color:var(--ink-3); font-size:.875rem">Contenido de la página (simulado). El pill flota fixed encima cuando se usa en una página real — para mostrarlo aquí está dentro del frame con <code>position:absolute</code>.</p>
</div>
<a class="back-pill" href="/">
<iconify-icon icon="lucide:arrow-left"></iconify-icon>
<span class="lbl">Volver al hub</span>
</a>
<a class="back-pill" href="/">
<iconify-icon icon="lucide:arrow-left"></iconify-icon>
<span class="lbl">Volver al hub</span>
</a>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}