Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
<div class="ts-snackbar">
<div class="content">The file has been successfully restored.</div>
<button class="action">Undo</button>
</div>Introduction
Snackbar usually was placed in a corner, similar to Notice but capable of holding action button.
Structure
Content is the main message of the snackbar.
<div class="ts-snackbar">
<div class="content">First online casino is live!</div>
</div>A snackbar can have an action button.
<div class="ts-snackbar">
<div class="content">This file is corrupted.</div>
<button class="action">Move to trash</button>
</div>A snackbar can have a close button to dismiss the message.
<div class="ts-snackbar">
<div class="content">You will receive an email notification.</div>
<button class="close"></button>
</div>Variations
A snackbar action can hint towards a negative consequence.
<div class="ts-snackbar">
<div class="content">You have five unread messages.</div>
<button class="action is-negative">Delete all</button>
</div>Looking for similar components?
