Navegar componentes

AlertDialog

DialogExemplo

AlertDialog solicita ao usuário que confirme uma ação destrutiva ou irreversível antes que ela aconteça. Use-o para coisas como excluir conteúdo, revogar acesso ou descartar alterações não salvas. Para casos em que você quer exibir um alerta sem gerenciar o estado de abertura, use o hook `useImperativeAlertDialog`: chame `alert.show(options)` e renderize `alert.element` na sua árvore.

Importação

import {AlertDialog} from '@pharos-ds/core/AlertDialog';

Exemplos

Área interativa

isInline

actionVariant

isActionLoading

Excluir projeto?

Esta ação não pode ser desfeita.

Código

import {AlertDialog} from '@pharos-ds/core/AlertDialog';

<AlertDialog
  title="Excluir projeto?"
  description="Esta ação não pode ser desfeita."
  actionLabel="Excluir"
  isInline
  actionVariant="destructive"
  isActionLoading={false}
 />

Boas práticas

Faça: Torne o rótulo do botão de ação específico: "Excluir projeto" é melhor do que "OK" ou "Confirmar".
Faça: Descreva o que acontecerá na descrição para que o usuário conheça as consequências antes de confirmar.
Evite: Use AlertDialog para ações não destrutivas; use um Dialog padrão em vez disso.

Props

Prop	Tipo	Padrão	Descrição
`isOpen` *	`boolean`	—	Se o dialog está aberto.
`onOpenChange` *	`(isOpen: boolean) => unknown`	—	Callback de mudança de visibilidade.
`title` *	`string`	—	Título do dialog. Vinculado via aria-labelledby.
`description` *	`string`	—	Descrição das consequências. Vinculada via aria-describedby.
`actionLabel` *	`string`	—	Rótulo do botão de ação.
`onAction` *	`() => unknown`	—	Chamado quando o botão de ação é clicado. NÃO fecha automaticamente.
`cancelLabel`	`string`	`'Cancel'`	Rótulo do botão de cancelar.
`actionVariant`	`ButtonVariant`	`'destructive'`	Variante do botão de ação.
`isActionLoading`	`boolean`	—	Exibe um spinner de carregamento no botão de ação.
`width`	`number \| string`	`400`	Largura do dialog.
`isInline`	`boolean`	`false`	Renderiza o conteúdo do alert dialog inline, sem comportamento modal. Apenas para previews e showcases de documentação.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/AlertDialog