AlertDialog

Modal alert dialog for critical confirmations.

AlertDialog

AlertDialog is an overlay component for displaying critical alerts that require user confirmation before proceeding.

Import

import { AlertDialog } from 'radix-native-ui';

Usage

import { AlertDialog, Button, Text, Flex } from 'radix-native-ui';

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button color="red">Delete</Button>
  </AlertDialog.Trigger>

  <AlertDialog.Content>
    <AlertDialog.Title>Confirm Deletion</AlertDialog.Title>
    <AlertDialog.Description>
      Are you sure you want to delete this item? This action cannot be undone.
    </AlertDialog.Description>

    <Flex gap={3} mt={4} justify="end">
      <AlertDialog.Cancel>
        <Button variant="soft" color="gray">Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Delete</Button>
      </AlertDialog.Action>
    </Flex>
  </AlertDialog.Content>
</AlertDialog.Root>

Components

AlertDialog.Root

The root container component that manages dialog state.

AlertDialog.Trigger

Element that opens the alert dialog.

AlertDialog.Portal

Renders alert dialog content at the root level using Modal.

AlertDialog.Overlay

The backdrop that dims the background.

AlertDialog.Content

The alert dialog content container.

AlertDialog.Title

Title for the alert dialog.

AlertDialog.Description

Description text for the alert dialog.

AlertDialog.Cancel

Element that cancels the action and closes the dialog.

AlertDialog.Action

Element that confirms the action.

Props

AlertDialog.Root

AlertDialog.Trigger

AlertDialog.Portal

AlertDialog.Overlay

AlertDialog.Content

AlertDialog.Title

AlertDialog.Description

AlertDialog.Cancel

AlertDialog.Action

Examples

Delete Confirmation

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button color="red">Delete Account</Button>
  </AlertDialog.Trigger>

  <AlertDialog.Content>
    <AlertDialog.Title>Delete Account</AlertDialog.Title>
    <AlertDialog.Description>
      This will permanently delete your account and all associated data.
      This action cannot be undone.
    </AlertDialog.Description>

    <Flex gap={3} mt={4} justify="end">
      <AlertDialog.Cancel>
        <Button variant="soft" color="gray">Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Delete Account</Button>
      </AlertDialog.Action>
    </Flex>
  </AlertDialog.Content>
</AlertDialog.Root>

Controlled AlertDialog

function ControlledAlertDialog() {
  const [open, setOpen] = useState(false);

  const handleDelete = () => {
    // Perform delete action
    console.log('Item deleted');
    setOpen(false);
  };

  return (
    <AlertDialog.Root open={open} onOpenChange={setOpen}>
      <AlertDialog.Trigger>
        <Button color="red">Delete Item</Button>
      </AlertDialog.Trigger>

      <AlertDialog.Content>
        <AlertDialog.Title>Confirm Delete</AlertDialog.Title>
        <AlertDialog.Description>
          Are you sure you want to delete this item?
        </AlertDialog.Description>

        <Flex gap={3} mt={4} justify="end">
          <AlertDialog.Cancel>
            <Button variant="soft" color="gray">Cancel</Button>
          </AlertDialog.Cancel>
          <AlertDialog.Action onPress={handleDelete}>
            <Button color="red">Delete</Button>
          </AlertDialog.Action>
        </Flex>
      </AlertDialog.Content>
    </AlertDialog.Root>
  );
}

Destructive Action

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <IconButton color="red">
      <Icon name="trash" />
    </IconButton>
  </AlertDialog.Trigger>

  <AlertDialog.Content>
    <AlertDialog.Title>Remove Item</AlertDialog.Title>
    <AlertDialog.Description>
      This item will be removed from your list. You can add it again later.
    </AlertDialog.Description>

    <Flex gap={3} mt={4} justify="end">
      <AlertDialog.Cancel>
        <Button variant="soft" color="gray">Keep</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button color="red">Remove</Button>
      </AlertDialog.Action>
    </Flex>
  </AlertDialog.Content>
</AlertDialog.Root>

Logout Confirmation

<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button variant="soft">Sign Out</Button>
  </AlertDialog.Trigger>

  <AlertDialog.Content>
    <AlertDialog.Title>Sign Out</AlertDialog.Title>
    <AlertDialog.Description>
      Are you sure you want to sign out of your account?
    </AlertDialog.Description>

    <Flex gap={3} mt={4} justify="end">
      <AlertDialog.Cancel>
        <Button variant="soft" color="gray">Cancel</Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button>Sign Out</Button>
      </AlertDialog.Action>
    </Flex>
  </AlertDialog.Content>
</AlertDialog.Root>

Related

• Dialog - Dialog component
• Popover - Popover component