Toast

Toast gives customers helpful information about the success or failure of their action

Success! Your test has been submitted for review
<tk-toast show-toast="false" show-undo="true" onUndo="doUndo()">
  Success! Your test has been submitted for review
</tk-toast>
<button
  aria-haspopup="true"
  class="btn--primary"
  onClick="showToast()"
  type="button"
>
  Show Toast
</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>

Description

The toast component displays a notification when show-toast is set to true.

Using within a framework:

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 }]'.

Using without a framework:

This requires JS to set the show-toast Prop, otherwise it’ll treat the value as a string. Read More →

Do

  • Use the component for short messages that don’t require additional user action
  • Use the component for invisible state changes that may affect the user experience in unexpected ways

Don't

  • Block other overlay messages, such as modals
  • Use the component for long, complex messages