Snackbars

  1. Home
  2. Material-Components
  3. Snackbars
Alerts Cards Progress
Register

Snackbars

Default Snackbar

Only one snackbar may be displayed at a time. When a second snackbar is triggered while the first is displayed, the first should start the contraction motion downwards before the second one animates upwards.

Single line of text directly related to the operation performed

Snackbar with Action

To get snackbar with Action, you need to add button with .snackbar-btn class within .snackbar class.

Single line of text directly related to the operation performed

Multiline Snackbars

To get snackbar with Action, you need to add button with snackbar-multi-line class alongwith .snackbar class.

When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy’. They told me I didn’t understand the assignment, and I told them they didn’t understand life. –John Lennon
When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy’. They told me I didn’t understand the assignment, and I told them they didn’t understand life. –John Lennon

Snackbars Placement

Although all snackbars will span across the bottom of the screen on mobile devices, they can be left or right aligned on desktop/tablet devices. Need .snackbar-left or .snackbar-right with .snackbar.

Single line of text directly related to the operation performed
Single line of text directly related to the operation performed

Theme Customizer

Customize & Preview in Real Time

Menu Color Options
Layout Options
Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now