# Alerts

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.

## Alerts

Since there is no specifications for Material Design alerts, the default style closely resembles the Bootstrap default alerts.

### 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.

A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!

### Link Color

The `.alert-link` class can be applied to links within alerts to get contextual link stylying.

A simple primary alert with an example link . Give it a click if you like.
A simple secondary alert with an example link . Give it a click if you like.
A simple success alert with an example link . Give it a click if you like.
A simple danger alert with an example link . Give it a click if you like.
A simple warning alert with an example link . Give it a click if you like.
A simple info alert with an example link . Give it a click if you like.
A simple light alert with an example link . Give it a click if you like.
A simple dark alert with an example link . Give it a click if you like.

### Dismissing

Bootstrap supports dismissing alerts using JavaScript behavior. In the example below, the close button is used with the `data-bs-dismiss="alert"` attribute to enable this behavior.

For more information on using the JavaScript behavior built into Bootstrap, visit Bootstrap's alert documentation page.
Holy guacamole! You should check in on some of those fields below.

### Additional Content

Alerts support additional content, like the `.alert-heading` 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.

#### Well done!

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.

## Toasts

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.

In addition, Bootstrap's default toast component has been restyled to match Material Design's snackbar specifications as closely as possible for users who want to use the more familiar Bootstrap toast markup and JavaScript behavior.

### Material Snackbar

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 `onclick` event is being used in this case to activate the snackbar notification, so no additional JavaScript is needed. Two positions are included within the web component configuration and a default and stacked variant.

RETRY RETRY RETRY

### Bootstrap Toasts

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.

Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Bootstrap Toast 11 mins ago
Hello, world! This is a toast message.

### 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.

Note that in order to use Bootstrap toasts, you must enable them via JavaScript. For performance reasons, this component is opt-in only. See the JavaScript tab for an example of implementing functioning toasts.

Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.

### Related Links

Bootstrap Alerts Documentation

Bootstrap's alerts component documentation

Related Link arrow_upward
Material Snackbar Web Component Documentation

Docs for Material's snackbar web component

Related Link arrow_upward
Bootstrap Toasts Documentation

Bootstrap's toasts documentation page

Related Link arrow_upward