---
title: 'AlertModal'
type: 'component'
components:
- AlertModal
- ModalDialog
categories:
- Overlays
status: 'New'
designStatus: 'Done'
devStatus: 'Done'
notes: |

---

Alert Dialogs are used to block the user from moving forward in a particular workflow with a quick message that requires agreement before the action or next step can be taken. An example is providing a warning that settings may not be updated if the user has not chosen to save their changes.

This is the alert style `ModalDialog` composition. `AlertModal` passes all of its props through to an underlying `ModalDialog` component providing some limited customization. If you have unique needs, use the `ModalDialog` compound component family directly.

## Basic usage

```jsx live
() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open alert modal</Button>

      <AlertModal
        title="Heads up!"
        isOpen={isOpen}
        onClose={close}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button variant="danger">Submit</Button>
          </ActionRow>
        )}
        isOverflowVisible={false}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
        </p>
      </AlertModal>
    </>
  )
}
```

## Variants

```jsx live
() => {
const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open warning alert modal</Button>

      <AlertModal
        title="Warning Message"
        isOpen={isOpen}
        onClose={close}
        variant="warning"
        icon={Warning}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button variant="primary">Delete</Button>
          </ActionRow>
        )}
        isOverflowVisible={false}
      >
        <p>
          Are your sure you want to delete this file? You can't undo this action.
        </p>
      </AlertModal>
    </>
  )
}
```
```jsx live
() => {
const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open error alert modal</Button>

      <AlertModal
        title="Message"
        isOpen={isOpen}
        onClose={close}
        variant="danger"
        icon={Info}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={close}>Dismiss</Button>
            <Button variant="danger">Acknowledge errror</Button>
          </ActionRow>
        )}
        isOverflowVisible={false}
      >
        <p>
          An unknown error has occured.
        </p>
      </AlertModal>
    </>
  )
}
```
```jsx live
() => {
const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open success alert modal</Button>

      <AlertModal
        title="Success Message"
        isOpen={isOpen}
        onClose={close}
        variant="success"
        icon={CheckCircle}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={close}>Dismiss</Button>
            <Button variant="success">Confirm</Button>
          </ActionRow>
        )}
        isOverflowVisible={false}
      >
        <p>
          All good!
        </p>
      </AlertModal>
    </>
  )
}
```
