Primitiveoverlay

Alert Dialog

Stable

Dialog que se recusa a ser dispensado por acidente: sem botão de fechar no canto, sem clique fora, e com o foco começando na escolha segura — a ação destrutiva fica a um Tab, nunca a um Enter. Composto sobre Base UI AlertDialog e sobre o Button do Up Web DS. Esse custo só se paga por uma decisão que não dá para desfazer; tudo o mais pertence ao Dialog.

Instalação

npx up-web-ds add alert-dialog

Preview

Default

With Media

Compact

Non Destructive

All states

Default

With Media

Compact

Non Destructive

Usage

Imports de Alert Dialog

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

Alert Dialog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Remover do catálogo
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>
        Remover primitives/button do catálogo
      </AlertDialogTitle>
      <AlertDialogDescription>
        O diretório é apagado e o item sai do registry na próxima build.
        Recipes e componentes que o compõem passam a falhar em DS008.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Manter item</AlertDialogCancel>
      <AlertDialogAction variant="destructive">
        Remover item
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Props

AlertDialog

Props de AlertDialog
Prop	Type	Default	Description
actionsRef	`React.RefObject<DialogRootActions \| null>`	sem valor padrão	A ref to imperative actions. - `unmount`: Manually unmounts the alert dialog. Call this after any externally controlled closing animation finishes. - `close`: Closes the alert dialog imperatively when called.
children	`React.ReactNode \| PayloadChildRenderFunction<unknown>`	sem valor padrão	The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.
defaultOpen	`boolean`	`false`	Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
defaultTriggerId	`string \| null`	sem valor padrão	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
handle	`AlertDialogHandle<unknown>`	sem valor padrão	A handle to associate the alert dialog with a trigger. If specified, allows external triggers to control the alert dialog's open state. Can be created with the AlertDialog.createHandle() method.
onOpenChange	`((open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void)`	sem valor padrão	Event handler called when the alert dialog is opened or closed.
onOpenChangeComplete	`((open: boolean) => void)`	sem valor padrão	Event handler called after any animations complete when the dialog is opened or closed.
open	`boolean`	sem valor padrão	Whether the dialog is currently open.
triggerId	`string \| null`	sem valor padrão	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).

Estende AlertDialogPrimitive.Root.Props.

AlertDialogTrigger

Props de AlertDialogTrigger
Prop	Type	Default	Description
className	`string \| ((state: DialogTriggerState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
handle	`AlertDialogHandle<unknown>`	sem valor padrão	A handle to associate the trigger with an alert dialog. Can be created with the AlertDialog.createHandle() method.
id	`string`	sem valor padrão	ID of the trigger. In addition to being forwarded to the rendered element, it is also used to specify the active trigger for the dialog in controlled mode (with the DialogRoot `triggerId` prop).
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
payload	`unknown`	sem valor padrão	A payload to pass to the dialog when it is opened.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogTriggerState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogTriggerState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende AlertDialogPrimitive.Trigger.Props. Aceita também os atributos padrão de um elemento React (284 não listados).

AlertDialogPortal

Props de AlertDialogPortal
Prop	Type	Default	Description
className	`string \| ((state: DialogPortalState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
container	`HTMLElement \| ShadowRoot \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| null`	sem valor padrão	A parent element to render the portal element into.
keepMounted	`boolean`	`false`	Whether to keep the portal mounted in the DOM while the popup is hidden.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogPortalState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogPortalState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende AlertDialogPrimitive.Portal.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

AlertDialogOverlay

Props de AlertDialogOverlay
Prop	Type	Default	Description
className	`string \| ((state: DialogBackdropState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
forceRender	`boolean`	`false`	Whether the backdrop is forced to render even when nested.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogBackdropState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogBackdropState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende AlertDialogPrimitive.Backdrop.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

AlertDialogContent

Props de AlertDialogContent
Prop	Type	Default	Description
size	`"default" \| "sm"`	`'default'`
className	`string \| ((state: DialogPopupState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
finalFocus	`boolean \| React.RefObject<HTMLElement \| null> \| ((closeType: InteractionType) => boolean \| HTMLElement \| null \| void)`	sem valor padrão	Determines the element to focus when the dialog is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.
initialFocus	`boolean \| React.RefObject<HTMLElement \| null> \| ((openType: InteractionType) => boolean \| HTMLElement \| null \| void)`	sem valor padrão	Determines the element to focus when the dialog is opened. By default, focus moves to the first tabbable element inside the popup, except when the dialog is opened by touch — then the popup itself is focused to avoid opening the virtual keyboard. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (first tabbable element or popup). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, `null` to fall back to the default behavior, or `false`/`undefined` to do nothing.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogPopupState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogPopupState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende AlertDialogPrimitive.Popup.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

AlertDialogMedia

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

AlertDialogTitle

Props de AlertDialogTitle
Prop	Type	Default	Description
className	`string \| ((state: DialogTitleState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogTitleState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogTitleState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof AlertDialogPrimitive.Title>. Aceita também os atributos padrão de um elemento React (275 não listados).

AlertDialogDescription

Props de AlertDialogDescription
Prop	Type	Default	Description
className	`string \| ((state: DialogDescriptionState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogDescriptionState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogDescriptionState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof AlertDialogPrimitive.Description>. Aceita também os atributos padrão de um elemento React (275 não listados).

AlertDialogAction

Props de AlertDialogAction
Prop	Type	Default	Description
size	`"default" \| "sm" \| "xs" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	`'default'`
variant	`"link" \| "destructive" \| "primary" \| "outline" \| "secondary" \| "ghost" \| null`	`'primary'`
className	`string \| ((state: DialogCloseState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogCloseState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogCloseState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>. Aceita também os atributos padrão de um elemento React (285 não listados).

AlertDialogCancel

Props de AlertDialogCancel
Prop	Type	Default	Description
size	`"default" \| "sm" \| "xs" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	`'default'`
variant	`"link" \| "destructive" \| "primary" \| "outline" \| "secondary" \| "ghost" \| null`	`'outline'`
className	`string \| ((state: DialogCloseState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, DialogCloseState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: DialogCloseState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>. Aceita também os atributos padrão de um elemento React (285 não listados).

Composition

O gatilho e o conteúdo são irmãos: o AlertDialog não é um wrapper visual, é o estado compartilhado entre os dois.

Composição de AlertDialog

AlertDialog

AlertDialogTrigger
AlertDialogContent
- AlertDialogHeader
  - AlertDialogMedia
  - AlertDialogTitle
  - AlertDialogDescription
- AlertDialogFooter
  - AlertDialogCancel
  - AlertDialogAction

Metadata

Notas de acessibilidade

Teclado verificado por teste: ao abrir, o foco vai para a escolha segura em vez do popup, Tab percorre as duas ações e volta ao início em vez de escapar para a página atrás, e Escape continua fechando e devolvendo o foco ao gatilho — um modal sem saída de teclado é armadilha, não salvaguarda. Leitor de tela verificado por teste: o papel é alertdialog e não dialog, o popup é nomeado pelo título e descrito pela descrição, e o rodapé expõe exatamente duas ações nomeadas, sem nenhum controle que signifique "nenhuma das duas". Clique fora é recusado por teste. Touch verificado em navegador com emulação de toque em viewport de 375px: as ações medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, empilham em coluna abaixo de sm e a superfície cabe na viewport. Reduced motion verificado com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a entrada do popup e do scrim medem 0.001s.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: overlay
Status: Stable

Origem e distribuição

Fonte: shadcn registry / alert-dialog
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/alert-dialog.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: @base-ui/react
Ícones: Nenhum
Construído sobre: Button
Usado por: Nenhum ainda