Toast gives customers helpful information about the success or failure of their action
<tk-toast id="showToast" show-toast="false">
<div>Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast)">
Default toast
</tk-button>The toast component displays a notification when show-toast is set to true.
Requires show-toast Prop to be bound, so that it’s set as an object instead of a string. In Angular, this is: [showToast]='[{ your object }]'.
This requires JS to set the show-toast Prop, otherwise it’ll treat the value as a string. Read More →
<div class="mv-2x">
<tk-toast id="showToast1" show-toast="false">
<div>Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast1)">
Dark (default)
</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast2" show-toast="false" color="light">
<div>Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast2)">
Light
</tk-button>
</div><div class="mv-2x">
<tk-toast id="showToast3" show-toast="false" position="top-left">
<div>Success! Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast3)"
>Top left</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast4" show-toast="false">
<div>Success! Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast4)">
Top center (default)
</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast5" show-toast="false" position="top-right">
<div>Success! Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast5)">
Top right
</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast6" show-toast="false" position="bottom-left">
<div>Success! Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast6)">
Bottom left
</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast7" show-toast="false" position="bottom-center">
<div>Success! Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast7)">
Bottom center
</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast8" show-toast="false" position="bottom-right">
<div>Success! Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast8)">
Bottom right
</tk-button>
</div>Position is treated as a preference. The positions available are: top-left, top-center, top-right, bottom-left, bottom-center and bottom-right.
<div class="mv-2x">
<tk-toast id="showToast9" show-toast="false">
<div slot="status-message">Hey!</div>
<div>Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast9)">
Info (Default)
</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast10" show-toast="false" status="success">
<div slot="status-message">Success!</div>
<div>Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast10)">
Success
</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast11" show-toast="false" status="error">
<div slot="status-message">Error!</div>
<div>Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast11)">
Error
</tk-button>
</div>
<div class="mv-2x">
<tk-toast id="showToast12" show-toast="false" status="warning">
<div slot="status-message">Warning!</div>
<div>Your test has been submitted for review.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast12)">
Warning
</tk-button>
</div>A toast can be used to communicate the status of an action. It can be: default, success, warning or error. It can be used as an overlay banner on live conversation for example to signal to the user about some information or to suggest an action.
Event fired: none
<div class="l-flex l-v-center">
<tk-toast id="showToast13" show-toast="false" show-undo="true">
<div>You can dismiss this toast or undo your action.</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToastComponent(showToast13)">
Open toast
</tk-button>
<p class="ml-4x t-body-paragraph">Event fired: <span class="t-heavy" id="text-container">none</span></p>
</div>
<script>
const toast = document.getElementById('showToast13');
toast.addEventListener('dismiss', (e) => displayText(e));
toast.addEventListener('undo', (e) => displayText(e));
const displayText = (e) => {
document.getElementById('text-container').innerText = `${e.type}`;
};
</script>| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
color |
color |
Sets the background color of the toast component. | "dark" | "light" |
'dark' |
position |
position |
Sets the position of the toast component. | "bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right" |
'top-center' |
showToast |
show-toast |
Sets the visibility of the toast component. | boolean |
false |
showUndo |
show-undo |
Sets the visibility of the undo button. | boolean |
false |
status |
status |
Sets the status of the toast component. | "error" | "neutral" | "success" | "warning" |
'neutral' |
| Event | Description | Type |
|---|---|---|
dismiss |
Emits an event when the toast component is dismissed. | CustomEvent<any> |
undo |
Emits an event when the undo button is clicked. | CustomEvent<any> |