Snackbar
A brief, non-blocking notification anchored to the bottom of the viewport. Snackbars auto-dismiss after a configurable delay and can optionally include an action button. Use them for short feedback messages — confirmations, undo prompts, or transient alerts.
Playground
Usage
<lt-snackbar id="sb">Changes saved</lt-snackbar>
<lt-button onclick="document.getElementById('sb').show()">Save</lt-button>
<lt-snackbar variant="success">Upload complete</lt-snackbar>
<lt-snackbar variant="warning">Low disk space</lt-snackbar>
<lt-snackbar variant="error">Request failed</lt-snackbar>
<lt-snackbar variant="info">Update available</lt-snackbar>
<lt-snackbar action-label="Undo">Message deleted</lt-snackbar>
<lt-snackbar duration="0" variant="warning">You are offline</lt-snackbar>
import { useRef } from 'react';
import { Snackbar, Button } from '@latty-ds/react';
import type { Snackbar as SnackbarEl } from '@latty-ds/web';
function Example() {
const ref = useRef<SnackbarEl>(null);
return (
<>
<Button variant="primary" onClick={() => ref.current?.show()}>Save</Button>
<Snackbar ref={ref} variant="success" actionLabel="Undo">
Changes saved
</Snackbar>
</>
);
}
<script setup>import {ref} from 'vue' const snackbar = ref(null)</script>
<template>
<lt-button variant="primary" @click="snackbar?.show()">Save</lt-button>
<lt-snackbar ref="snackbar" variant="success" action-label="Undo">
Changes saved
</lt-snackbar>
</template>
Snackbar vs. Alert
Both communicate feedback to the user, but they serve different moments:
| Snackbar | Alert | |
|---|---|---|
| Position | Fixed overlay, bottom of viewport | Inline, within page flow |
| Lifetime | Transient — auto-dismisses after a configurable delay | Persistent — stays until dismissed or condition resolves |
| Use when | Confirming the result of an action the user just took (saved, deleted, copied) | The message is tied to a specific location on the page (a form, a section, a card) |
| Avoid when | The user needs to read and act on the message before continuing | The message is a response to a one-off action and doesn't need to persist |