# AlertDialog

Asks you to confirm a critical action before it happens.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/AlertDialog.tsx)

## Overview

An alert dialog is a modal confirmation that interrupts the page until you decide. It never closes on an outside press.

Reserve it for decisions that need an explicit answer, such as destructive confirmations.

## Examples

### Basic

```tsx
import { AlertDialog, Button, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.row()}>
      <AlertDialog.Root>
        <AlertDialog.Trigger render={<Button variant="negative" />}>Delete key</AlertDialog.Trigger>
        <AlertDialog.Popup>
          <AlertDialog.Title>Delete this key?</AlertDialog.Title>
          <AlertDialog.Description>
            Apps that use this key stop working immediately. You cannot undo this.
          </AlertDialog.Description>
          <div {...styles.actions()}>
            <AlertDialog.Close render={<Button variant="secondary" />}>Cancel</AlertDialog.Close>
            <AlertDialog.Close render={<Button variant="negative" />}>Delete</AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Root>
    </div>
  )
}

namespace styles {
  export const actions = style({
    columnGap: '2',
    display: 'flex',
    justifyContent: 'flex-end',
    marginTop: '8',
  })

  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/AlertDialog/Basic.tsx)

## Guidelines

TODO: Write guidelines for AlertDialog.