Toasts

You may want to show a toast notification to provide feedback to a user. You can use the openToast method on the context for this. The toast notification appears on the bottom of the screen and will (by default) automatically close.

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  name: 'my-component',
  props: ['context'],
  methods: {
    handleClick() {
      runSomeOperation().then(() => {
        context.openToast('Task completed');
      });
    }
  }
};
</script>

<style scoped></style>

<script>
  export let context;
  
  async handleClick() {
    await runSomeOperation();
    context.openToast('Task completed');
  }
</script>

<button on:click={handleClick}>Click me!</button>

<style></style>

Examples

// Default auto-close behavior (true)
context.openToast('Changes saved');

// Default auto-close behavior when actionButtonText is set (false)
context.openToast('Connection timed out', { actionButtonText: 'Retry' });

// Overrides default auto-close behavior, despite actionButtonText being set.
context.openToast('Email archived', { actionButtonText: 'Undo', autoClose: true });