ds-svelte-community
Nais Docs
Pages Typography Components Primitives

Version: 1.0.0-next.33
Try light darkside
Remove darkside

Modal

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

Note: This component differs from the @navikt/ds-react component in that it uses the dialog element instead of custom markup. This reduces the amount of properties available. If this doesn't work for you, reach out.

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.

boolean 		true
closeIconText

Text for close-icon.

string 		"Close modal"
header

Header content.

Snippet string 		-
isModal

Set to true to make the dialog modal.

boolean 		true
width

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

"small" "medium" number unknown 		undefined
Snippets
children

Body content.

 -
footer

Footer content.

 -
header

Header content.

 -

Properties included from: HTMLDialogAttributes