| title | status | thumb | image | description | storybook | figma_url | keywords | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Toast |
ready |
true |
assets/images/components/toast.png |
A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions. It contains at-a-glance information about outcomes and can be paired with actions. |
|
<example-toast class="d-zi-notification" :show="showToast" title="Title" :important="important" :kind="selectedKind" @close="toggleToast" />
<code-example-tabs htmlCode='
It's recommended to use a time of at least 6000 ms (minimum duration validated in the component) to give users enough time to read the toast. Take into account that the time necessary to read and comprehend the message could vary in users. For instance, users using assistive technology, or users with language barriers could potentially need more time to read and understand the message. If the duration is not provided the toast won't disappear automatically.
Show Example<code-example-tabs vueCode=' <dt-toast title="Title" :show="showDurationToast" @close="closeEvent" :duration="7500"
Message body with a link <template #action> Action ' />
If you need to self-position the toast at the top center, use the d-toast-wrapper Dialtone class:
<aside class="d-toast-wrapper">
<dt-toast
:title="title"
:message="message"
:show="isShown"
></dt-toast>
</aside>Avoid using toast for critical information since toast disappears automatically and make sure to provide enough time to read the message and act consequently. For best accessible user experience, the amount of time a toast displays for should be user configurable.
Using role="alert", it sets aria-live="assertive" which
means it will immediately interrupt anything currently being read by the screen reader, so use it for things
that require immediate attention such as:
- An invalid value was entered into a form field
- The user's login session is about to expire
- The connection to the server was lost, local changes will not be saved
Meanwhile role="status" implies aria-live="polite" which
means the toast will be read out after what's currently being has finished.
A screen reader visible only close button is added by default.
<script setup> import ExampleToast from '@exampleComponents/ExampleToast.vue'; import { ref } from 'vue'; const toastOptions = [ { value: 'base', label: 'Base' }, { value: 'error', label: 'Error' }, { value: 'info', label: 'Info' }, { value: 'success', label: 'Success' }, { value: 'warning', label: 'Warning' }, ]; const showToast = ref(false); const important = ref(false); const pinned = ref(false); const selectedKind = ref('base'); const showDurationToast = ref(false); function toggleToast () { showToast.value = !showToast.value; } function toggleDurationToast (value) { showDurationToast.value = value; } const updateShow = (value) => { if (!value) showDurationToast.value = false; }; function toggleImportant () { important.value = !important.value; } function togglePinned () { pinned.value = !pinned.value; } </script>