<ui-modal>

Native <dialog> with promise-based open and close.

Overlays · stable · since 2.0.0 · extends UIOverlayElement

Examples

<ui-modal id="m" heading="Hello">Body text</ui-modal><ui-button onclick="document.getElementById('m').show()">Open</ui-button>
<ui-modal id="m2" heading="Sized" size="sm">Small dialog</ui-modal><ui-button onclick="document.getElementById('m2').show()">Open small</ui-button>

Playground

Generated HTML

Event log

    API

    Attributes and properties

    PropertyAttributeTypeDefaultDescription
    disableddisabledbooleanfalse
    busydata-ui-busybooleanfalse
    openopenbooleanfalseOpen state (reflected).
    headingheadingstring""Dialog heading.
    sizesizestring"md"sm, md or lg.
    dismissibledismissiblebooleantrueEscape and backdrop dismissal.
    modalmodalbooleantrueUse showModal() (default) or non-modal show().

    Methods

    Events

    Slots