AlertDialog
Cancelamento
import { AlertDialog } from '@rivocode/ui'Quando usar
A confirmacao de coisa que não volta atrás: excluir, cancelar nota, sair sem salvar.
Compõe com AlertDialogTrigger, AlertDialogContent, AlertDialogTitle,
AlertDialogDescription, AlertDialogFooter e AlertDialogClose.
Não fecha com Esc nem com clique fora, e o foco começa no botão de cancelar. Quem esta prestes a apagar algo tem que dizer que sim de propósito, e não esbarrar num clique.
No celular os botões empilham e ocupam a largura toda.
Quando não usar
Para qualquer outra janela modal (um formulário, um detalhe, uma escolha que
tem desfazer), use Dialog. O que este cobra a mais é sair pela porta: sem Esc
e sem clique fora, quem abriu por engano tem que ler os botões para escapar.
Cobrar isso de toda janela treina a pessoa a clicar em confirmar sem ler, que é
exatamente o hábito que ele existe para impedir.
No React Native
Traduz: o @rivocode/ui-native exporta AlertDialog - actionLabel e onAction em vez de composição; não fecha no toque fora, como no web. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.
API
| Prop | Tipo |
|---|---|
actionsRef0.4.0A ref to imperative actions. | RefObject<DialogRootActions | null> |
defaultOpen0.4.0Whether the dialog is initially open. | boolean |
defaultTriggerId0.4.0ID of the trigger that the dialog is associated with. | string | null |
handle0.4.0A handle to associate the alert dialog with a trigger. | AlertDialogHandle<Payload> |
onOpenChange0.4.0Event handler called when the alert dialog is opened or closed. | ((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void) |
onOpenChangeComplete0.4.0Event handler called after any animations complete when the dialog is opened or closed. | ((open: boolean) => void) |
open0.4.0Whether the dialog is currently open. | boolean |
triggerId0.4.0ID of the trigger that the dialog is associated with. | string | null |
Partes
AlertDialog se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.
AlertDialogClose
/alert-dialog-close.mdFecha sem confirmar.
Aqui ele é obrigatório na prática, e não uma conveniência: sem Esc e sem clique fora, este é o único caminho de saída do painel. Envolva o botão de cancelar com ele, e não deixe uma confirmação sair sem um.
| Prop | Tipo |
|---|---|
nativeButton0.4.0Whether the component renders a native `<button>` element when replacing it via the `render` prop. | boolean |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogCloseState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
AlertDialogContent
/alert-dialog-content.mdO painel da confirmação, com a tarja e o portal por dentro.
Não fecha com Esc nem com clique fora, e é a única diferença que importa em
relação ao DialogContent. O foco começa no botão que cancela: quem abriu por
engano sai apertando Enter, e sair é o que ele deve conseguir fazer sem ler.
No celular os botões empilham e ocupam a largura toda, com o que confirma no alto da pilha e o que cancela rente ao polegar.
A tarja é irmã do painel dentro do portal, então nem className nem variante de
descendente alcançam ela. Para vestir a tarja, use classNames com a parte
backdrop:
<AlertDialogContent classNames={{ backdrop: "backdrop-blur-md" }}>
| Prop | Tipo |
|---|---|
classNamesClasse por parte: `backdrop`. | Partial<Record<"backdrop", string>> |
finalFocus0.4.0Determines the element to focus when the dialog is closed. | booleanRefObject<HTMLElementnull>((closeType: InteractionType) => voidbooleanHTMLElementnull) |
initialFocus0.4.0Determines the element to focus when the dialog is opened. | booleanRefObject<HTMLElementnull>((openType: InteractionType) => voidbooleanHTMLElementnull) |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogPopupState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
AlertDialogDescription
/alert-dialog-description.mdA consequência, em uma frase, ligada ao painel por aria-describedby.
É onde mora o que não volta atrás: o que se perde junto, quem mais enxerga a mudança, se há como desfazer. Confirmação sem essa linha pede um sim sobre uma informação que ninguém deu.
| Prop | Tipo |
|---|---|
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogDescriptionState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
AlertDialogFooter
/alert-dialog-footer.mdA fila com cancelar e confirmar.
O que confirma vai por último na marcação e costuma ser variant="danger", para
a cor concordar com o texto. No celular os dois empilham e ocupam a largura
toda, com o que confirma no alto da pilha e o cancelar rente ao polegar.
Sem prop própria: repassa ao elemento de baixo o que você mandar.
AlertDialogTitle
/alert-dialog-title.mdA pergunta, e o nome do painel para o leitor de tela.
Escreva o que vai acontecer, e não "Tem certeza?". "Excluir a nota 4813?" pode ser respondido por quem só leu o título; "Tem certeza?" obriga a ler o resto para descobrir do que se trata.
| Prop | Tipo |
|---|---|
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogTitleState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
AlertDialogTrigger
/alert-dialog-trigger.mdO que abre a confirmação.
Costuma ser o botão de excluir da linha ou do rodapé. Passe render com ele em
vez de aninhar um botão dentro de outro, e deixe o texto do gatilho dizer o
que vai acontecer, porque "Excluir" prepara a pergunta que vem, e "Ok" não.
| Prop | Tipo |
|---|---|
handle0.4.0A handle to associate the trigger with an alert dialog. | AlertDialogHandle<Payload> |
nativeButton0.4.0Whether the component renders a native `<button>` element when replacing it via the `render` prop. | boolean |
payload0.4.0A payload to pass to the dialog when it is opened. | Payload |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogTriggerState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.