An overlay element requiring a user action, based on the native
<dialog> element with an almost identical APIs.
<amber-modal title="Modal title"> <p>Content here</p> </amber-modal>
| || || ||If the element is displayed|
| || || ||If primary button needs to be disabled|
| || || ||Comma-separated button labels|
| || || ||Visual state, options are: empty, |
| || || ||Title of the modal, the modal header is removed if the attribute is undefined|
| ||N/A||N/A||Display the modal and set the |
| || ||N/A||Hide the modal and set the |
| || ||Fired each time the modal is closed. If closed by a button it will return the invoker button type|
Known issue: on Firefox the
.showModal()method of native
<dialog>element it's still not supported and the official polyfill can't be implemented on Shadow DOM. In that case the component will only switch the open attribute true or false showing the modal, but not the backdrop.
Known issue: clicking the backdrop will not close the modal, due to the native implementation, we are looking to apply a workaround in the next releases.