Properties
Properties
| Property | Type | Description |
|---|---|---|
variant | string | (optional) The dialog variant. Can either be information or confirmation. Defaults to information. |
title | string | (optional) The dialog title. Displays on the very top of the content. |
minWidth | string | (optional) The minimum Dialog content width, defined by a CSS width value like 50vw (50% of the viewport). Be careful on using fixed minWidth so you don't break responsiveness. Defaults to 30rem (average width is set to 60vw). |
maxWidth | string | (optional) The maximum Dialog content width, defined by a CSS width value like 20rem. Defaults to 60rem (average width is set to 60vw). |
className | string | (optional) Give the Dialog content a class name (maps to dnb-dialog). |
spacing | boolean | (optional) If set to false then the dialog content will be shown without any spacing. Defaults to true. |
preventCoreStyle | boolean | (optional) By default the dialog content gets added the core style class dnb-core-style. Use false to disable this behavior. |
navContent | React.Node | (optional) The content which will appear in the navigation, above the header, and side-by-side the close button. |
headerContent | React.Node | (optional) The content which will appear in the header of the dialog. |
modalContent | React.Node | (optional) The content which will appear when triggering the dialog. |
description | string | (optional) A description will be positioned below the title, but before the content. Used for Dialog variant confirmation to further describe what the actions will do. |
verticalAlignment | string | (optional) Define the vertical alignment of the container. Can be set to top or center. Defaults to center. |
alignContent | string | (optional) Define the inner horizontal alignment of the content. Can be set to left, center, right and centered. If centered, then the content will also be centered vertically. Defaults to left. |
fullscreen | boolean | (optional) If set to true then the dialog 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. |
icon | React.Node | (optional) An icon to display at the top of the component. Should be of size medium, so make sure you import the _medium version of the Eufemia icon. |
confirmType | string | (optional) For variant confirmation, the dialog is either an informational (info) or a warning (warning) message. Defaults to info. |
declineText | string | (optional) For dialog actions, give a custom text for the decline button. |
confirmText | string | (optional) For dialog actions, give a custom text for the confirmation button. |
hideDecline | boolean | (optional) For variant confirmation, hide the default decline button and only show the confirmation button. |
hideConfirm | boolean | (optional) For variant confirmation, hide the default confirm button and only show the decline button. |
scrollRef | React.Ref | (optional) To get the scroll Element, pass in your own React ref. |
contentRef | React.Ref | (optional) To get the inner content Element, pass in your own React ref. |
More properties
The properties of Modal formatted as camel case are also provided. See the table below:
| Properties | Description |
|---|---|
id | (optional) The id used internal for the trigger button and Modal component. |
rootId | (optional) The id used internal in the modal root element. Defaults to root, so the element id will be dnb-modal-root. |
contentId | (optional) Defines an unique identifier to a modal. Use it in case you have to refer in some way to the modal content. |
labelledBy | (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 | (optional) use this property to control the open/close state by setting either: opened / closed or true / false. |
openDelay | (optional) forces the modal to delay the opening. The delay is given in ms. |
disabled | (optional) Will disable the trigger button. |
noAnimation | (optional) if set to true, no open/close animation will be shown. Defaults to false. |
noAnimationOnMobile | (optional) same as noAnimation, but gets triggered only if the viewport width is less than 40em. Defaults to false. |
animationDuration | (optional) Duration of animation open/close in ms. Defaults to 300ms. |
preventClose | (optional) if set to true (boolean or string), then the user can't close the modal. |
preventOverlayClose | (optional) Disable clicking the background overlay to close the modal. PS! Pressing esc key will still close the modal. |
openModal | (optional) set a function to call the callback function, once the modal should open: openModal={(open) => open()} |
closeModal | (optional) set a function to call the callback function, once the modal should close: closeModal={(close) => close()} |
focusSelector | (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 | (optional) give the page overlay a custom class name (maps to dnb-modal__overlay). |
contentClass | (optional) give the content wrapper a custom class name (maps to dnb-modal__content). |
omitTriggerButton | (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 | (optional) send along with custom HTML attributes or properties to the trigger button. |
dialogTitle | (optional) The aria label of the dialog when no labelledBy and no title is given. Defaults to Vindu. |
directDomReturn | (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 | (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 | (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). |
Translations
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | en-US |
|---|---|---|---|
Dialog.declineText | Avbryt | Cancel | Cancel |
Dialog.confirmText | Godta | Approve | Approve |