Skip to main content
🏠ComponentsModal

Modal

Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.

The Modal is a main container with the following structure:

  • ModalHeader which usually contains a title ModalTitle, a subtitle ModalSubtitle, and the close icon.
  • ModalBody which contains the information and/or controls needed to complete the modal’s task. It can include message text and components.
  • ModalDivider which is divider between body and footer.
  • ModalFooter which contains the main actions needed to complete or cancel the dialog task.
<Modal open>
  <ModalHeader closeIcon>
    <ModalTitle>
      <Icon icon="info" variant="outlined"></Icon>
      <div>
        <Typography>Dialog modal</Typography>
        <ModalSubtitle>Caption placeholder</ModalSubtitle>
      </div>
    </ModalTitle>
  </ModalHeader>

  <ModalBody>
    <Typography>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
      doloribus vero officia molestias quam animi dolor atque temporibus,
      voluptatibus inventore, fugiat minima consectetur veniam repudiandae
      voluptas iusto nostrum. Enim, quos.
    </Typography>
    <Typography>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
      doloribus vero officia molestias quam animi dolor atque temporibus,
      voluptatibus inventore, fugiat minima consectetur veniam repudiandae
      voluptas iusto nostrum. Enim, quos.
    </Typography>
  </ModalBody>

  <ModalDivider></ModalDivider>

  <ModalFooter classes="justify-between">
    <Button variant="ghost" color="primary">
      Cancel
    </Button>
    <Button variant="filled" color="primary">
      Confirm
    </Button>
  </ModalFooter>
</Modal>

Size​

There are three modal sizes: small, medium and large. You can use this property to control size of buttons and font size of icons and title in modal.

<Modal open size="small">
  <ModalHeader closeIcon>
    <ModalTitle>
      <Icon icon="info" variant="outlined"></Icon>
      <div>
        <Typography>Dialog modal</Typography>
        <ModalSubtitle>Caption placeholder</ModalSubtitle>
      </div>
    </ModalTitle>
  </ModalHeader>

  <ModalBody>
    <!-- ... -->
  </ModalBody>

  <ModalDivider></ModalDivider>

  <ModalFooter classes="justify-between">
    <Button variant="ghost" color="primary">
      Cancel
    </Button>
    <Button variant="filled" color="primary">
      Confirm
    </Button>
  </ModalFooter>
</Modal>

Custom action buttons​

You can use utility classes to style footer layout.

<Modal open>
  <!-- ... -->
  <ModalFooter classes="flex-col space-y-xs">
    <Button variant="ghost" color="primary" classes="w-full justify-center">
      Cancel
    </Button>
    <Button variant="filled" color="primary" classes="w-full justify-center">
      Confirm
    </Button>
  </ModalFooter>
</Modal>

API​

Loading API documentation...

ModalHeader​

Loading API documentation...

ModalTitle​

Loading API documentation...

ModalSubtitle​

Loading API documentation...

ModalBody​

Loading API documentation...

ModalDivider​

Loading API documentation...

ModalFooter​

Loading API documentation...