Confirm Button

Botón de confirmación

El objetivo de este botón es suplir el modal para casos de confirmación, ya que en ocasiones un modal puede ser demasiado para una tarea tan sencilla.


Utiliza la directiva x-confirm-button y cuenta con las siguientes propiedades:

  • width opcional default {40}: Ancho estandar del botón base.
  • size opcional default {md}: Tamaño de los botones.
  • flex opcional default {row}: opciones {row, col}: Dirección de los botones confirmar y cancelar.
  • only-icons opcional: Muestra únicamente los íconos de confirmación.
  • confirm-text opcional default {Confirmar} opcional: Texto de confirmación
  • cancel-text opcional default {Cancelar} opcional: Texto de cancelación.

Ejemplos:

<div class="grid grid-cols-12 gap-6">
    <div class="col-span-6 ml-auto mr-auto">
        <x-confirm-button class="btn btn-elevated-dark" size="md" width="40" flex="row">
            Aplicar cambios
        </x-confirm-button>
    </div>
    <div class="col-span-6 ml-auto mr-auto">
        <x-confirm-button class="btn btn-elevated-dark" size="sm" width="32" flex="row" only-icons>
            Aplicar cambios
        </x-confirm-button>
    </div>
    <div class="col-span-6 ml-auto mr-auto">
        <x-confirm-button class="btn btn-elevated-dark" width="32" flex="col">
            Aplicar cambios
        </x-confirm-button>
    </div>
    <div class="col-span-6 ml-auto mr-auto">
        <x-confirm-button class="btn btn-elevated-dark" size="lg" width="full" flex="row">
            Aplicar cambios
        </x-confirm-button>
    </div>
</div>