MenuCaderno UI
npmGitHub
Theme

<cad-modal>

Modal

Focus on a decision or a short form. The rest of the page stays inactive until it closes.

Save confirmation

Open review

You've made changes to this review.
Save your progress before leaving?

CancelSave review

Open an example to try it.

Confirmation

Confirmation

Your changes won't be saved.

Keep editingLeave page

Destructive

Destructive

This action cannot be undone.

CancelDelete permanently

Form

Form
CancelSave note

Content and actions

Add text, forms, and buttons through slots. Use tone="danger" for destructive decisions; it changes the warning icon and title color.

API reference: <cad-modal>

close-labelcloseLabelstring'Close dialog'headingheadingstring''openopenbooleanfalsesizesizeCadModalSize'md'tonetoneCadModalTone'default'close-on-backdropcloseOnBackdropbooleantruecloseLabelstringclose-labelnocloseOnBackdropbooleanclose-on-backdropyesheadingstringheadingnoopenbooleanopenyessizeCadModalSizesizeyestoneCadModalTonetoneyescad-modal-openCustomEventFired after the native modal opens.cad-modal-closeCustomEventFired after the native dialog closes.(default)Dialog body.triggerElement that opens the modal when activated.titleDialog heading. Falls back to the `heading` attribute.footerSupporting actions.baseNative dialog element.bodyScrollable dialog body.close-buttonNative close button.footerDialog action area.headerDialog heading area.iconDestructive dialog status icon.paperNotebook paper surface.titleDialog heading.triggerTrigger slot container.

Accessibility

Provide heading or a title slot. Focus stays inside the dialog and returns to the opener on close. Escape closes it; cad-modal-close reports the return value.

MIT licensed. Built with Caderno UI.Report an issue
Back to top