Toast

A succinct message that is displayed temporarily.

Usage

HTML + JavaScript

Step 1: Include the JavaScript file

Include the toast.js file. Add this to the <head> of your page:

<script src="https://cdn.jsdelivr.net/npm/basecoat-css@beta/dist/js/toast.min.js" defer></script>
Components with JavaScript Use the CLI toast.js

Step 2: Add the toaster HTML

Toasts are displayed in a parent element, the "toaster". Add this to this to at the end of your <body>:

<div id="toaster" class="toaster"></div>

Step 3: Add your toasts

If you decide to server-render your toasts, or load them using asynchronoulsy with something like HTMX, you can just add the toast's markup to the toaster:

<div id="toaster" class="toaster">
  <div class="toast" role="status" aria-atomic="true" aria-hidden="false" data-category="success">
    <div class="toast-content">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10" />
        <path d="m9 12 2 2 4-4" />
      </svg>

      <section>
        <h2>Success</h2>
        <p>A success toast called from the front-end.</p>
      </section>

      <footer>
        <button type="button" class="btn" data-toast-action>Dismiss</button>
      </footer>
    </div>
  </div>
</div>
HTML structure

If you need to create a toast from the front-end, you can dispatch a custom basecoat:toast event as such:

<button
  class="btn-outline"
  onclick="window.dispatchEvent(new CustomEvent('basecoat:toast', {
    detail: {
      config: {
        category: 'success',
        title: 'Success',
        description: 'A success toast called from the front-end.',
        cancel: {
          label: 'Dismiss'
        }
      }
    }
  }))">
  Toast from front-end
</button>
JavaScript config object

HTML structure

<div class="toast">
Wraps around the toast component. You can add a data-duration attribute to set the duration of the toast in milliseconds (e.g. data-duration="5000" for 5 seconds). If not provided, the default duration is 3000ms (3 seconds) or 5000ms (5 seconds) for error toasts.
<div class="toast-content">
The content of the toast.
<svg aria-hidden="true"> Optional
The toast's icon.
<section>
The toast's message.
<h2>
The toast's title.
<p> Optional
The toast's description.
<footer> Optional
The toast's buttons. When clicked, the toast will be closed (unless the button's onclick is set to e.preventDefault()).
<button type="button" class="btn" onclick="{ ONCLICK }"> or <a href="{ URL }" class="btn" > Optional
The toast's action button. This can either be a link (with a href attribute) or a button (with an onclick attribute).
<button type="button" class="btn-outline" onclick="{ ONCLICK }"> Optional
The toast's cancel button (with an optional onclick attribute).

JavaScript config object

duration Optional
The duration of the toast in milliseconds. If not provided, the default duration is 3000ms (3 seconds) or 5000ms (5 seconds) for error toasts.
category Optional
Category of the toast, either success, info, warning, or error.
title
The title of the toast.
description Optional
The description of the toast.
action Optional
Action button.
label Optional
The label of the cancel button. If not provided, the default label is "Dismiss".
onclick Optional
The onclick of the cancel button.
cancel Optional
Cancel button.
label Optional
The label of the cancel button. If not provided, the default label is "Dismiss".
onclick Optional
The onclick of the cancel button.

Jinja and Nunjucks

You can use the toaster() and toast() Nunjucks or Jinja macros for this component.

Use Nunjucks or Jinja macros Jinja macro Nunjucks macro 
{% from "toast.njk" import toaster %}
{{ toaster(
  toasts=[
    {
      type: "success",
      title: "Success",
      description: "A success toast called from the front-end.",
      action: { label: "Dismiss", click: "close()" }
    },
    {
      type: "info",
      title: "Info",
      description: "An info toast called from the front-end.",
      action: { label: "Dismiss", click: "close()" }
    }
  ]
) }}