Snackbar

This is a Snackbar
This is a Snackbar
This is a Snackbar
View Code 
<!-- Left Snackbar -->
<button type="button" class="btn btn-ms btn-indigo ripple" data-toggle="snackbar"
        data-target="#snackbar-left">
    Show Snackbar
</button>
<div class="snackbar snackbar-left" id="snackbar-left">This is a Snackbar</div>
<!-- Snackbar -->
<button type="button" class="btn btn-ms btn-indigo ripple" data-toggle="snackbar"
        data-target="#snackbar">
    Show Snackbar
</button>
<div class="snackbar" id="snackbar">This is a Snackbar</div>
<!-- Right Snackbar -->
<button type="button" class="btn btn-ms btn-indigo ripple" data-toggle="snackbar"
        data-target="#snackbar-right">
    Show Snackbar
</button>
<div class="snackbar snackbar-right" id="snackbar-right">This is a Snackbar</div>

Snackbar with actions

This is a Snackbar
View Code 
<!-- Dismissible Snackbar -->
<button type="button" class="btn btn-ms btn-indigo ripple" data-toggle="snackbar"
        data-target="#snackbar-left-action">
    Show Snackbar
</button>
<div class="snackbar snackbar-left" id="snackbar-left-action">
    This is a Snackbar
    <button type="button" class="btn btn-ms btn-flat btn-lime ripple" data-toggle="hide-snackbar">
        Dismiss
    </button>
</div>
<!-- Snackbar with a link -->
<button type="button" class="btn btn-ms btn-indigo ripple" data-toggle="snackbar"
        data-target="#snackbar-link">
    Show Snackbar
</button>
<div class="snackbar snackbar-right" id="snackbar-link">
    Go to
    <a class="btn btn-ms btn-flat btn-lime ripple" href="https://materialstyle.github.io/">
        Home page
    </a>
</div>

Trigger via Javascript

Call showSnackbar() and pass the snackbar component.

Snackbar triggered via Javascript
<!-- HTML -->
<label id="snack">Click here to open a Snackbar</label>
<div class="snackbar" id="js_snackbar">Snackbar triggered via Javascript</div>
<!-- JS -->
<script>
    $("#snack").on("click", function() {
        showSnackbar($("#js_snackbar"));
    });
</script>

On this page