Botón

Botón para realizar acciones con diferentes estilos y colores.

Base

<button class="btn">Button</button>

Colores

Configura el color del botón usando la clase is-{color}

info

Para ver los colores disponibles, revisa la sección de Colores.

<div class="is-flex is-gap-3">
  <button class="btn is-primary">Primary</button>
  <button class="btn is-info">Info</button>
  <button class="btn is-success">Success</button>
  <button class="btn is-warning">Warning</button>
</div>

Tonal

Agrega un fondo tonal al botón usando la clase is-tonal.

tip

Puedes combinarlo con colores, por ejemplo: is-tonal is-primary, is-tonal is-warning, etc.

Preview

Code

<div class="is-flex is-gap-3">
  <button class="btn is-primary is-tonal">Tonal primary</button>
  <button class="btn is-info is-tonal">Tonal info</button>
  <button class="btn is-success is-tonal">Tonal success</button>
  <button class="btn is-warning is-tonal">Tonal warning</button>
</div>

Outlined

Puedes configurar el botón con bordes y fondo blanco usando la clase is-outlined

Preview

Code

<div class="is-flex is-gap-3">
  <button class="btn is-primary is-outlined">Outlined primary</button>
  <button class="btn is-info is-outlined">Outlined info</button>
  <button class="btn is-success is-outlined">Outlined success</button>
  <button class="btn is-warning is-outlined">Outlined warning</button>
</div>

Rounded

Puedes configurar el botón con bordes redondeados usando la clase is-rounded

Preview

Code

<div class="is-flex is-gap-3">
  <button class="btn is-primary is-rounded">Rounded primary</button>
  <button class="btn is-info is-outlined is-rounded">
    Rounded outlined info
  </button>
  <button class="btn is-success is-tonal is-rounded">
    Rounded tonal success
  </button>
</div>

Íconos

Puedes agregar íconos al botón usando el componente <iconify-icon>.

tip

Para más información sobre cómo usar íconos, revisa la sección de Iconos.

Preview

Code

<div class="is-flex is-gap-3">
  <button class="btn is-error">
    <iconify-icon class="icon" icon="mdi:trash"></iconify-icon>
    <span>Delete</span>
  </button>

  <button class="btn is-info is-outlined">
    <span>Info</span>
    <iconify-icon class="icon" icon="mdi:info"></iconify-icon>
  </button>

  <button class="btn is-warning is-tonal">
    <span>Warning</span>
    <iconify-icon class="icon" icon="mdi:warning"></iconify-icon>
  </button>

  <button class="btn is-primary is-rounded">
    <iconify-icon class="icon" icon="mdi:home"></iconify-icon>
    <span>Home</span>
  </button>
</div>