Snackbar

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

Dimensions

Placement

By default, the snackbars are placed on the bottom left corner

If the multi-action bar is open, snackbars are moved above it

Typography & copy

The snackbar text is written in a sentence case. Only the first word is capitalized unless it includes a proper name or a word we capitalize (see the terminology and vocabulary).

	Font-size (px)	Font-weight
Snackbar text	13	Regular

Animation

By default, snackbars are shown and hidden by Slide up fade motion effect.

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.

Emplifi Design team
Emplifi Design blog
Figma Community

Soul Storybook
Report issue