Componentes · z-ui

ZDialog

O diálogo de alto nível do z-ui. Compõe o Dialog do shadcn com cabeçalho, emblema de ícone, corpo com rolagem, rodapé de ações e três tamanhos. Exportado como ZDialog para não colidir com o Dialog do shadcn.

Envio de envelope

Confirmar chama uma função assíncrona. Enquanto loading está ligado, o botão mostra o indicador e Cancelar fica bloqueado.

Tamanhos

sm usa max-w-modal-sm, md usa max-w-modal-md e lg usa a escala nativa para conteúdo largo.

Rodapé próprio e fechar interceptado

footer substitui as ações padrão. onCloseButton como função troca o X do shadcn por um botão que chama a função, útil para pedir confirmação antes de descartar.

Uso

<ZDialog
  trigger={<Button>Enviar envelope</Button>}
  icon={Send}
  title="Enviar envelope para assinatura?"
  description="Cada signatário recebe o link por e-mail."
  onCancel
  confirmText="Enviar agora"
  onConfirm={sendEnvelope}
  loading={sending}
>
  {conteúdo}
</ZDialog>

Props

Aceita também as props do Root do Radix: open, defaultOpen, onOpenChange e modal.

Prop	Tipo	Padrão	Descrição
title	ReactNode	—	Título, ligado ao diálogo por aria-labelledby.
description	ReactNode	—	Descrição, ligada por aria-describedby.
icon	LucideIcon	—	Ícone do emblema no cabeçalho. Some abaixo de 640px.
iconTone	"primary" \| "accent" \| "success" \| "warning" \| "caution" \| "danger" \| "info"	"primary"	Tom do emblema.
trigger	ReactNode	—	Elemento que abre o diálogo, via DialogTrigger asChild.
size	"sm" \| "md" \| "lg"	"md"	Largura máxima.
fullHeight	boolean	false	Ocupa a tela inteira abaixo de 640px.
onCloseButton	boolean \| () => void	true	Mostra o X, esconde (false) ou intercepta o clique (função).
onCancel	boolean \| () => void	—	true fecha o diálogo; função é chamada no clique.
onConfirm	boolean \| () => void	—	Mostra o botão de confirmar e chama a função no clique.
cancelText / confirmText	string	"Cancelar" / "Confirmar"	Textos dos botões.
confirmColor	"primary" \| "danger"	"primary"	Cor do botão de confirmar.
loading	boolean	false	Indicador no confirmar e cancelar bloqueado.
confirmDisabled	boolean	false	Bloqueia o confirmar sem mudar o texto.
footer	ReactNode	—	Rodapé próprio no lugar das ações padrão.