Modals
Dialog
Modal dialogs can be opened by using @click="$refs.(dialog_id).showModal()"
Non-modal dialogs can be opened by using @click="$refs.(dialog_id).show()"
The user can still interact with the underneath elements on the page.
Popover
Popover won't be implemented until Firefox officially introduce the support for the Popover API into stable.
Toast Notifications
Dialogs can also be used with the SnackBars component to display toast notifications.
Self-dismissing notification
To demonstrate the concept of a self-destructing notification, consider the following example implemented in a hypothetical programming context.
Custom style
Below is an example of a notification for a critical error. This example is again generic in nature, and can be adapted to the specific environment you are working with.
Client side notifications with AlpineJS
Alternatively, you can leverage AlpineJS attributes, such as x-data, and the AlpineJS templating
system to manage notifications on the client side.
The <SnackBar /> component conveniently offers an Astro slot, allowing the insertion of
inner HTML.