Snackbar

Snackbars provide brief messages or feedback about a process at the bottom of the screen

Needs Review
Show details
Needs Review
Published: January 08, 2025
Updated: February 14, 2025

The basic snackbar is an animated toast style component that appears temporarily in the UI to inform the user that an action has taken place.

Alert colors can be applied to give semantic context to the user is the action is positive/negative/neutral etc.


Variants

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

There are two variants – the more typical variant is positioned at the bottom of the screen, and an inline version for quicker context updates. Inline snackbars appear directly in the UI container to provide direct context to an objects action.

SnackbarInline
Property Values Default
type Variant neutral | success neutral
SnackbarInline
SnackbarInline
type neutral
SnackbarInline
SnackbarInline
type success
Snackbar
Snackbar

Help and support