ds-svelte-community
Nais Docs
Pages Primitives Typography Components

Version: 2.0.0-next.8

Modal

Modals are useful tools when you have critical information a user needs to take a stance on.

Read more about this component in the Aksel documentation.

Laborum proident id ullamco

Culpa aliquip ut cupidatat laborum minim quis ex in aliqua. Qui incididunt dolor do ad ut. Incididunt eiusmod nostrud deserunt duis laborum. Proident aute culpa qui nostrud velit adipisicing minim. Consequat aliqua aute dolor do sit Lorem nisi mollit velit. Aliqua exercitation non minim minim pariatur sunt laborum ipsum. Exercitation nostrud est laborum magna non non aliqua qui esse.

Properties

PropertyDescriptionDefault
Control
Properties
open
required bindable

Set open to true to open the dialog. Set to false to close it. Recommended to use with bind:open.

boolean 		false
closeButton

Removes close-button(X) when false. Only used when header is a string or snippet.

boolean 		true
closeIconText

Text for close-icon.

string 		"Close"
closeOnBackdropClick

Whether to close when clicking on the backdrop.

boolean 		true
header

Header content. Can be:

  • A string (rendered as a Heading)
  • A Snippet (rendered directly)
  • An object with heading, optional label, icon, size, and closeButton
ModalHeaderProps Snippet string 		-
isModal

Set to true to make the dialog modal.

boolean 		true
placement

Where to place the modal in the viewport.

"top" "center" 		-
width

Set width of dialog. By default will fit content up to 700px.

"small" "medium" number unknown 		undefined
Snippets
children

Body content.

 -
footer

Footer content.

 -
header

Header content. Can be:

  • A string (rendered as a Heading)
  • A Snippet (rendered directly)
  • An object with heading, optional label, icon, size, and closeButton
 -
Events
onBeforeClose

Called when the user tries to close the modal. Return false to prevent closing.

 -

Properties included from: HTMLDialogAttributes