Button
Botón con 6 variantes, 3 tamaños y atributos arbitrarios para wiring reactivo.
<button
type="button"
class="btn primary"
>Primary</button>
<button
type="button"
class="btn secondary"
>Secondary</button>
<button
type="button"
class="btn outline"
>Outline</button>
<button
type="button"
class="btn ghost"
>Ghost</button>
<button
type="button"
class="btn danger"
>Danger</button>
<button
type="button"
class="btn link"
>Link</button>
{% from "button.jinja" import button %}
{{ button("Primary", variant="primary") }}
{{ button("Secondary", variant="secondary") }}
{{ button("Outline", variant="outline") }}
{{ button("Ghost", variant="ghost") }}
{{ button("Danger", variant="danger") }}
{{ button("Link", variant="link") }}
<Button label="Primary" variant="primary" />
<Button label="Secondary" variant="secondary" />
<Button label="Outline" variant="outline" />
<Button label="Ghost" variant="ghost" />
<Button label="Danger" variant="danger" />
<Button label="Link" variant="link" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<button
type="button"
class="btn primary sm"
>Small</button>
<button
type="button"
class="btn primary"
>Medium</button>
<button
type="button"
class="btn primary lg"
>Large</button>
{% from "button.jinja" import button %}
{{ button("Small", variant="primary", size="sm") }}
{{ button("Medium", variant="primary") }}
{{ button("Large", variant="primary", size="lg") }}
<Button label="Small" variant="primary" size="sm" />
<Button label="Medium" variant="primary" />
<Button label="Large" variant="primary" size="lg" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<button
type="button"
class="btn primary"
>Activo</button>
<button
type="button"
class="btn primary disabled"
disabled aria-disabled="true">Deshabilitado</button>
<button
type="button"
class="btn primary block"
>Block</button>
{% from "button.jinja" import button %}
{{ button("Activo", variant="primary") }}
{{ button("Deshabilitado", variant="primary", disabled=True) }}
{{ button("Block", variant="primary", block=True) }}
<Button label="Activo" variant="primary" />
<Button label="Deshabilitado" variant="primary" disabled />
<Button label="Block" variant="primary" block />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div data-signals="{ count: 0 }">
<button
type="button"
class="btn ghost"
data-on:click="$count = Math.max(0, $count - 1)">−</button>
<span data-text="$count" style="padding: 0 12px; font-weight: 600;">0</span>
<button
type="button"
class="btn primary"
data-on:click="$count = $count + 1">+</button>
</div>
{% from "button.jinja" import button %}
<div data-signals="{ count: 0 }">
{{ button("−", variant="ghost", attrs={"data-on:click": "$count = Math.max(0, $count - 1)"}) }}
<span data-text="$count" style="padding: 0 12px; font-weight: 600;">0</span>
{{ button("+", variant="primary", attrs={"data-on:click": "$count = $count + 1"}) }}
</div>
<div data-signals="{ count: 0 }">
<Button label="−" variant="ghost" data-on:click="$count = Math.max(0, $count - 1)" />
<span data-text="$count" style="padding: 0 12px; font-weight: 600;">0</span>
<Button label="+" variant="primary" data-on:click="$count = $count + 1" />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
¡Hola, soy reactivo!
<div data-signals="{ shown: false }">
<button
type="button"
class="btn primary"
data-on:click="$shown = !$shown">Mostrar / ocultar</button>
<span data-show="$shown" style="margin-left: 12px;">¡Hola, soy reactivo!</span>
</div>
{% from "button.jinja" import button %}
<div data-signals="{ shown: false }">
{{ button("Mostrar / ocultar", variant="primary", attrs={"data-on:click": "$shown = !$shown"}) }}
<span data-show="$shown" style="margin-left: 12px;">¡Hola, soy reactivo!</span>
</div>
<div data-signals="{ shown: false }">
<Button label="Mostrar / ocultar" variant="primary" data-on:click="$shown = !$shown" />
<span data-show="$shown" style="margin-left: 12px;">¡Hola, soy reactivo!</span>
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
label | str | — | Texto del botón. |
variant | "primary"|"secondary"|"outline"|"ghost"|"danger"|"link" | "secondary" | Estilo visual. |
size | "sm"|"md"|"lg" | "md" | Tamaño. |
disabled | bool | false | Deshabilita el botón. |
block | bool | false | Ocupa todo el ancho disponible. |
icon | bool | false | Botón cuadrado para un icono solo. |
type | "button"|"submit"|"reset" | "button" | Tipo HTML. |
attrs | dict | {} | Atributos extra (data-*, aria-*, etc). |