Font and theme export

Alerts

Materialize is a modern responsive CSS framework based on Material Design by Google.

Alerts keep important contextual feedback visible in the page. Use a semantic variant, optional icon, and a close action when the message can be dismissed.

Variants

Information

Your profile is ready to be completed.

Saved successfully

Your changes have been saved.

<div class="alert alert-success" role="status">
  <i class="material-icons alert-icon" aria-hidden="true">check_circle</i>
  <div class="alert-content">
    <strong class="alert-title">Saved successfully</strong>
    <p class="alert-message">Your changes have been saved.</p>
  </div>
</div>

Outlined and compact

Outlined alerts work well on busy surfaces.

Filled alerts provide stronger emphasis.

Image content

New design system update

The latest components are ready to explore.

Dismissible alert

const alert = Alert.init(document.querySelector('.alert'), {});
alert.dismiss();
alert.open();