Docs

Modal

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

Usage

Example Code

1import {
2  Modal,
3  ModalCloser,
4  ModalContent,
5  ModalTitle,
6  ModalTrigger,
7} from "inc-design-system/modal";

Example Code

1<Modal>
2  <ModalTrigger>
3    <Button>Open Modal</Button>
4  </ModalTrigger>
5  <ModalContent closable>
6    <ModalTitle status="info" description="This is some description">
7      Title
8    </ModalTitle>
9    <div className="text-text-default">Content</div>
10    <ModalCloser className="mt-4">
11      <Button variant="primary">Confirm</Button>
12    </ModalCloser>
13  </ModalContent>
14</Modal>

Props

Modal

For more props:

API Reference

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

ModalTrigger

For more props:

API Reference

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

ModalContent

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.	-
closable	boolean	Optional. Shows an 'X' at the opposite end of the title to close the modal.	-

ModalTitle

Prop	Type	Description	Default
children	React.ReactNode	Content to be displayed as the title.	-
status	"success" \| "error" \| "warning" \| "info"	Optional. Shows predefined icons for the chosen status, positioned next to the title.	-
description	string	Optional. Shown as small slightly greyed out words below the title.	-
className	string	Optional. Additional classNames to customize the title.	-

ModalCloser

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.	-