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

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

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

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

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