Presents focused content above the current page.
Presents focused content above the current page.
import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";
Use default, custom-icon, success, information, warning, or error headers.
This is a basic modal with default header styling.
Your operation has been completed successfully!
Here's some important information you should know before proceeding.
This action may have consequences. Please review before continuing.
An error occurred while processing your request. Please try again.
<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="hello@tuist.dev"></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.
Modal with small header - description is not displayed.
Modal with large header - description is displayed below the title.
<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>
| 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. |
| Name | 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. |
| Name | 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.