Componentes · z-ui

Modal

Modal controlado: quem usa guarda o estado em open e recebe o pedido de fechar em onClose (X, Esc, clique fora ou Cancelar). O rodapé sai de até três ações descritas como objetos. Para um diálogo com gatilho próprio e estado interno, use o ZDialog.

Formulário curto

primaryAction salva com loading. secondaryAction sem onClick fecha o modal.

Ação terciária

Com tertiaryAction o rodapé se divide: a terciária fica à esquerda e o par cancelar/confirmar à direita. danger pinta o botão de vermelho.

Tamanhos

sm, md e lg para formulários e confirmações. xl e full para tabelas e conteúdo largo; o corpo rola quando passa da altura da tela.

Sem fechar por fora

closeOnOverlay={false} ignora o clique fora e o Esc. hideClose tira o X; a saída fica só nas ações.

Uso

const [open, setOpen] = useState(false);

<Modal
  open={open}
  onClose={() => setOpen(false)}
  icon={PenLine}
  title="Editar signatário"
  description="As mudanças valem para os próximos envios."
  primaryAction={{ label: "Salvar", onClick: save, loading: saving }}
  secondaryAction={{ label: "Cancelar" }}
>
  {campos}
</Modal>

Props

ModalAction = { label, onClick?, disabled?, loading?, danger? }.

Prop	Tipo	Padrão	Descrição
open	boolean	—	Estado aberto, sempre controlado.
onClose	() => void	—	Pedido de fechar: X, Esc, clique fora ou secondaryAction sem onClick.
title	ReactNode	—	Título, ligado por aria-labelledby.
description	ReactNode	—	Subtítulo, ligado por aria-describedby.
icon	LucideIcon	—	Ícone no quadro de 40px do cabeçalho.
size	"sm" \| "md" \| "lg" \| "xl" \| "full"	"md"	400, 560, 720, 1100px ou min(1400px, 92vw).
primaryAction	ModalAction	—	Botão sólido à direita.
secondaryAction	ModalAction	—	Botão de contorno. Sem onClick, chama onClose.
tertiaryAction	ModalAction	—	Botão ghost à esquerda; divide o rodapé.
footer	ReactNode	—	Rodapé próprio no lugar das ações.
hideClose	boolean	false	Esconde o X.
closeOnOverlay	boolean	true	false ignora clique fora e Esc.