Snackbar
Snackbars provide brief notifications at the bottom of the screen. They appear temporarily and should not interrupt the user experience.
Basic Snackbar
Click a button to show a snackbar. It dismisses automatically after 3 seconds.
Show Snackbar
Show Long Message
File deleted successfully
Your changes have been saved to the cloud
<me-snackbar id="snackbar" auto-hide-duration="3000">
File deleted successfully
</me-snackbar>
<script>
document.querySelector('#show-btn').addEventListener('click', () => {
document.querySelector('#snackbar').setAttribute('open', '');
});
document.querySelector('#snackbar').addEventListener('me-close', (e) => {
document.querySelector('#snackbar').removeAttribute('open');
});
</script>
With Action
Message archived
UNDO
<me-snackbar id="snackbar-action" auto-hide-duration="5000">
Message archived
<me-button slot="action">UNDO</me-button>
</me-snackbar>
Anchor Origin
Control where the snackbar appears on screen.
Top Center
Top Left
Top Right
Bottom Left
Bottom Right
Top Center
Top Left
Top Right
Bottom Left
Bottom Right
<me-snackbar anchor-origin="top-right" auto-hide-duration="3000">
Saved to top-right
</me-snackbar>
API
| Attribute | Type | Default | Description |
|---|
open | boolean | false | Whether the snackbar is visible. |
auto-hide-duration | number (ms) | — | Milliseconds before auto-dismissing. Omit for persistent. |
anchor-origin | bottom-center | bottom-left | bottom-right | top-center | top-left | top-right | bottom-center | Screen position. |
Events
| Event | Detail | Description |
|---|
me-close | { reason: 'timeout' } | Fired when the snackbar auto-dismisses. |
Slots
| Slot | Description |
|---|
| default | Snackbar message text. |
action | Optional action button (right-aligned). |
