SystemDocs

Modal (Dialog)

Un overlay interactivo para mostrar contenido importante o pedir confirmaciones, construido con HTML nativo \`dialog\`.

Ejemplo Básico

Code Snippet 
<ModalTrigger target="example-modal" as={Button}>
  Abrir Modal
</ModalTrigger>

<ModalComponent id="example-modal">
  <ModalContent>
    <ModalHeader>
      <ModalTitle>¿Estás completamente seguro?</ModalTitle>
      <ModalDescription>
        Esta acción no se puede deshacer. Esto eliminará permanentemente tu cuenta y removerá los datos de nuestros servidores.
      </ModalDescription>
    </ModalHeader>
    <div class="py-4">
        Contenido del modal va aquí.
    </div>
    <ModalFooter>
      <Button variant="outline" data-modal-close>Cancelar</Button>
      <Button variant="primary">Continuar</Button>
    </ModalFooter>
    <ModalClose />
  </ModalContent>
</ModalComponent>