Snackbars

Snackbars

Snackbars provide brief feedback about an operation through a message - typically at the bottom of the screen.

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.

Only one snackbar may be displayed at a time.

Simple

A basic snackbar that aims to reproduce Google Keep's snackbar behavior.

Message Length

Some snackbars with varying message length.

I love snacks.
I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate.
I love candy. I love cookies. I love cupcakes.
I love candy. I love cookies. I love cupcakes. I love cheesecake. I love chocolate.

Positioned

There may be circumstances when the placement of the snackbar needs to be more flexible.

Transitions

Control Direction

Change the direction of the transition. Slide is the default transition.

Change Transition

Use a different transition all together.

Don't block the floating action button

Move the floating action button vertically to accommodate the snackbar height.

Out of my way!

Consecutive Snackbars

Per Google's guidelines, 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.