No Results Found
Toast gives customers helpful information about the success or failure of their action
<tk-toast show-toast="false" show-undo="false" onUndo="doUndo()">
<div class="mr-2x">Success! Your test has been submitted for review</div>
</tk-toast>
<tk-button
aria-haspopup="true"
onClick="showToast()"
>Show Toast</tk-button>
<script>
const toastComponent = document.getElementsByTagName('tk-toast')[0];
toastComponent.showToast = false;
toastComponent.showUndo = true;
toastComponent.addEventListener('undo', () => alert('Undo Clicked'));
const showToast = () => {
toastComponent.showToast = true;
}
</script>
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 →
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
showToast |
show-toast |
Sets the visibility of the toast component. | boolean |
false |
showUndo |
show-undo |
Sets the visibility of the undo button. | boolean |
false |
Event | Description | Type |
---|---|---|
undo |
Emits an event when the undo button is clicked. | CustomEvent<any> |
--tk-theme
CSS property.
To receive theme styling: set :root { --tk-theme: userTestingTheme }
in your main CSS file.