Snackbar

Snackbar presents transient status updates with optional action and dismiss affordances built from the same button primitives as the library.

Message archived

Anatomy

Highlight

Element	Part	Selector
<section>	root	[data-scope="snackbar"][data-part="root"] left_clickLMBCopy
<div>	content	[data-scope="snackbar"][data-part="content"] left_clickLMBCopy
<div>	actionsconditional	[data-scope="snackbar"][data-part="actions"] left_clickLMBCopy
<Button>	action-buttonconditional	[data-scope="snackbar"][data-part="action-button"] left_clickLMBCopy
<IconButton>	dismiss-buttonconditional	[data-scope="snackbar"][data-part="dismiss-button"] left_clickLMBCopy

Props

Name	Description	Default	Control
actionLabelOptional	Label for the optional action button. string | undefined	undefined
actionDisabledOptional	Whether the action button is disabled. boolean | undefined	false
actionAutofocusOptional	Whether the action button should autofocus when rendered. boolean | undefined	false
actionOnNewLineOptional	Whether the action should be placed on a separate line. boolean | undefined	false
dismissibleOptional	Whether to show a dismiss button. boolean | undefined	false	check
dismissButtonLabelOptional	Accessible label for the dismiss button. string | undefined	"Dismiss notification"

Events2

Name	Type	Description
action	[]	-
dismiss	[]	-

Slots3

Name	Parameters	Description
default	-	Supporting text content for the snackbar.
action	-	Optional custom action content.
dismiss	-	Optional custom dismiss content.

Styling22

Preview

Token	Description
--md-snackbar-action-label-text-colorColor Fallbackvar(--md-sys-color-inverse-primary)	Controls action label text color.
--md-snackbar-action-label-text-fontTypography Fallbackvar(--md-sys-typescale-label-large-font)	Controls action label text font.
--md-snackbar-action-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-label-large-line-height)	Controls action label text line height.
--md-snackbar-action-label-text-sizeLayout Fallbackvar(--md-sys-typescale-label-large-size)	Controls action label text size.
--md-snackbar-action-label-text-trackingTypography Fallbackvar(--md-sys-typescale-label-large-tracking)	Controls action label text tracking.
--md-snackbar-action-label-text-weightTypography Fallbackvar(--md-sys-typescale-label-large-weight)	Controls action label text weight.
--md-snackbar-container-colorColor Fallbackvar(--md-sys-color-inverse-surface)	Controls container color.
--md-snackbar-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls container elevation.
--md-snackbar-container-padding-blockLayout Fallback1rem	Controls container padding block.
--md-snackbar-container-padding-inline-endLayout Fallback0.5rem	Controls container padding inline end.
--md-snackbar-container-padding-inline-startLayout Fallback1rem	Controls container padding inline start.
--md-snackbar-container-shadow-colorColor Fallbackvar(--md-sys-color-shadow)	Controls container shadow color.
--md-snackbar-container-shapeShape Fallbackvar(--md-shape-compact)	Controls container shape.
--md-snackbar-icon-colorColor Fallbackvar(--md-sys-color-inverse-on-surface)	Controls icon color.
--md-snackbar-icon-sizeLayout Fallback1.25rem	Controls icon size.
--md-snackbar-supporting-text-colorColor Fallbackvar(--md-sys-color-inverse-on-surface)	Controls supporting text color.
--md-snackbar-supporting-text-fontTypography Fallbackvar(--md-sys-typescale-body-medium-font)	Controls supporting text font.
--md-snackbar-supporting-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-medium-line-height)	Controls supporting text line height.
--md-snackbar-supporting-text-sizeLayout Fallbackvar(--md-sys-typescale-body-medium-size)	Controls supporting text size.
--md-snackbar-supporting-text-trackingTypography Fallbackvar(--md-sys-typescale-body-medium-tracking)	Controls supporting text tracking.
--md-snackbar-supporting-text-weightTypography Fallbackvar(--md-sys-typescale-body-medium-weight)	Controls supporting text weight.
--md-snackbar-with-single-line-container-heightLayout Fallback3rem	Controls with single line container height.

Examples

Default

Message archived

Options

Supporting text only

Action only

Dismiss only

Action and dismiss

Disabled action

Combinations

Single-line

File moved to trash

Single-line with action

File moved to trash

Two lines

Your changes were saved locally and will sync when the connection is available again.

Two lines with longer action

Your changes were saved locally and will sync when the connection is available again.