@radix-ui/react-alert-dialog

What is @radix-ui/react-alert-dialog?

@radix-ui/react-alert-dialog is a React component library that provides accessible and customizable alert dialogs. These dialogs are used to interrupt the user with important information and require a response before they can proceed.

What are @radix-ui/react-alert-dialog's main functionalities?

Basic Alert Dialog

This code demonstrates a basic alert dialog with a trigger button, a title, a description, and action buttons for confirming or canceling the action.

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from '@radix-ui/react-alert-dialog';

function BasicAlertDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Open Alert</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
        <AlertDialogAction>Confirm</AlertDialogAction>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Custom Styling

This code demonstrates how to apply custom styles to the alert dialog components using CSS classes.

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from '@radix-ui/react-alert-dialog';
import './customStyles.css';

function CustomStyledAlertDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger className="custom-trigger">Open Custom Alert</AlertDialogTrigger>
      <AlertDialogContent className="custom-content">
        <AlertDialogTitle className="custom-title">Custom Styled Alert</AlertDialogTitle>
        <AlertDialogDescription className="custom-description">This alert has custom styles.</AlertDialogDescription>
        <AlertDialogAction className="custom-action">Confirm</AlertDialogAction>
        <AlertDialogCancel className="custom-cancel">Cancel</AlertDialogCancel>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Controlled Alert Dialog

This code demonstrates a controlled alert dialog where the open state is managed by React state.

import { useState } from 'react';
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from '@radix-ui/react-alert-dialog';

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

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger onClick={() => setOpen(true)}>Open Controlled Alert</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogTitle>Controlled Alert</AlertDialogTitle>
        <AlertDialogDescription>This alert is controlled by state.</AlertDialogDescription>
        <AlertDialogAction onClick={() => setOpen(false)}>Confirm</AlertDialogAction>
        <AlertDialogCancel onClick={() => setOpen(false)}>Cancel</AlertDialogCancel>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Other packages similar to @radix-ui/react-alert-dialog

react-modal

react-modal is a widely-used package for creating accessible modal dialogs in React. It provides a flexible API for creating modals, but requires more setup for accessibility compared to @radix-ui/react-alert-dialog.

react-bootstrap

react-bootstrap provides a set of accessible and customizable UI components, including modals. It integrates well with the Bootstrap framework, but may be heavier if you only need alert dialogs.

material-ui

material-ui is a popular React component library that follows Google's Material Design guidelines. It includes a Dialog component that can be used for alert dialogs, offering a rich set of features and customization options.

README

react-alert-dialog

Installation

$ yarn add @radix-ui/react-alert-dialog
# or
$ npm install @radix-ui/react-alert-dialog

Usage

View docs here.