Toast Item
<quiet-toast-item>
Toast items are the notifications displayed by the toast component.
You can create toast items on the fly using the toast element's
create() method. Alternatively, you
can create them declaratively by wrapping them in a
<template>
and calling
createFromTemplate().
has sent you a message
<quiet-toast-item variant="primary" duration="0"> <quiet-avatar slot="icon" label="Meowy McGee's avatar" image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar> <strong>Meowy McGee</strong><br> <small style="color: var(--quiet-text-muted);">has sent you a message</small> </quiet-toast-item>
For documentation purposes, this page omits the <template> tag, allowing the toast item
to appear inline so you can see the result of each example.
Examples Jump to heading
Variants Jump to heading
Set the variant attribute to default, primary,
constructive, or destructive to change the button's variant.
<quiet-toast-item variant="default" duration="0"> <quiet-icon slot="icon" name="settings"></quiet-icon> Your changes have been saved </quiet-toast-item> <quiet-toast-item variant="primary" duration="0"> <quiet-icon slot="icon" name="cat"></quiet-icon> The cats have requested more food </quiet-toast-item> <quiet-toast-item variant="constructive" duration="0"> <quiet-icon slot="icon" name="send"></quiet-icon> Your message has been sent </quiet-toast-item> <quiet-toast-item variant="destructive" duration="0"> <quiet-icon slot="icon" name="alert-triangle"></quiet-icon> The litter box has been emptied </quiet-toast-item>
Adding icons Jump to heading
Use the icon slot to add a visual to the toast item. Icons, images, and avatars work well here.
has invited you to collaborate on a project
<quiet-toast-item duration="0"> <quiet-avatar slot="icon" label="Chill kitty" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar> <strong>Chill Kitty</strong><br> <small style="color: var(--quiet-text-muted);">has invited you to collaborate on a project</small> </quiet-toast-item>
Changing the duration Jump to heading
By default, toast items dismiss themselves after five seconds. Set the duration property to the
number of milliseconds the item should wait before dismissing, or 0 to wait for the user to
dismiss it.
<quiet-toast-item duration="10000"> This notification will stay open for 10 seconds. </quiet-toast-item> <quiet-toast-item duration="0"> This notification will stay open until the user closes it </quiet-toast-item>
Hiding the close button Jump to heading
Use the no-close-button attribute to hide the close button. This is only recommended when a
duration is set or when you're using custom buttons to dismiss the notification.
<quiet-toast-item no-close-button duration="0"> This notification does not have a close button. </quiet-toast-item>
Do not use this as a way to force the notification to stay open. You should provide a custom close button
when you use this option. Remember that users can also press
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-toast-item> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/toast-item/toast-item.js';
To manually import <quiet-toast-item> from npm, use the following code.
import '@quietui/quiet/dist/components/toast-item/toast-item.js';
Slots Jump to heading
Toast Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | Content to show in the toast item. |
icon
|
Content to show as a visual. Usually an icon, image, avatar, etc. |
Properties Jump to heading
Toast Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
variant
|
The type of notification to render. |
|
'primary'
|
'default'
|
duration
|
The length of time to show the notification before removing it. Set this to 0 to show
the notification until the user dismisses it.
|
|
number
|
5000
|
noCloseButton
no-close-button
|
When set, the close button will be omitted. |
|
boolean
|
false
|
Events Jump to heading
Toast Item dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events
| Name | Description |
|---|---|
quiet-before-close |
Emitted when the toast item is dismissed. |
quiet-close |
Emitted after the toast has been dismissed and the hide animation has completed. |
CSS custom properties Jump to heading
Toast Item supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties
| Name | Description | Default |
|---|---|---|
--accent-line-width |
The width of the notification's accent line. |
0.33em
|
--progress |
A readonly value that goes from 100% to 0%, representing the progress remaining until the notification closes. Useful for creating custom content with visual indicators of the notification's progress. |
CSS parts Jump to heading
Toast Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
icon |
::part(icon)
|
|
content |
::part(content)
|
|
close-button |
The close button, a <button> element. |
::part(close-button)
|
progress |
The progress ring, a <quiet-progress> element. |
::part(progress)
|
progress__track |
The progress ring's exported track part. |
::part(progress__track)
|
progress__indicator |
The progress ring's exported indicator part. |
::part(progress__indicator)
|
progress__content |
The progress ring's exported content part. |
::part(progress__content)
|
close-icon |
The close icon, a <quiet-icon> element. |
::part(close-icon)
|
close-icon__svg |
The close icons exported svg part. |
::part(close-icon__svg)
|
Dependencies Jump to heading
Toast Item automatically imports the following elements. Sub-dependencies are also included in this list.