Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/snackbar/style.css');

Usage

Start with a div element and add the snackbar class name:

<div class="snackbar"></div>

Then add a span element with the message:

<div class="snackbar">
  <span>Default snackbar with action</span>
</div>

To add an action button, add a button element with the text class name:

<div class="snackbar">
  <span>Default snackbar with action</span>
  <button class="text">Action</button>
</div>

Variants

Default

Default snackbar styling.

<div class="snackbar">
  <span>Default snackbar with action</span>
  <button class="text">Action</button>
</div>

Design Tokens

Resources

• Material Design