Modal Properties
| Properties | Description |
|---|---|
id | (optional) The id used internal for the trigger button and Modal component. |
rootId / root_id | (optional) The id used internal in the modal root element. Defaults to root, so the element id will be dnb-modal-root. |
contentId / content_id | (optional) Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal content. |
labelledBy / labelled_by | (optional) The ID of the trigger component, describing the modal content. Defaults to the internal trigger, so make sure you define the title in triggerAttributes. |
children or function | (optional) the content which will appear when triggering open the modal. If a function is given, you get a close method () => ({ close }) in the arguments. |
fullscreen | (optional) If set to true then the modal content will be shown as fullscreen, without showing the original content behind. Can be set to false to omit the auto fullscreen. Defaults to auto. |
openState / open_state | (optional) use this prop to control the open/close state by setting either: opened / closed or true / false. |
openDelay / open_delay | (optional) forces the modal to delay the opening. The delay is given in ms. |
disabled | (optional) Will disable the trigger button. |
noAnimation / no_animation | (optional) if set to true, no open/close animation will be shown. Defaults to false. |
noAnimationOnMobile / no_animation_on_mobile | (optional) same as noAnimation, but gets triggered only if the viewport width is less than 40em. Defaults to false. |
animationDuration / animation_duration | (optional) Duration of animation open/close in ms. Defaults to 300ms. |
preventClose / prevent_close | (optional) if set to true (boolean or string), then the user can't close the modal. |
preventOverlayClose / prevent_overlay_close | (optional) Disable clicking the background overlay to close the modal. PS! Pressing esc key will still close the modal. |
openModal / open_modal | (optional) set a function to call the callback function, once the modal should open: open_modal={(open) => open()} |
closeModal / close_modal | (optional) set a function to call the callback function, once the modal should close: close_modal={(close) => close()} |
focusSelector / focus_selector | (optional) The Modal handles the first focus – automatically. However, you can define a custom focus selector the will be used instead focusSelector=".css-selector". |
overlayClass / overlay_class | (optional) give the page overlay a custom class name (maps to dnb-modal__overlay). |
contentClass / content_class | (optional) give the content wrapper a custom class name (maps to dnb-modal__content). |
omitTriggerButton / omit_trigger_button | (optional) omits default showing trigger button. |
trigger | (optional) provide a custom trigger component. Like trigger={<Anchor href="/" />}. It will set the focus on it when the modal gets closed. |
triggerAttributes / trigger_attributes | (optional) send along with custom HTML attributes or properties to the trigger button. |
dialogTitle / dialog_title | (optional) The aria label of the dialog when no labelled_by and no title is given. Defaults to Vindu. |
directDomReturn / direct_dom_return | (optional) If true, the modal will not open in a new DOM but directly in current DOM. Defaults to false. Be aware of the side effects of setting this property to true. |
bypassInvalidationSelectors / bypass_invalidation_selectors | (optional) Define an array with HTML class selectors (['.element-selector']) which should not get invalidated when the modal opens/closes. Use this in order to let some parts of your site still be accessible by screen readers. |
scrollRef | (optional) To get the scroll Element, pass in your own React ref. |
contentRef | (optional) To get the inner content Element, pass in your own React ref. |
| Space | (optional) spacing properties like top or bottom are supported. |
spacing | (deprecated/optional) if set to false then the modal content will be shown without any spacing. Defaults to true. |
closeTitle / close_title | (deprecated/optional) the title of the close button. Defaults to Lukk. |
hideCloseButton | (deprecated/optional) if true, the close button will not be shown. |
class or className | (deprecated/optional) give the inner content wrapper a class name (maps to dnb-modal__content__inner). |
Trigger Properties
Properties targeting the trigger component (Button), but they will be set the same way as all the other properties:
Code Editor
<Modal triggerAttributes={{ icon: 'bell', }} right="small" > ... content ... </Modal>