Snackbar

<div class="snackbar">
  <i class="icon">calendar_month</i>
  <span>Single-line snackbar with action</span>
  <i class="icon close">close</i>
</div>

Цвета

primary - синий
waring - оранжевый
success - зеленый
danger - красный
caption - светло серый
body - темно серый
tertiary - черный

Демонстрация

<div class="snackbar">
  <i class="icon">calendar_month</i>
  <span>Single-line snackbar with action</span>
  <i class="icon close">close</i>
</div>

<div class="snackbar primary">
  <i class="icon">calendar_month</i>
  <span>Single-line snackbar with action</span>
  <i class="icon close">close</i>
</div>

<div class="snackbar waring">
  <i class="icon">calendar_month</i>
  <span>Single-line snackbar with action</span>
  <i class="icon close">close</i>
</div>

<div class="snackbar danger">
  <i class="icon">calendar_month</i>
  <span>Single-line snackbar with action</span>
  <i class="icon close">close</i>
</div>

<div class="snackbar caption">
  <i class="icon">calendar_month</i>
  <span>Single-line snackbar with action</span>
  <i class="icon close">close</i>
</div>

<div class="snackbar body">
  <i class="icon">calendar_month</i>
  <span>Single-line snackbar with action</span>
  <i class="icon close">close</i>
</div>

<div class="snackbar tertiary">
  <i class="icon">calendar_month</i>
  <span>Single-line snackbar with action</span>
  <i class="icon close">close</i>
</div>