Snackbar

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

Simple Snackbar

Demo of simple snackbar is show below.

Can't send this photo. Retry in 5 seconds.


                    
    
      
        
  
    
    

        


  


  
        
          
          <div class="snackbar p-sm">
        
        
          
            <div class="snackbar-message">
        
        
          
              <p>Can't send this photo. Retry in 5 seconds.</p>
        
        
          
            </div>
        
        
          
          

        
        
          
            <div class="snackbar-actions">
        
        
          
              <button class="btn">RETRY</button>
        
        
          
          

        
        
          
              <button class="btn">
        
        
          
                <i class="fas fa-times" title="close"></i>
        
        
          
              </button>
        
        
          
            </div>
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          simple-snackbar.html
        
        hosted with ❤ by GitHub

Stacked Snackbar

Stacked snackbar can be created by adding .stacked class to snackbar.

Can't send this photo. Retry in 5 seconds.


                    
    
      
        
  
    
    

        


  


  
        
          
          <div class="snackbar p-sm">
        
        
          
           <div class="snackbar-message">
        
        
          
             <p>Can't send this photo. Retry in 5 seconds.</p>
        
        
          
           </div>
        
        
          
          

        
        
          
           <div class="snackbar-actions">
        
        
          
             <button class="btn">RETRY</button>
        
        
          
          

        
        
          
             <button class="btn">
        
        
          
               <i class="fas fa-times" title="close"></i>
        
        
          
             </button>
        
        
          
           </div>
        
        
          
          </div>
        
  



    

  


      
      
        view raw
        
          stacked-snackbar.html
        
        hosted with ❤ by GitHub

Rating Slider

	<div class="snackbar p-sm">
	<div class="snackbar-message">
	<p>Can't send this photo. Retry in 5 seconds.</p>
	</div>

	<div class="snackbar-actions">
	<button class="btn">RETRY</button>

	<button class="btn">
	<i class="fas fa-times" title="close"></i>
	</button>
	</div>
	</div>