Snackbar

Snackbars provide brief updates about app processes at the bottom of the screen.

In addition to direct component usage, mdui also offers a mdui.snackbar function for simplified Snackbar component usage.

Usage

Import the component:

import 'mdui/components/snackbar.js';

Import the TypeScript type:

import type { Snackbar } from 'mdui/components/snackbar.js';

Example:

Photo archived Open Snackbar
<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>

<mdui-button>Open Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-snackbar");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

Examples

Position

You can set the snackbar's position using the placement attribute.

Action Button

The action attribute adds an action button on the right side and specifies its text. The action-click event is triggered when the action button is clicked. The action-loading attribute displays a loading state on the action button.

The action slot can also be used to add elements on the right side.

Closable

The closeable attribute adds a close button on the right. Clicking the button closes the snackbar and triggers the close event.

The close-button slot specifies the element of the close button.

The close-icon attribute sets the Material Icon in the default close button. The close-icon slot sets the icon element in the default close button.

Text Lines

The message-line attribute limits the number of lines in the message text, with a maximum of 2 lines.

Auto Close Delay

The auto-close-delay attribute sets the delay for automatic closure, in milliseconds. The default is 5000 milliseconds.

Closing on Outside Click

The close-on-outside-click attribute closes the snackbar when clicking outside of its area.

API

Properties

AttributePropertyReflectTypeDefault
openopenbooleanfalse

Opens the Snackbar.

placementplacement'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end''bottom'

Snackbar placement. Default is bottom. Possible values:

  • top: Top, centered.
  • top-start: Top, left-aligned.
  • top-end: Top, right-aligned.
  • bottom: Bottom, centered.
  • bottom-start: Bottom, left-aligned.
  • bottom-end: Bottom, right-aligned.
actionactionstring-

Text for the action button. Alternatively, use slot="action".

action-loadingactionLoadingbooleanfalse

Indicates if the action button is in the loading state.

closeablecloseablebooleanfalse

Shows a close button on the right.

close-iconcloseIconstring-

Material Icons name for the close button. Alternatively, use slot="close-icon".

message-linemessageLine1 | 2-

Maximum lines for message text. Default is unlimited. Possible values:

  • 1: Single line.
  • 2: Two lines.
auto-close-delayautoCloseDelaynumber5000

Automatically closes the Snackbar after a specified time (in milliseconds). Set to 0 to disable auto-closing. Default is 5 seconds.

close-on-outside-clickcloseOnOutsideClickbooleanfalse

Closes the Snackbar when clicking or touching outside the Snackbar area.

Events

Name
open

Emitted when the snackbar starts to open. Can be prevented with event.preventDefault().

opened

Emitted after the snackbar opens and animations complete.

close

Emitted when the snackbar starts to close. Can be prevented with event.preventDefault().

closed

Emitted after the snackbar closes and animations complete.

action-click

Emitted when the action button is clicked.

Slots

Name
(default)

Snackbar message.

action

Right action button.

close-button

Right close button. Displayed if closeable is set

close-icon

Icon in right close button.

CSS Parts

Name
message

Message text.

action

Action button.

close-button

Close button.

close-icon

Icon in the close button.

CSS Custom Properties

Name
--shape-corner

The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

--z-index

The CSS z-index value of the component.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons