Page cover

Snackbar

Snackbar often confirm successful or unsuccessful actions, such as submitting a form or completing a task. They're displayed for a few seconds before automatically disappearing.

Link to Snackbar component in Figma

Anatomy

Layout & spacing

Snackbar paddings and spacings

Bottom padding

Snackbar should stay at 24px from the top of the bottomNavigationBar, keyboard or bottom of the screen itself. For this reason, the component is already placed in a container that holds 24px of bottom padding, to help accomodate it on top of the bottom widget in the screen.

Snackbar bottom spacing

Variants

Snackbar has different variants to fit any scenario. Pay close attention to the context of the action or task you want to give feedback about via Snackbar, to use the most-fitting version of it for that situation.

Snackbar neutral - Information in action or task
Snackbar caution - Highlight information in action or task
Snackbar positive - Sucess in action or task
Snackbar negative - Error in action or task

Last updated