# AlertDialog

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](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { AlertDialog } from '@rivocode/ui'
```

## Exemplos

### Cancelamento

```tsx
import { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogTitle, AlertDialogTrigger, Button } from '@rivocode/ui'

export function Cancelling() {
  return (
    <div className="min-h-72">
      <AlertDialog defaultOpen>
        <AlertDialogTrigger render={<Button variant="destructive" />}>Cancelar nota</AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogTitle>Cancelar a nota 4813?</AlertDialogTitle>
          <AlertDialogDescription>
            A prefeitura recebe o cancelamento e o cliente e avisado. Não da para desfazer.
          </AlertDialogDescription>
          <AlertDialogFooter>
            <AlertDialogClose render={<Button variant="secondary" />}>Manter nota</AlertDialogClose>
            <AlertDialogClose render={<Button variant="destructive" />}>Cancelar nota</AlertDialogClose>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `actionsRef` | `RefObject<DialogRootActions \| null>` |  | 0.4.0 | A ref to imperative actions. |
| `defaultOpen` | `boolean` |  | 0.4.0 | Whether the dialog is initially open. |
| `defaultTriggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the dialog is associated with. |
| `handle` | `AlertDialogHandle<Payload>` |  | 0.4.0 | A handle to associate the alert dialog with a trigger. |
| `onOpenChange` | `((open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void)` |  | 0.4.0 | Event handler called when the alert dialog is opened or closed. |
| `onOpenChangeComplete` | `((open: boolean) => void)` |  | 0.4.0 | Event handler called after any animations complete when the dialog is opened or closed. |
| `open` | `boolean` |  | 0.4.0 | Whether the dialog is currently open. |
| `triggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the dialog is associated with. |

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### AlertDialogClose

Fecha 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 | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `nativeButton` | `boolean` |  | 0.4.0 | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `render` | `ComponentRenderFn<HTMLProps, DialogCloseState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### AlertDialogContent

O 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`:

```tsx
<AlertDialogContent classNames={{ backdrop: "backdrop-blur-md" }}>
```

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `classNames` | `Partial<Record<"backdrop", string>>` |  | - | Classe por parte: `backdrop`. |
| `finalFocus` | `boolean \| RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => void \| boolean \| HTMLElement \| null)` |  | 0.4.0 | Determines the element to focus when the dialog is closed. |
| `initialFocus` | `boolean \| RefObject<HTMLElement \| null> \| ((openType: InteractionType) => void \| boolean \| HTMLElement \| null)` |  | 0.4.0 | Determines the element to focus when the dialog is opened. |
| `render` | `ComponentRenderFn<HTMLProps, DialogPopupState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### AlertDialogDescription

A 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 | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `render` | `ComponentRenderFn<HTMLProps, DialogDescriptionState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### AlertDialogFooter

A 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.

### AlertDialogTitle

A 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 | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `render` | `ComponentRenderFn<HTMLProps, DialogTitleState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

### AlertDialogTrigger

O 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 | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `handle` | `AlertDialogHandle<Payload>` |  | 0.4.0 | A handle to associate the trigger with an alert dialog. |
| `nativeButton` | `boolean` |  | 0.4.0 | Whether the component renders a native `<button>` element when replacing it via the `render` prop. |
| `payload` | `Payload` |  | 0.4.0 | A payload to pass to the dialog when it is opened. |
| `render` | `ComponentRenderFn<HTMLProps, DialogTriggerState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

## Ver também

- [ContextMenu](/componentes/context-menu.md)
- [Dialog](/componentes/dialog.md)
- [Popconfirm](/componentes/popconfirm.md)
- [Popover](/componentes/popover.md)
- [PreviewCard](/componentes/preview-card.md)
- [Sheet](/componentes/sheet.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)