noora/docs/components/modal.md
Presents focused content above the current page.
<noora-modal title="Edit profile"><button slot="trigger">Open</button><p>Profile form</p></noora-modal>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
title | string | None | Sets the modal title. |
description | string | None | Sets the large-header description. |
header-type | default, icon, success, info, warning, error | "default" | Controls the header icon and semantics. |
header-size | small, large | "large" | Controls header dimensions. |
open | boolean | false | Controls whether the modal is open. |
close-on-escape | boolean | true | Closes the modal when Escape is pressed. |
close-on-interact-outside | boolean | true | Closes the modal when its backdrop is activated. |
| Event | Type | Description |
|---|---|---|
noora-open-change | CustomEvent<{ open: boolean }> | Emitted when the modal opens or closes. |
noora-dismiss | CustomEvent<{ reason: "close-button" | "escape" | "outside" | "action" }> | Emitted when the modal is dismissed without a direct open-property assignment. |
| Slot | Description |
|---|---|
trigger | The control that opens the modal. |
header-icon | A custom icon for icon headers. |
header-button | A custom header action. |
default | The modal body. |
footer | The modal footer. |
| Part | Description |
|---|---|
backdrop | The page backdrop. |
content | The modal surface. |
header | The modal header. |
body | The modal body. |
footer | The modal footer. |
Opening and closing emits a noora-open-change event.
Slotted footer buttons can use data-action="close" to close the modal.
Use default, custom-icon, success, information, warning, or error headers.
<noora-modal title="Default Modal" description="A standard modal with default header styling" header-type="default" header-size="large"><noora-button slot="trigger">Default Modal</noora-button><p>This is a basic modal with default header styling.</p><noora-button slot="footer" variant="secondary" data-action="close">Cancel</noora-button><noora-button slot="footer">Confirm</noora-button></noora-modal>
<noora-modal title="Custom Icon Modal" description="Modal with custom icon in header" header-type="icon" header-size="large"><noora-button slot="trigger">Icon Modal</noora-button><noora-icon slot="header-icon" name="mail"></noora-icon><noora-text-input label="Email" name="email" value="" type="email" required placeholder="[email protected]"></noora-text-input><noora-button slot="footer" variant="secondary" data-action="close">Cancel</noora-button><noora-button slot="footer">Send</noora-button></noora-modal>
<noora-modal title="Success" description="Operation completed successfully" header-type="success" header-size="large"><noora-button slot="trigger">Success Modal</noora-button><p>Your operation has been completed successfully!</p><noora-button slot="footer" data-action="close">Close</noora-button></noora-modal>
<noora-modal title="Information" description="Important information about this action" header-type="info" header-size="large"><noora-button slot="trigger">Info Modal</noora-button><p>Here's some important information you should know before proceeding.</p><noora-button slot="footer" data-action="close">Got it</noora-button></noora-modal>
<noora-modal title="Warning" description="This action requires your attention" header-type="warning" header-size="large"><noora-button slot="trigger">Warning Modal</noora-button><p>This action may have consequences. Please review before continuing.</p><noora-button slot="footer" variant="secondary" data-action="close">Cancel</noora-button><noora-button slot="footer" variant="destructive">Continue</noora-button></noora-modal>
<noora-modal title="Error" description="Something went wrong" header-type="error" header-size="large"><noora-button slot="trigger">Error Modal</noora-button><p>An error occurred while processing your request. Please try again.</p><noora-button slot="footer">Retry</noora-button></noora-modal>
Small headers omit the description while large headers show it.
<noora-modal title="Small Header" description="This description won't be shown because header size is small" header-type="default" header-size="small"><noora-button slot="trigger">Small Header</noora-button><p>Modal with small header - description is not displayed.</p><noora-button slot="footer" data-action="close">Close</noora-button></noora-modal>
<noora-modal title="Large Header" description="This description is visible because header size is large" header-type="default" header-size="large"><noora-button slot="trigger">Large Header</noora-button><p>Modal with large header - description is displayed below the title.</p><noora-button slot="footer" data-action="close">Close</noora-button></noora-modal>
Use no footer, one action, or multiple actions.
<noora-modal title="Modal Without Footer" description="This modal has no footer section" header-type="default" header-size="large"><noora-button slot="trigger">No Footer</noora-button><p>This modal doesn't have a footer. Users can close it using the X button in the header.</p></noora-modal>
<noora-modal title="Single Action" description="Modal with only one action button" header-type="success" header-size="large"><noora-button slot="trigger">Single Action</noora-button><p>This modal has only one action in the footer.</p><noora-button slot="footer" data-action="close">Got it</noora-button></noora-modal>
<noora-modal title="Multiple Actions" description="Modal with several action buttons" header-type="warning" header-size="large"><noora-button slot="trigger">Multiple Actions</noora-button><p>This modal demonstrates multiple action buttons in the footer.</p><noora-button slot="footer" variant="secondary">Save Draft</noora-button><noora-button slot="footer" variant="secondary" data-action="close">Cancel</noora-button><noora-button slot="footer">Publish</noora-button></noora-modal>