Modal

Modal is a dialog box or popup window that is displayed on top of the current page.

Design system docs Examples Default Modal 
<>
  <dap-ds-button onclick="document.querySelector('#basicmodal').open = true">Open Modal</dap-ds-button>
  <dap-ds-modal id="basicmodal" title="Modal title" description="Description">
    <p>Modal content</p>
  </dap-ds-modal>
</>
Customized Modal 
<>
  <dap-ds-button onclick="document.getElementById('tray-bottom').open = true">Open Modal</dap-ds-button>
  <dap-ds-modal id="tray-bottom">
    <dap-ds-typography variant="h1" slot="title"
      >Like a tray?</dap-ds-typography
    >
    <p>Opened like a tray</p>
    <dap-ds-button slot="footer" onclick="document.getElementById('tray-bottom').open = false">I like tray</dap-ds-button>
    <dap-ds-button danger slot="footer" onclick="document.getElementById('tray-bottom').open = false">I don't ike tray</dap-ds-button>
  </dap-ds-modal>
</>
Events

Modal has many events according to its state. You can listen to these events to trigger some actions. Most important event is the dds-close event, which is triggered when the modal is closed. The events detail properry contains the source of the event. This can be ok-button, cancel-button, close-button, overlay, or esc.

Importing 
import { DapDSModal } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSModalReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
bottomFooterbooleantruePushes the footer to bottom.
openbooleanThe open state of the modal.
fullScreenbooleanThe full screen version of the modal.
wideFooterbooleanWide layout mode for footer.
closeOnEscbooleanWhether the modal should close on pressing the escape key. Default is true.
closeOnOverlayClickbooleanWhether the modal should close on clicking the overlay. Default is true.
closeButtonstringWhether the modal should have a close button. Default is true.
titlestringThe title of the modal.
descriptionstringThe description of the modal.
okButtonLabelstringThe label of the OK button.
cancelButtonLabelstringThe label of the Cancel button.
okButtonDisabledbooleanWhether the OK button should be disabled.
cancelButtonDisabledbooleanWhether the Cancel button should be disabled.
cancelButtonDangerbooleanWhether the Cancel button should be a danger button.
okButtonDangerbooleanWhether the OK button should be a danger button.
hideOkButtonbooleanWhether the OK button should be hidden.
hideCancelButtonbooleanWhether the Cancel button should be hidden.
footerstringWhether the modal should have a footer. Default is true.
headerstringWhether the modal should have a header. Default is true.
Slots
NameDescription
(default)The content of the modal.
titleThe title of the modal.
descriptionThe description of the modal.
footerThe footer of the modal.
Events
Event NameDescription
dds-before-openFires before the modal opens.
dds-openedFires after the modal opens.
dds-before-closeFires before the modal closes.
dds-closedFires after the modal closed.
dds-closeFires when the modal is closes. You can prevent the modal from closing by calling `event.preventDefault()`.
dds-okFires when the OK button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.
dds-cancelFires when the Cancel button is clicked. You can prevent the modal from closing by calling `event.preventDefault()`.
CSS Parts
Part NameDescription
baseThe main modal container.
panelThe panel of the modal.
headerThe header of the modal.
titleThe title of the modal.
descriptionThe description of the modal.
footerThe footer of the modal.
contentThe body of the modal.
closebuttonThe close button of the modal.
CSS Custom Properties
Property NameDescription
--dds-modal-max-block-sizeMaximum height of the modal. Default: 80vh.
--dds-modal-max-inline-sizeMaximum width of the modal. Default: 600px.
--dds-modal-paddingPadding inside the modal. Default: var(--dds-spacing-800).
--dds-modal-transform-amountAmount to transform for entrance animation. Default: 2rem.
--dds-modal-transition-speedSpeed of transition animations. Default: var(--dds-transition-fast).
--dds-modal-transition-timingTiming function for transitions. Default: var(--dds-easing-ease-in-out).
--dds-modal-border-widthBorder width of the modal. Default: var(--dds-border-width-base).
--dds-modal-border-colorBorder color of the modal. Default: var(--dds-border-neutral-divider).
--dds-modal-border-radiusBorder radius of the modal. Default: var(--dds-radius-large, 16px).
--dds-modal-backgroundBackground color of the modal. Default: var(--dds-background-neutral-subtle).
--dds-modal-header-marginMargin below the header. Default: var(--dds-spacing-800).
--dds-modal-footer-marginMargin above the footer. Default: var(--dds-spacing-400).
--dds-modal-footer-gapGap between footer elements. Default: var(--dds-spacing-400).
--dds-modal-close-marginMargin for the close button. Default: var(--dds-spacing-300).