Snackbar

Snackbars (COMPONENT_SPEC §32) show a brief message about an app process at the bottom of the window, with an optional action and an optional dismiss button. They are Compose's Snackbar: inverse surface, extra-small corners, a level 3 shadow, the text in body medium and the action in inverse primary; 48dp tall for one line of text and 68dp for two, at most 600dp wide. The layout is Compose's padding-based one (isSnackbarStylingFixEnabled), which gives the same sizes for the one or two lines m3.material.io allows.

A snackbar host (Compose's SnackbarHost and SnackbarHostState) shows one snackbar at a time from a first-in, first-out queue: the current one scales and fades in on the fast springs while the previous one fades out. Without an action a snackbar leaves after 4 seconds (short; long is 10 seconds); with an action it stays until it is addressed (indefinite), as m3.material.io asks. The timer pauses while the pointer is over the snackbar or focus is in it, and Escape in it dismisses it. The host is a polite live region (role="status"); focus never moves to a snackbar on its own, so give keyboard users a shortcut that calls focus().

Timing and WCAG 2.2.1 (Timing Adjustable): pausing on hover and focus is the web stand-in for Android's "Time to take action" setting, which Compose reads and the web does not have. It does not make a timed snackbar accessible on its own. m3.material.io asks web apps to either show the same information inline, near the control that triggered it (a "Save" button that becomes "Saved"), or to give the snackbar an action so it stays until addressed. Apps that keep a user timeout preference can scale the durations with recommendedTimeout.

Snackbars (CSS)

.m3e-snackbar with __text and __actions (a text button __action and an icon button __dismiss); --action-on-new-line puts the action under the text. The texts are the Compose samples'.

Snackbar # 1

Very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long message

Photo uploaded to your shared album

Snackbar host (element)

<m3e-snackbar-host>: showSnackbar(message | { message, actionLabel, withDismissAction, duration }) resolves with 'action-performed' or 'dismissed'. The dismiss button carries the plain tooltip Compose builds in. Raise the host above a FAB with --m3e-comp-snackbar-host-bottom-offset (the FAB height plus --m3e-comp-snackbar-host-fab-spacing, as Compose's Scaffold places it).

Action on a new line

Last result: none

React

useSnackbarHostState() and <SnackbarHost hostState actionOnNewLine snackbar> render the same DOM as the element; <Snackbar> draws one snackbar from snackbarData or from its children, action and dismissAction.

Sources

androidx Compose Material3 1.5.0-beta01 (19991f2c): SnackbarTokens.kt (the 68dp two-line height, L72–73) as read by Snackbar.kt (SnackbarDefaults L577–601, the shadow L118, the text styles L120–121, the rows L286–331 and L495–574, the styling-fix layout L603–622, the host padding L272), SnackbarHost.kt (the durations L100–107 and L305–306, the accessibility timeout L298–317, the scale and fade L340–357, L408, L418), Scaffold.kt (the placement L234–288, FabSpacing L369–370), ScaffoldSamples.kt, ComposeMaterial3Flags.kt (isSnackbarStylingFixEnabled, on here: owner decision M9 #19) and material3 res strings.xml L28–31; values in components/snackbar-defaults.css (lines in PARITY.md).

m3.material.io Snackbar (Guidelines, Accessibility; token DB md.comp.snackbar). SOURCES register #49, #75 (the hover and focus pause, DECISIONS D19 (14)) and #76.