Alerts provide contexutal feedback messages for typical user actions. Alternatively, toasts are smaller alerts that are lightweight push notifications to notify users of actions they have taken.
Since there is no specifications for Material Design alerts, the default style closely resembles the Bootstrap default alerts.
In Material Admin Pro, the color system has been changed to match the color system with this theme, and the font size and letter spacing has been adjusted to match Material Design standards.
attribute to enable this behavior.
Alerts support additional content, like the
class being applied to headings within alerts. You can also style alerts using utility classes available with this toolkit to achieve variations on the alert dialog.
You can use shadow and border utilities to style alerts in different ways. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Since the functionality of Bootstrap's toast notifications are similar to Material Design's snackbar, the snackbar web component has been included for use within this toolkit.
The snackbar web component from the Material Web Components Catalog has been utilized in this case to add Material's snackbar component specifications to this theme in an easy, reusable fashion.
The styling for the default Bootstrap toasts has been modified to match Material's specifications for their snackbar component. Bootstrap's toast also supports a toast header, and different background and text color combinations.
Additional options for toasts are available on Bootstrap's toasts documentation page.
Bootstrap Toasts Usage
Bootstrap uses their positioning utilities to set the placement of the toast component. There are nine different positions available for Bootstrap toasts.