Badge

Etiquetas pequeñas con dot indicator opcional. 5 variantes semánticas más versiones sólidas y de tamaño reducido.

Default

<span class="badge">Default
</span>

{% from "badge.jinja" import badge %}
{{ badge("Default") }}

<Badge label="Default" />

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 ... />

Variantes con dot

Brand Activo Pendiente Error Info

<span class="badge brand"><span class="badge-dot"></span>Brand
</span>
<span class="badge ok"><span class="badge-dot"></span>Activo
</span>
<span class="badge warn"><span class="badge-dot"></span>Pendiente
</span>
<span class="badge danger"><span class="badge-dot"></span>Error
</span>
<span class="badge info"><span class="badge-dot"></span>Info
</span>

{% from "badge.jinja" import badge %}
{{ badge("Brand", variant="brand", dot=True) }}
{{ badge("Activo", variant="ok", dot=True) }}
{{ badge("Pendiente", variant="warn", dot=True) }}
{{ badge("Error", variant="danger", dot=True) }}
{{ badge("Info", variant="info", dot=True) }}

<Badge label="Brand" variant="brand" dot />
<Badge label="Activo" variant="ok" dot />
<Badge label="Pendiente" variant="warn" dot />
<Badge label="Error" variant="danger" dot />
<Badge label="Info" variant="info" dot />

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 ... />

Variantes sólidas

12 NUEVO

<span class="badge solid">12
</span>
<span class="badge solid-brand">NUEVO
</span>

{% from "badge.jinja" import badge %}
{{ badge("12", variant="solid") }}
{{ badge("NUEVO", variant="solid-brand") }}

<Badge label="12" variant="solid" />
<Badge label="NUEVO" variant="solid-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 ... />

Tamaño pequeño

3 99+

<span class="badge brand sm">3
</span>
<span class="badge danger sm">99+
</span>

{% from "badge.jinja" import badge %}
{{ badge("3", variant="brand", size="sm") }}
{{ badge("99+", variant="danger", size="sm") }}

<Badge label="3" variant="brand" size="sm" />
<Badge label="99+" variant="danger" size="sm" />

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
`label`	str	—	Texto del badge.
`variant`	"brand"\|"ok"\|"warn"\|"danger"\|"info"\|"solid"\|"solid-brand"\|None	None	Variante semántica. None = default.
`size`	"md"\|"sm"	"md"	Tamaño.
`dot`	bool	false	Muestra un dot indicator a la izquierda.
`attrs`	dict	{}	Atributos HTML extra.