Alert Dialog

Um dialog modal que interrompe o usuário com um conteúdo importante e espera uma resposta. Aceita variantes de feedback (regular, emphasis, warning, error, success) com slots opcionais de ícone e tag.

Exemplos

Regular (padrão)

A variante regular serve para dialogs de informação ou confirmação comuns. Todos os exemplos incluem um ícone e uma tag para deixar o cabeçalho mais completo.

Emphasis

A variante emphasis usa um esquema de cores secundário para destacar conteúdo importante ou em evidência.

Error

Use a variante error para ações destrutivas ou avisos de falha crítica.

Warning

A variante warning é ideal para ações que pedem cuidado, mas que não são necessariamente destrutivas.

Success

A variante success confirma ações positivas ou operações concluídas com sucesso.

Com botão de fechar

Use showCloseButton no AlertDialogContent para renderizar o Dismiss no canto superior direito. Assim o usuário consegue fechar o dialog sem escolher uma ação.

API

AlertDialog

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
variant	string	'regular', 'emphasis', 'warning', 'error', 'success'	regular	Define o esquema de cores do feedback. É repassado via contexto para AlertDialogIcon, AlertDialogTag e AlertDialogAction.
open	boolean	true, false	-	Controla o estado de abertura (modo controlado).
onOpenChange	(open: boolean) => void	-	-	Função chamada quando o estado de abertura muda.
...props	Todas as props de AlertDialog.Root do Radix	-	-	Todas as propriedades nativas do componente AlertDialog Root do Radix UI.

AlertDialogTrigger

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
asChild	boolean	true, false	false	Quando true, usa o filho como trigger.
...props	Todas as props de AlertDialog.Trigger do Radix	-	-	Todas as propriedades nativas do componente AlertDialog Trigger do Radix UI.

AlertDialogContent

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
showCloseButton	boolean	true, false	false	Renderiza um botão × no canto superior direito que fecha o dialog. Sem AlertDialogIcon, o AlertDialogHeader passa a ter 56px de cada lado, para o título centralizado não passar por baixo do botão.
closeLabel	string	-	"Fechar"	Label acessível do botão de fechar.
overlayClassName	string	-	-	Classes CSS adicionais aplicadas ao overlay.
className	string	-	-	Classes CSS adicionais aplicadas ao conteúdo.
...props	Todas as props de AlertDialog.Content do Radix	-	-	Todas as propriedades nativas do componente AlertDialog Content do Radix UI.

AlertDialogIcon

Slot opcional para um ícone de feedback acima do título. Lê a variant do contexto do AlertDialog para aplicar a cor de fundo e de texto correspondentes. Quando presente, o cabeçalho perde o espaçamento superior (o ícone já ocupa o topo).

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
icon	ReactNode	-	-	Elemento de ícone a renderizar. Obrigatória: o componente não aceita children, o ícone vem sempre por icon. SVGs ficam com 32px automaticamente.
className	string	-	-	Classes CSS adicionais para o container da seção do ícone.

AlertDialogTag

Slot opcional para uma tag estilizada acima do título. Lê a variant do contexto do AlertDialog automaticamente. Passe variant explicitamente para sobrescrever o valor herdado.

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
variant	string	'regular', 'emphasis', 'warning', 'error', 'success'	Herdado do AlertDialog	Sobrescreve o esquema de cores herdado do contexto do AlertDialog pai.
children	ReactNode	-	-	Texto ou conteúdo da tag.
className	string	-	-	Classes CSS adicionais para o elemento da tag.

AlertDialogAction

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
variant	string	Variantes do Button ('regular', 'emphasis', 'error', 'success' etc.)	Herdado da variant do AlertDialog	Variante visual do botão. Quando omitida, herda a variant do AlertDialog pai. Um valor explícito sempre sobrescreve o contexto.
size	string	'sm', 'md', 'lg', 'xl'	lg	Tamanho do botão.
full	boolean	true, false	false	Quando true, o botão ocupa toda a largura disponível. Em telas de até 500px o botão já ocupa a largura toda, independentemente desta prop.
...props	Todas as props de AlertDialog.Action do Radix	-	-	Todas as propriedades nativas do componente AlertDialog Action do Radix UI.

AlertDialogCancel

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
variant	string	Variantes do Button ('regular', 'emphasis', 'error', 'success' etc.)	regular-soft	Variante visual do botão.
size	string	'sm', 'md', 'lg', 'xl'	lg	Tamanho do botão.
full	boolean	true, false	false	Quando true, o botão ocupa toda a largura disponível. Em telas de até 500px o botão já ocupa a largura toda, independentemente desta prop.
...props	Todas as props de AlertDialog.Cancel do Radix	-	-	Todas as propriedades nativas do componente AlertDialog Cancel do Radix UI.

AlertDialogHeader

Container (div) do topo do diálogo, que agrupa ícone, tag, título e descrição em coluna e centralizados. Quando o diálogo tem um AlertDialogIcon, o espaçamento superior do cabeçalho é removido. Aceita as props nativas de div.

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais para o cabeçalho.

AlertDialogTitle

Título do diálogo, anunciado por leitores de tela como o nome acessível do diálogo. Aceita as props de AlertDialog.Title do Radix.

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	ReactNode	-	-	Texto do título.
className	string	-	-	Classes CSS adicionais para o título.

AlertDialogDescription

Texto de apoio do diálogo, anunciado por leitores de tela como a descrição do diálogo. Aceita as props de AlertDialog.Description do Radix.

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	ReactNode	-	-	Texto da descrição.
className	string	-	-	Classes CSS adicionais para a descrição.

AlertDialogFooter

Container (div) dos botões de ação, lado a lado e centralizados. Em telas de até 500px os botões ficam empilhados e ocupam a largura toda. Aceita as props nativas de div.

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais para o rodapé.

AlertDialogPortal e AlertDialogOverlay

O AlertDialogContent já renderiza o portal e o overlay, então não é preciso usá-los diretamente. Para mudar o estilo do overlay, prefira a prop overlayClassName do AlertDialogContent. O AlertDialogPortal aceita as props de AlertDialog.Portal do Radix e o AlertDialogOverlay aceita as de AlertDialog.Overlay, incluindo className.