Snackbar

arrow_back arrow_forward

Snackbars provide brief messages about app processes at the bottom of the screen. They appear temporarily and do not require user input to disappear.

Variants

Design file saved.

File moved to trash.Undo

check_circleChanges published.close

errorUpload failed.Retry

<div class="snack">
  <span class="snack-text">Design file saved.</span>
</div>

<div class="snack">
  <span class="snack-text">File moved to trash.</span>
  <span class="snack-action">Undo</span>
</div>

<div class="snack">
  <span class="material-icons-round snack-icon-success">check_circle</span>
  <span class="snack-text">Changes published.</span>
  <span class="material-icons-round snack-close">close</span>
</div>

<div class="snack">
  <span class="material-icons-round snack-icon-error">error</span>
  <span class="snack-text">Upload failed.</span>
  <span class="snack-action">Retry</span>
</div>

Specs

Property	Value	Token
Min width	300px	`snackbar.min-width`
Min height	48px	`snackbar.height`
Border radius	8px	`snackbar.radius`
Background (light)	#FFFFFF	`color.surface`
Background (dark)	#191D35	`color.surface-dark`
Action color	#C084FC	`color.brand-light`
Auto-dismiss	4000ms	`snackbar.duration`

← Previous Sliders Next → Spinner