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.
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>
You can set the snackbar's position using the placement attribute.
Photo archived
top-start
Photo archived
top
Photo archived
top-end
Photo archived
bottom-start
Photo archived
bottom
Photo archived
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom-end</mdui-button>
</div>
</div>
<script>
const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");
snackbars.forEach((snackbar) => {
const button = snackbar.nextElementSibling;
button.addEventListener("click", () => snackbar.open = true);
});
</script>
<style>
.example-placement mdui-button {
margin: 0.25rem;
width: 7.5rem;
}
</style>
Code
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.
Photo archived
Open Snackbar
<mdui-snackbar action="Undo" class="example-action">Photo archived</mdui-snackbar>
<mdui-button>Open Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action");
const openButton = snackbar.nextElementSibling;
snackbar.addEventListener("action-click", () => {
snackbar.actionLoading = true;
setTimeout(() => snackbar.actionLoading = false, 2000);
});
openButton.addEventListener("click", () => snackbar.open = true);
</script>
CodeThe action slot can also be used to add elements on the right side.
Photo archived
Undo
Open Snackbar
<mdui-snackbar class="example-action-slot">
Photo archived
<mdui-button slot="action" variant="text">Undo</mdui-button>
</mdui-snackbar>
<mdui-button>Open Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Code
The closeable attribute adds a close button on the right. Clicking the button closes the snackbar and triggers the close event.
Photo archived
Open Snackbar
<mdui-snackbar closeable class="example-closeable">Photo archived</mdui-snackbar>
<mdui-button>Open Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
CodeThe close-button slot specifies the element of the close button.
Photo archived
Open Snackbar
<mdui-snackbar closeable class="example-close-button-slot">
Photo archived
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Open Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
CodeThe 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.
Photo archived
Open Snackbar
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Photo archived</mdui-snackbar>
<mdui-button>Open Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Code
The message-line attribute limits the number of lines in the message text, with a maximum of 2 lines.
The item already has the label "travel". You can add a new label. You can add a new label.
Open Snackbar
<mdui-snackbar message-line="1" class="example-line">The item already has the label "travel". You can add a new label. You can add a new label.</mdui-snackbar>
<mdui-button>Open Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Code
The auto-close-delay attribute sets the delay for automatic closure, in milliseconds. The default is 5000 milliseconds.
Photo archived
Open Snackbar
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Photo archived</mdui-snackbar>
<mdui-button>Open Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Code
The close-on-outside-click attribute closes the snackbar when clicking outside of its area.
Photo archived
Open Snackbar
<mdui-snackbar close-on-outside-click class="example-outside">Photo archived</mdui-snackbar>
<mdui-button>Open Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Code| Attribute | Property | Reflect | Type | Default |
|---|
open | open | | boolean | false |
Opens the Snackbar.
|
placement | placement | | '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.
|
action | action | | string | - |
Text for the action button. Alternatively, use slot="action".
|
action-loading | actionLoading | | boolean | false |
Indicates if the action button is in the loading state.
|
closeable | closeable | | boolean | false |
Shows a close button on the right.
|
close-icon | closeIcon | | string | - |
Material Icons name for the close button. Alternatively, use slot="close-icon".
|
message-line | messageLine | | 1 | 2 | - |
Maximum lines for message text. Default is unlimited. Possible values:
1: Single line.2: Two lines.
|
auto-close-delay | autoCloseDelay | | number | 5000 |
Automatically closes the Snackbar after a specified time (in milliseconds). Set to 0 to disable auto-closing. Default is 5 seconds.
|
close-on-outside-click | closeOnOutsideClick | | boolean | false |
Closes the Snackbar when clicking or touching outside the Snackbar area.
|
| 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.
|
| 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.
|