Modal

Superposición de diálogo para interacción del usuario y visualización de información.

Importar

import { Modal } from 'asterui'

Ejemplos

Modal Básico

Modal simple con funcionalidad de abrir/cerrar.

</>

Open Modal

Basic Modal

This is the modal content.

You can put any content here.

Close modal

import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Basic Modal"
      >
        <p>This is the modal content.</p>
        <p>You can put any content here.</p>
      </Modal>
    )
}

export default App

Pie de Página Predeterminado

Modal con botones OK/Cancelar integrados usando las props onOk y onCancel.

</>

Open Modal

Submit Form

Click OK to submit the form or Cancel to close.

CancelSubmit

Close modal

import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onOk={() => {
          setOpen(false);
          Modal.success({ title: 'Submitted', content: 'Form submitted successfully!' });
        }}
        onCancel={() => setOpen(false)}
        title="Submit Form"
        okText="Submit"
        cancelText="Cancel"
      >
        <p>Click OK to submit the form or Cancel to close.</p>
      </Modal>
    )
}

export default App

Pie de Página Personalizado

Modal con botones de pie de página personalizados.

</>

Open Modal

Confirmation

Are you sure you want to proceed with this action?

CancelOK

Close modal

import { Modal, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  const handleOk = () => {
    setOpen(false);
    Modal.success({ title: 'Success', content: 'Action completed successfully!' });
  };
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Confirmation"
        footer={
          <Space direction="horizontal" size="sm">
            <Button onClick={() => setOpen(false)}>Cancel</Button>
            <Button color="primary" onClick={handleOk}>
              OK
            </Button>
          </Space>
        }
      >
        <p>Are you sure you want to proceed with this action?</p>
      </Modal>
    )
}

export default App

Métodos Estáticos

Diálogos rápidos usando Modal.info, Modal.success, Modal.warning y Modal.error.

</>

InfoSuccessWarningError

import { Modal, Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button onClick={() => Modal.info({ title: 'Info', content: 'This is an informational message.' })}>
          Info
        </Button>
        <Button onClick={() => Modal.success({ title: 'Success', content: 'Operation completed successfully!' })}>
          Success
        </Button>
        <Button onClick={() => Modal.warning({ title: 'Warning', content: 'Please proceed with caution.' })}>
          Warning
        </Button>
        <Button onClick={() => Modal.error({ title: 'Error', content: 'Something went wrong.' })}>
          Error
        </Button>
      </Space>
    )
}

export default App

Diálogo de Confirmación

Diálogo de confirmación con botones OK y Cancelar usando Modal.confirm.

</>

Delete Item

import { Modal, Button } from 'asterui'

function App() {
  return (
      <Button
        onClick={() =>
          Modal.confirm({
            title: 'Delete Item',
            content: 'Are you sure you want to delete this item? This action cannot be undone.',
            okText: 'Delete',
            cancelText: 'Cancel',
            onOk: () => Modal.success({ title: 'Deleted', content: 'Item has been deleted.' }),
          })
        }
      >
        Delete Item
      </Button>
    )
}

export default App

Modal Centrado

Modal centrado verticalmente.

</>

Centered Modal

Centered Modal

This modal is vertically centered on the screen.

Close modal

import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Centered Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Centered Modal"
        centered
      >
        <p>This modal is vertically centered on the screen.</p>
      </Modal>
    )
}

export default App

Tamaños de Modal

Diferentes anchos de modal.

</>

Small (400px)Default (520px)Large (800px)

Modal Width: 520px

This modal has a width of 520px.

Close modal

import { Modal, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  const [width, setWidth] = useState<number | string>(520);
  
  const showModal = (w: number | string) => {
    setWidth(w);
    setOpen(true);
  };
  
  return (
      <Space direction="horizontal" size="sm" wrap>
        <Button onClick={() => showModal(400)}>
          Small (400px)
        </Button>
        <Button onClick={() => showModal(520)}>
          Default (520px)
        </Button>
        <Button onClick={() => showModal(800)}>
          Large (800px)
        </Button>
      </Space>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title={`Modal Width: ${width}px`}
        width={width}
      >
        <p>This modal has a width of {width}px.</p>
      </Modal>
    )
}

export default App

Posición Responsiva

La posición del modal puede cambiar según el tamaño de pantalla usando objeto de posición responsiva.

</>

Responsive Modal

Responsive Modal

This modal appears at the bottom on mobile and centered on larger screens.

Resize your browser to see the effect.

Close modal

import { Modal, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false);
  
  return (
      <Button color="primary" onClick={() => setOpen(true)}>
        Responsive Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Responsive Modal"
        position={{ base: 'bottom', sm: 'middle' }}
      >
        <p>This modal appears at the bottom on mobile and centered on larger screens.</p>
        <p className="text-sm text-base-content/70 mt-2">Resize your browser to see the effect.</p>
      </Modal>
    )
}

export default App

API

Modal

Propiedad	Descripción	Tipo	Predeterminado
open	Estado abierto controlado	boolean	false
title	Título del modal	React.ReactNode	-
children	Contenido del modal	React.ReactNode	-
footer	Contenido de pie de página personalizado (establece en null para ocultar)	React.ReactNode	-
onOk	Manejador de clic del botón OK (muestra pie de página predeterminado)	() => void | Promise<void>	-
onCancel	Manejador de clic del botón Cancelar	() => void	-
onClose	Manejador de cierre (alias para onCancel)	() => void	-
okText	Texto del botón OK	string	'OK'
cancelText	Texto del botón Cancelar	string	'Cancel'
width	Ancho del modal	number | string	-
centered	Centrar modal verticalmente	boolean	false
position	Posición del modal (soporta objeto responsivo)	'top' | 'middle' | 'bottom' | { base?, sm?, md?, lg?, xl?, '2xl'? }	-
align	Alineación del modal	'start' | 'end'	-
maskClosable	Cerrar al hacer clic en el fondo	boolean	true
closable	Mostrar fondo de cierre	boolean	true
className	Clases CSS adicionales	string	-

Modal.info/success/warning/error/confirm

Propiedad	Descripción	Tipo	Predeterminado
title	Título del modal	React.ReactNode	-
content	Contenido del modal	React.ReactNode	-
onOk	Manejador de clic del botón OK	() => void | Promise<void>	-
onCancel	Manejador de clic del botón Cancelar (solo confirm)	() => void	-
okText	Texto del botón OK	string	'OK'
cancelText	Texto del botón Cancelar (solo confirm)	string	'Cancel'
type	Tipo de modal para estilo	'info' | 'success' | 'warning' | 'error'	-

Métodos Estáticos

• Modal.info(config) - Diálogo de información
• Modal.success(config) - Diálogo de éxito
• Modal.warning(config) - Diálogo de advertencia
• Modal.error(config) - Diálogo de error
• Modal.confirm(config) - Diálogo de confirmación con OK/Cancelar

Accesibilidad

• Usa elemento <dialog> nativo para comportamiento de modal apropiado
• El foco queda atrapado dentro del modal cuando está abierto
• Presionar Escape cierra el modal
• El foco se restaura al elemento activador cuando se cierra
• Usa aria-labelledby y aria-describedby para lectores de pantalla