Modal

Diálogo de sobreposição para interação do usuário e exibição de informações.

Importação

import { Modal } from 'asterui'

Exemplos

Modal Básico

Modal simples com funcionalidade de abrir/fechar.

</>

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

Rodapé Padrão

Modal com botões OK/Cancelar integrados usando props onOk e 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

Rodapé Personalizado

Modal com botões de rodapé 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 e 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 Confirmação

Diálogo de confirmação com botões OK e 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 Centralizado

Modal centralizado 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

Tamanhos de Modal

Diferentes larguras 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

Posição Responsiva

Posição do modal pode mudar com base no tamanho da tela usando objeto de posição responsivo.

</>

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

Propriedade	Descrição	Tipo	Padrão
open	Estado aberto controlado	boolean	false
title	Título do modal	React.ReactNode	-
children	Conteúdo do modal	React.ReactNode	-
footer	Conteúdo de rodapé personalizado (defina como null para ocultar)	React.ReactNode	-
onOk	Manipulador de clique do botão OK (mostra rodapé padrão)	() => void | Promise<void>	-
onCancel	Manipulador de clique do botão Cancelar	() => void	-
onClose	Manipulador de fechamento (alias para onCancel)	() => void	-
okText	Texto do botão OK	string	'OK'
cancelText	Texto do botão Cancelar	string	'Cancel'
width	Largura do modal	number | string	-
centered	Centralizar modal verticalmente	boolean	false
position	Posição do modal (suporta objeto responsivo)	'top' | 'middle' | 'bottom' | { base?, sm?, md?, lg?, xl?, '2xl'? }	-
align	Alinhamento do modal	'start' | 'end'	-
maskClosable	Fechar ao clicar no fundo	boolean	true
closable	Mostrar fundo de fechamento	boolean	true
className	Classes CSS adicionais	string	-

Modal.info/success/warning/error/confirm

Propriedade	Descrição	Tipo	Padrão
title	Título do modal	React.ReactNode	-
content	Conteúdo do modal	React.ReactNode	-
onOk	Manipulador de clique do botão OK	() => void | Promise<void>	-
onCancel	Manipulador de clique do botão Cancelar (apenas confirm)	() => void	-
okText	Texto do botão OK	string	'OK'
cancelText	Texto do botão Cancelar (apenas confirm)	string	'Cancel'
type	Tipo de modal para estilização	'info' | 'success' | 'warning' | 'error'	-

Métodos Estáticos

• Modal.info(config) - Diálogo de informação
• Modal.success(config) - Diálogo de sucesso
• Modal.warning(config) - Diálogo de aviso
• Modal.error(config) - Diálogo de erro
• Modal.confirm(config) - Diálogo de confirmação com OK/Cancelar

Acessibilidade

• Usa elemento <dialog> nativo para comportamento adequado de modal
• Foco é retido dentro do modal quando aberto
• Pressionar Escape fecha o modal
• Foco é restaurado para o elemento acionador quando fechado
• Usa aria-labelledby e aria-describedby para leitores de tela