menu

Alerts are great for getting attention in a page as it provides contextual feedback messages for typical user actions. Check Rinebeck's source codes here.

info Default alert
star Primary alert
cancel Outlined danger alert close 
              Copied!
              content_copy
              
<div class="col s12">
    <div class="alert">
        <i class="material-icons">info</i>
        <span>Default alert</span>
    </div>

    <div class="alert primary">
        <i class="material-icons">star</i>
        <span>Primary alert</span>
    </div>

    <div class="alert outlined danger">
      <i class="material-icons">cancel</i>
      <span>Outlined danger alert</span>
      <a href="#!" class="waves-effect btn-soft danger alert-close tooltipped" data-position="bottom"
        data-tooltip="Close">
        <i class="material-icons">close</i>
      </a>
    </div>
</div>

Types

Other types of alert serving its own semantic purpose.

info Default alert
star Primary alert
info Info alert
check_circle Success alert
warning Warning alert
cancel Danger alert
light_mode Light alert
dark_mode Dark alert
auto_awesome Dark-Light alert 
              Copied!
              content_copy
              
<div class="col s12">
    <div class="alert">
        <i class="material-icons">info</i>
        <span>Default alert</span>
    </div>
    <div class="alert primary">
        <i class="material-icons">star</i>
        <span>Primary alert</span>
    </div>
    <div class="alert info">
        <i class="material-icons">info</i>
        <span>Info alert</span>
    </div>
    <div class="alert success">
        <i class="material-icons">check_circle</i>
        <span>Success alert</span>
    </div>
    <div class="alert warning">
        <i class="material-icons">warning</i>
        <span>Warning alert</span>
    </div>
    <div class="alert danger">
        <i class="material-icons">cancel</i>
        <span>Danger alert</span>
    </div>
    <div class="card-panel grey darken-4">
        <div class="alert light">
            <i class="material-icons">light_mode</i>
            <span>Light alert</span>
        </div>
    </div>

    <div class="card-panel grey lighten-4">
        <div class="alert dark">
            <i class="material-icons">dark_mode</i>
            <span>Dark alert</span>
        </div>
    </div>

    <div class="alert dark-light">
        <i class="material-icons">auto_awesome</i>
        <span>Dark-Light alert</span>
    </div>
</div>

Soft

For soft colors alert.

info Default alert
star Primary alert
info Info alert
check_circle Success alert
warning Warning alert
cancel Danger alert
light_mode Light alert
dark_mode Dark alert
auto_awesome Dark-Light alert 
              Copied!
              content_copy
              
<div class="col s12">
    <div class="alert soft">
        <i class="material-icons">info</i>
        <span>Default alert</span>
    </div>
    <div class="alert soft primary">
        <i class="material-icons">star</i>
        <span>Primary alert</span>
    </div>
    <div class="alert soft info">
        <i class="material-icons">info</i>
        <span>Info alert</span>
    </div>
    <div class="alert soft success">
        <i class="material-icons">check_circle</i>
        <span>Success alert</span>
    </div>
    <div class="alert soft warning">
        <i class="material-icons">warning</i>
        <span>Warning alert</span>
    </div>
    <div class="alert soft danger">
        <i class="material-icons">cancel</i>
        <span>Danger alert</span>
    </div>
    <div class="card-panel grey darken-4">
        <div class="alert soft light">
            <i class="material-icons">light_mode</i>
            <span>Light alert</span>
        </div>
    </div>
    <div class="card-panel grey lighten-4">
        <div class="alert soft dark">
            <i class="material-icons">dark_mode</i>
            <span>Dark alert</span>
        </div>
    </div>
    <div class="alert soft dark-light">
        <i class="material-icons">auto_awesome</i>
        <span>Dark-Light alert</span>
    </div>
</div>

Outlined

For flat with outlined alert borders.

info Default alert
star Primary alert
info Info alert
check_circle Success alert
warning Warning alert
cancel Danger alert
light_mode Light alert
dark_mode Dark alert
auto_awesome Dark-Light alert 
              Copied!
              content_copy
              
<div class="col s12">
    <div class="alert outlined">
        <i class="material-icons">info</i>
        <span>Default alert</span>
    </div>
    <div class="alert outlined primary">
        <i class="material-icons">star</i>
        <span>Primary alert</span>
    </div>
    <div class="alert outlined info">
        <i class="material-icons">info</i>
        <span>Info alert</span>
    </div>
    <div class="alert outlined success">
        <i class="material-icons">check_circle</i>
        <span>Success alert</span>
    </div>
    <div class="alert outlined warning">
        <i class="material-icons">warning</i>
        <span>Warning alert</span>
    </div>
    <div class="alert outlined danger">
        <i class="material-icons">cancel</i>
        <span>Danger alert</span>
    </div>
    <div class="card-panel grey darken-4">
        <div class="alert outlined light">
            <i class="material-icons">light_mode</i>
            <span>Light alert</span>
        </div>
    </div>
    <div class="card-panel grey lighten-4">
        <div class="alert outlined dark">
            <i class="material-icons">dark_mode</i>
            <span>Dark alert</span>
        </div>
    </div>
    <div class="alert outlined dark-light">
        <i class="material-icons">auto_awesome</i>
        <span>Dark-Light alert</span>
    </div>
</div>

For thicker outline, just add thick class.

info Default alert
star Primary alert
info Info alert
check_circle Success alert
warning Warning alert
cancel Danger alert
light_mode Light alert
dark_mode Dark alert
auto_awesome Dark-Light alert 
              Copied!
              content_copy
              
<div class="col s12">
    <div class="alert outlined thick">
        <i class="material-icons">info</i>
        <span>Default alert</span>
    </div>
    <div class="alert outlined thick primary">
        <i class="material-icons">star</i>
        <span>Primary alert</span>
    </div>
    <div class="alert outlined thick info">
        <i class="material-icons">info</i>
        <span>Info alert</span>
    </div>
    <div class="alert outlined thick success">
        <i class="material-icons">check_circle</i>
        <span>Success alert</span>
    </div>
    <div class="alert outlined thick warning">
        <i class="material-icons">warning</i>
        <span>Warning alert</span>
    </div>
    <div class="alert outlined thick danger">
        <i class="material-icons">cancel</i>
        <span>Danger alert</span>
    </div>
    <div class="card-panel grey darken-4">
        <div class="alert outlined thick light">
            <i class="material-icons">light_mode</i>
            <span>Light alert</span>
        </div>
    </div>
    <div class="card-panel grey lighten-4">
        <div class="alert outlined thick dark">
            <i class="material-icons">dark_mode</i>
            <span>Dark alert</span>
        </div>
    </div>
    <div class="alert outlined thick dark-light">
        <i class="material-icons">auto_awesome</i>
        <span>Dark-Light alert</span>
    </div>
</div>

Actions

You can also add an action button inside. It is recommended to use the .btn-flat as it follows the material guidelines.

info We use cookies, you too? Yes
verified Verification complete Got It
warning Network is fluctuating close 
              Copied!
              content_copy
              
<div class="col s12">
    <div class="alert">
        <i class="material-icons">info</i>
        <span>We use cookies, you too?</span>
        <a href="#!" class="btn-flat waves-effect">Yes</a>
    </div>

    <div class="alert primary">
        <i class="material-icons">verified</i>
        <span>Verification complete</span>
        <a href="#!" class="btn-flat waves-effect">Got It</a>
    </div>

    <div class="alert warning">
        <i class="material-icons">warning</i>
        <span>Network is fluctuating</span>
        <a href="#!" class="waves-effect btn-flat alert-close tooltipped" data-position="bottom"
        data-tooltip="Close">
            <i class="material-icons">close</i>
        </a>
    </div>
</div>

To initialize the close trigger for the alerts, just use this code.

              Copied!
              content_copy
              
  M.initAlertClose();

Multiline

For longer content, add multiline class.

info Note
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit omnis nihil dignissimos natus consectetur nulla iure sit animi nam. Saepe non beatae labore iste obcaecati vero sit corporis, commodi blanditiis?
warning Danger
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit omnis nihil dignissimos natus consectetur nulla iure sit animi nam. Saepe non beatae labore iste obcaecati vero sit corporis, commodi blanditiis?
OK Cancel
info Primary Info
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit omnis nihil dignissimos natus consectetur nulla iure sit animi nam. Saepe non beatae labore iste obcaecati vero sit corporis, commodi blanditiis?
OK 
              Copied!
              content_copy
              
<div class="col s12">
  <div class="alert multiline">
    <div class="title">
      <i class="material-icons">info</i>
      <span>Note</span>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit omnis nihil dignissimos natus
      consectetur nulla iure sit animi nam. Saepe non beatae labore iste obcaecati vero sit corporis,
      commodi
      blanditiis?
    </div>
  </div>
</div>

<div class="col s12">
  <div class="alert multiline outlined danger">
    <div class="title">
      <i class="material-icons">warning</i>
      <span>Danger</span>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit omnis nihil dignissimos natus
      consectetur nulla iure sit animi nam. Saepe non beatae labore iste obcaecati vero sit corporis,
      commodi
      blanditiis?
    </div>
    <div class="actions">
      <a href="#!" class="btn-soft waves-effect danger alert-close">OK</a>
      <a href="#!" class="btn-soft waves-effect alert-close">Cancel</a>
    </div>
  </div>
</div>

<div class="col s12">
  <div class="alert multiline primary">
    <div class="title">
      <i class="material-icons">info</i>
      <span>Primary Info</span>
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit omnis nihil dignissimos natus
      consectetur nulla iure sit animi nam. Saepe non beatae labore iste obcaecati vero sit corporis,
      commodi
      blanditiis?
    </div>
    <div class="actions">
      <a href="#!" class="btn-soft waves-effect light alert-close">OK</a>
    </div>
  </div>
</div>