Dialog

Diálogo modal sobre el <dialog> nativo: bloquea la página, atrapa el foco y lo devuelve al cerrar. Se cierra con Escape, clic en el fondo o el botón ✕.

Angular

Revisar transferencia

Vas a enviar 1.250,00 € a ES91 2100 0418 4502 0005 1332. Comprueba los datos antes de confirmar. Editar

Confirmar

Vue

<flt-button (pressed)="open.set(true)">Revisar transferencia</flt-button>
<flt-dialog title="Revisar transferencia" [(open)]="open">
  Vas a enviar 1.250,00 € a ES91 2100 0418 4502 0005 1332. …
  <flt-button fltDialogFooter variant="ghost" (pressed)="open.set(false)">Editar</flt-button>
  <flt-button fltDialogFooter (pressed)="open.set(false)">Confirmar</flt-button>
</flt-dialog>

<FltButton @pressed="open = true">Revisar transferencia</FltButton>
<FltDialog v-model:open="open" title="Revisar transferencia">
  Vas a enviar 1.250,00 € a ES91 2100 0418 4502 0005 1332. …
  <template #footer>
    <FltButton variant="ghost" @pressed="open = false">Editar</FltButton>
    <FltButton @pressed="open = false">Confirmar</FltButton>
  </template>
</FltDialog>

Confirmación (alertdialog)

Variante no descartable para acciones irreversibles: sin ✕, Escape y el fondo no la cierran; sólo las acciones del pie.

Angular

Cancelar la póliza

Vue

<flt-dialog title="¿Cancelar la póliza?" size="sm" role="alertdialog"
  [dismissible]="false" [(open)]="open">
  La cancelación es inmediata y no se puede deshacer.
  <flt-button fltDialogFooter variant="ghost" (pressed)="open.set(false)">Volver</flt-button>
  <flt-button fltDialogFooter variant="danger" (pressed)="open.set(false)">Cancelar póliza</flt-button>
</flt-dialog>

<FltDialog v-model:open="open" title="¿Cancelar la póliza?" size="sm"
  role="alertdialog" :dismissible="false">
  La cancelación es inmediata y no se puede deshacer.
  <template #footer>
    <FltButton variant="ghost" @pressed="open = false">Volver</FltButton>
    <FltButton variant="danger" @pressed="open = false">Cancelar póliza</FltButton>
  </template>
</FltDialog>