Snackbar

Snackbars can be used for giving notifications and to indicate further action required.

Simple Snackbar

Your order has been placed.

 

<div class="snackbar-wrapper snackbar-basic">
<p class="snackbar-text">text</p>
<i class="fas fa-times snackbar-icon"></i>
</div>

Snackbar with button

This product is out of stock.

 

<div class="snackbar-wrapper snackbar-basic">
<p class="snackbar-text">Text</p>
<div class="snackbar-wrapper-2">
<button class="snackbar-btn btn-primary-ghost">Text</button>
<i class="fas fa-times snackbar-icon"></i>
</div></div>

Stacked Snackbar

Your product has been added to cart.

 

<div class="snackbar-wrapper snackbar-stacked">
<div class="snackbar-stacked-wrapper">
<p class="snackbar-text">Text</p>
<i class="fas fa-times snackbar-icon"></i>
</div>
<div class="snackbar-stacked-wrapper">
<div class="snackbar-stack-btn">
<button class="snackbar-btn btn-primary-ghost">Text</button>
<button class="snackbar-btn btn-primary-ghost">Text</button>
</div>
</div>
</div>

Navigation

Typography