Snackbar

A Snackbar is a message used to give users feedback after taking an action. They are ephemeral and time out after a few seconds. Use Snackbars when you need a quick, lightweight way of providing feedback following an action they've taken.

Normal Snackbar

Below is an example of a normal snackbar,which can be created using paricular classes.

                               
                            <div class="snackbar-container">
                                <div class="left-side">
                                  <p>can't send a photo.Try again in 5 sec.</p>
                                </div>
                                <div class="right-side">
                                  <button class="snack-btn">RETRY</button>
                                  <i class="fas fa-times"></i>
                                </div>
                            </div>
                               
                           

Stacked Snackbar

Stacked snackbar has content stacked over each other.

                                
                                <div class="snackbar-container stacked-container">
                                    <div class="left-side">
                                      <p>This item has already been labeled.Add a new label</p>
                                    </div>
                                    <div class="right-side">
                                      <button class="snack-btn">ADD A NEW LABEL</button>
                                      <i class="fas fa-times"></i>
                                    </div>
                                </div>