AlertModal

AlertModal (aka AlertDialog) is a specialized modal component for displaying urgent or critical messages that require immediate user attention and decision. AlertModal provides a predefined structure optimized for confirmation dialogs with a title, description, and two action buttons.

Available from eds-core/1.36.0

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { AlertModal } from '@adaptavant/eds-core';

Basic Usage​

AlertModal is a controlled component. Visibility is controlled by the open prop. Use title and description to provide context, and confirmButtonProps and cancelButtonProps to define the main actions.

const [isOpen, setIsOpen] = React.useState(false);

return (
    <>
        <Button onClick={() => setIsOpen(true)}>Delete Account</Button>
        <AlertModal
            cancelButtonProps={{
                label: 'Cancel',
                onClick: () => {
                    alert('Account deletion cancelled');
                    setIsOpen(false);
                },
            }}
            confirmButtonProps={{
                label: 'Yes, delete',
                onClick: () => {
                    alert('Account is deleted');
                    setIsOpen(false);
                },
            }}
            description="This will permanently delete all your data and cannot be undone."
            onClose={() => setIsOpen(false)}
            open={isOpen}
            title="Sure you want to delete account?"
        />
    </>
);
View in Playroom

Button onClick handlers must handle state updates directly (e.g., setIsOpen(false)) to give you full control over when to close. This allows you to complete actions first (e.g., async operations, validation) before dismissing the dialog. The onClose callback only handles Escape key dismissal and is provided for consistency.

Critical Actions​

For critical actions, prevent accidental dismissal by setting closeOnEsc={false}. Users can only close the dialog by explicitly clicking a button.

const [isOpen, setIsOpen] = React.useState(false);

return (
    <>
        <Button onClick={() => setIsOpen(true)}>Delete All Data</Button>
        <AlertModal
            cancelButtonProps={{
                label: 'Cancel',
                onClick: () => {
                    alert('Deletion cancelled');
                    setIsOpen(false);
                },
            }}
            closeOnEsc={false}
            confirmButtonProps={{
                label: 'Delete Forever',
                onClick: () => {
                    alert('All data has been permanently deleted');
                    setIsOpen(false);
                },
            }}
            description="This will permanently delete all your data. This action cannot be undone and data cannot be recovered."
            onClose={() => setIsOpen(false)}
            open={isOpen}
            title="Permanently Delete All Data"
        />
    </>
);
View in Playroom

Close button​

Add a close button (X icon) by providing closeButtonProps. The close button provides a neutral way to dismiss the dialog without committing to either the confirm or cancel action.

const [isOpen, setIsOpen] = React.useState(false);

return (
    <>
        <Button onClick={() => setIsOpen(true)}>Save Changes</Button>
        <AlertModal
            cancelButtonProps={{
                label: 'Discard',
                onClick: () => {
                    console.log('Changes discarded');
                    setIsOpen(false);
                },
            }}
            closeButtonProps={{
                label: 'Close dialog',
                onClick: () => {
                    console.log('Dialog closed without action');
                    setIsOpen(false);
                },
            }}
            confirmButtonProps={{
                label: 'Save',
                onClick: () => {
                    console.log('Changes saved');
                    setIsOpen(false);
                },
            }}
            description="You have unsaved changes. Would you like to save them before leaving?"
            onClose={() => setIsOpen(false)}
            open={isOpen}
            title="Unsaved Changes"
        />
    </>
);
View in Playroom

API Reference​

AlertModal

PropDefaultDescription
open_boolean
Controls the visibility of the alert dialog. When true, the dialog is displayed. When false, it's hidden.
title_string
The title/heading of the alert dialog. Should be brief and clearly describe the action or warning.
description_string
The description or message content explaining the consequences of the action. Provides additional context to help users make an informed decision.
confirmButtonProps_DialogCloseButtonProps
Configuration for the confirm/primary action button. This button performs the main action (e.g., delete, confirm, submit). Rendered with accentPrimary variant on the right side. Contains label (string) and onClick (function).
confirmButtonProps.label_string
Button text for the confirm action (e.g., "Delete", "Confirm", "Yes").
confirmButtonProps.onClick_function
Required callback when the confirm button is clicked. Consumers should handle state updates (e.g., setIsOpen(false)) in this handler after completing their action.
confirmButtonProps.size?'standard''large' | 'standard' | 'small'
Optional button size for the confirm button.
cancelButtonProps_DialogCloseButtonProps
Configuration for the cancel/secondary action button. This button dismisses the dialog without performing the main action. Rendered with neutralSecondary variant on the left side. Contains label (string) and onClick (function).
cancelButtonProps.label_string
Button text for the cancel action (e.g., "Cancel", "No", "Keep").
cancelButtonProps.onClick_function
Required callback when the cancel button is clicked. Consumers should handle state updates (e.g., setIsOpen(false)) in this handler.
cancelButtonProps.size?'standard''large' | 'standard' | 'small'
Optional button size for the cancel button.
onClose_function
Callback invoked when Escape key is pressed (if closeOnEsc={true}). Required for controlled state management. Note: Button clicks do not trigger onClose, handle state updates directly in button onClick handlers instead.
closeOnEsc?trueboolean
Controls whether pressing the Escape key closes the dialog. Set to false for critical/destructive actions to prevent accidental dismissal.
closeButtonProps?_DialogCloseButtonProps
Configuration for the close button (X icon). When provided, renders an IconButton in the top-right corner. Contains label (string, required), onClick (function, required), and size (optional).
closeButtonProps.label_string
Aria label for the close button (required for accessibility).
closeButtonProps.onClick_function
Callback when the close button is clicked. Consumers should handle state updates (e.g., setIsOpen(false)) in this handler.
closeButtonProps.size?_'large' | 'standard' | 'small'
Optional size for the close button. Defaults based on viewport (large on mobile).

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

AlertModal parts​

const [isOpen, setIsOpen] = React.useState(false);

return (
    <>
        <Button onClick={() => setIsOpen(true)}>Delete All Data</Button>
        <AlertModal
            cancelButtonProps={{
                label: 'Cancel',
                onClick: () => {
                    setIsOpen(false);
                },
            }}
            classNames={{
                modalHeader: 'bg-positive',
                title: 'text-heading-20',
                modalContent: 'bg-critical',
                description: 'text-inverse',
                confirmButton: 'bg-palette-light-pink-background text-primary',
                cancelButton: 'bg-palette-maroon-background text-body-20 text-palette-violet-text',
                modalFooter: 'bg-caution',
            }}
            confirmButtonProps={{
                label: 'Delete Forever',
                onClick: () => {
                    setIsOpen(false);
                },
            }}
            description="This will permanently delete all your data. This action cannot be undone and data cannot be recovered."
            onClose={() => setIsOpen(false)}
            open={isOpen}
            title="Permanently Delete All Data"
        />
    </>
);
View in Playroom