Modal

Pop up a dialog box, demanding attention like a traffic stop sign, ideal for critical interactions..

Basic

A modal is a pop-up window that demands your attention. You have to deal with it before doing anything else on the page.

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Modal's decked out with several components to make it bangin'.

Button

Buttons be the real MVPs, man! They're all about gettin' stuff done, whether it’s slamming that form submit or hoppin' to another page.

Dialog

Dialog's a slick component used in other parts of your project that need dialog, like modal, sheet, color picker, and more.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Alert Dialog

Alert dialogs are meant to interrupt the user with a critical message, so use 'em only when it's absolutely necessary. The fix? Set the role to alertdialog, and you're golden.

Notice how the modal is dismissable and the close button is hidden? That's 'cause the role is set to alertdialog.

<ModalOverlay isDismissable={false}/>

Controlled

You can control the modal programmatically.

Sizes

The modal is set to lg by default. You can adjust it to any size from the available options.

Blur

If you want to blur the background, you can use isBlurred prop.

Sticky

You can use the Modal.Body component to make the modal sticky.

Nested

You can also nest modals. Try open it and confirm!

This setup’s super flexible. If you skip adding ModalTitle and just drop a string as its child, it'll auto-render as the title. Like this:

<Modal.Header>
  Title
</Modal.Header>

Wanna customize more? Throw in props like title and description for a tailored header:

<Modal.Header title='Title' description='Description' />

Custom Styles

To apply custom styles such as background colors or borders to the header, follow this guide:

Class Names

To add custom class names to your content or overlay, refer to this demonstration:

Triggered By Menu

You can also trigger the modal by clicking on a menu item.

It might be a good idea to extract the modal into a separate component for better organization.

interface ModalActionProps {
  state: string | null
  onOpenChange: () => void
  actionType: { description: string; action: () => void; confirmText: string; title: string }
  disabled: boolean
}
 
const ModalAction = (props: ModalActionProps) => (
  <Modal.Content isOpen={props.state !== null} onOpenChange={props.onOpenChange}>
    <Modal.Header>
      <Modal.Title>{props.actionType?.title}</Modal.Title>
      <Modal.Description>{props.actionType?.description}</Modal.Description>
    </Modal.Header>
    <Modal.Footer>
      <Modal.Close>Cancel</Modal.Close>
      <Button
        intent={props.state === "ban" ? "danger" : "primary"}
        className="min-w-24"
        isDisabled={props.disabled}
        onPress={props.actionType?.action}
      >
        {props.disabled ? <Loader variant="spin" /> : props.actionType?.confirmText}
      </Button>
    </Modal.Footer>
  </Modal.Content>
)

Then you can use it like this.

<ModalAction
  state={state}
  onOpenChange={closeModal}
  actionType={actionType(state)}
  disabled={loading}
/>

With that, now we can modify the actionType function to return the initial state.

const actionType = (t: string | null) => {
  const initialsState = {
    title: '',
    description: '',
    confirmText: '',
    action: () => {}
  }
 
  switch (t) {
    case 'delete': ...
    case 'ban': ...
    case 'restore': ...
    default:
      return initialsState
  }
}
Disclosure Group aka AccordionDialog