Alert Modal

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. This modal is disruptive, clicking anywhere outside the modal will not close the modal

Usage

Example Code

1import {
2  AlertModal,
3  AlertModalTrigger,
4  AlertModalContent,
5  AlertModalAction,
6  AlertModalCancel,
7  AlertModalTitle,
8} from "inc-design-system/alertModal";

Example Code

1<AlertModal>
2  <AlertModalTrigger>
3    <Button>Open Modal</Button>
4  </AlertModalTrigger>
5  <AlertModalContent className="w-96">
6    <AlertModalTitle
7      status="warning"
8      description="Description of the modal content."
9    >
10      Title
11    </AlertModalTitle>
12    <AlertModalCancel className="mr-2 mt-4">
13      <Button variant="primary">Cancel</Button>
14    </AlertModalCancel>
15
16    <AlertModalAction>
17      <Button variant="secondary">Confirm</Button>
18    </AlertModalAction>
19  </AlertModalContent>
20</AlertModal>

Props

AlertModal

For more props:

API Reference

Prop	Type	Description	Default
children	React.ReactNode	Must include ModalTrigger and ModalContent for the modal to work correctly.	-

AlertModalTrigger

For more props:

API Reference

Prop	Type	Description	Default
children	React.ReactNode	When clicked on, opens up the ModalContent.	-

AlertModalContent

Prop	Type	Description	Default
children	React.ReactNode	Customizable content to display in the modal.	-
className	string	Optional. Extra Tailwind styles for the overall modal content.	-
overlayClassName	string	Optional. Extra Tailwind styles for the Modal overlay.	-

AlertModalTitle

Prop	Type	Description	Default
children	React.ReactNode	Title of the modal.	-
status	string	Optional. Status of the modal title. Can be 'warning', 'error', 'success', 'info'.	-
description	string	Optional. Description of the modal title.	-

AlertModalCancel

For more props:

API Reference

Prop	Type	Description	Default
children	React.ReactNode	When clicked on, closes the ModalContent.	-
className	string	Optional. Extra styling for the interactable element.	-

AlertModalAction

For more props:

API Reference

Prop	Type	Description	Default
children	React.ReactNode	When clicked on, closes the ModalContent after performing an action.	-
className	string	Optional. Extra styling for the interactable element.	-