Skip to content

Toast / Notification

<output role="status"> with optional data-type variant. Fixed to bottom-right.

Interactive demo

<output role="status" id="toast-output"></output>

<!-- Trigger via JS -->
<script>
  const toast = document.getElementById('toast-output');
  toast.textContent = 'File saved!';

  // Variants:
  toast.setAttribute('data-type', 'success');
  toast.setAttribute('data-type', 'danger');
  toast.setAttribute('data-type', 'warning');
</script>