Toast

cds-banner

The Toast delivers brief notifications to the user, appearing at the top left of the interface. It is designed to inform without interrupting the user's workflow, offering a subtle yet effective way to communicate important messages.

Default

• Feedback: --success
• Size: --medium

Changes savedYour changes were saved successfully.

---

<div class="cds-toast">
  <div class="cds-toast__content">
    <span class="cds-toast__title">Changes saved</span>
    <span class="cds-toast__text">Your changes were saved successfully.</span>
  </div>
  <button class="cds-toast__close"></button>
</div>

---

Elements

Element	Code	Parent	HTML tag	Required
Content	cds-toast__content	Block: cds-toast	<div>	required
└─ Title	cds-toast__title	Element: cds-toast__content	<span>	required
└─ Text	cds-toast__text	Element: cds-toast__content	<span>	optional
Close	cds-toast__close	Block: cds-toast	<button>	optional

Changes saved succesfully!

Changes savedYour changes were saved successfully.

---

---

Modifiers

Modifier	Options
Feedback	--success, --error
Size	--small, --medium, --large

Feedback

Changes savedYour changes were saved successfully.

Error saving changesAn issue occurred while saving. Please try again.

---

Success banner example

<div class="cds-toast cds-toast--success show">
  <div class="cds-toast__content">
    <span class="cds-toast__title">Changes saved</span>
    <span class="cds-toast__text">Your changes were saved successfully.</span>
  </div>
  <button class="cds-toast__close"></button>
</div>

Size

Saved!Changes saved.

Changes savedYour changes were saved successfully.

Changes saved successfullyYour changes have been saved and will take effect immediately.

---

Success banner example

<div class="cds-toast cds-toast--success show">
  <div class="cds-toast__content">
    <span class="cds-toast__title">Changes saved</span>
    <span class="cds-toast__text">Your changes were saved successfully.</span>
  </div>
  <button class="cds-toast__close"></button>
</div>

---

States

Modifier	Options
States	is-highlighted

Is highlighted

Changes savedYour changes were saved successfully.

Error saving changesAn issue occurred while saving. Please try again.

---

Example

<div class="cds-toast cds-toast--error is-highlighted show">
  <div class="cds-toast__content">
    <span class="cds-toast__title">Error saving changes</span>
    <span class="cds-toast__text">An issue occurred while saving. Please try again.</span>
  </div>
  <button class="cds-toast__close"></button>
</div>

Behavior

Toasts follow a timed auto-dismiss mechanism to ensure they do not persist indefinitely on the screen. By default, they remain visible for 5 seconds, though the duration can be adjusted within a range of 5 to 15 seconds.

• Toasts can be dismissed manually by clicking the close button.
• If the user hovers over a toast, the timer pauses until the cursor moves away, preventing premature dismissal.
• Toasts are stacked within a dedicated container called cds-toast-container, which ensures proper positioning and stacking. This container maintains a z-index of $cds-layer-fixed to keep toasts above other UI elements.

---

JS Sample code

onClick = "showToast('large', 'success', 'Done!', 'Your changes have been saved.', 5, false, true)"

JS sample code

export function showToast(size= 'medium', type='success', message, details, timeVisible = 20, highlighted = false, isCloseable = true) {
    
  var toastContainer = document.getElementById('toast-container-id');
  if (toastContainer == null){
    toastContainer = document.createElement('div');
    toastContainer.className = 'cds-toast-container';
    toastContainer.id = 'toast-container-id';
  }

  const toast = document.createElement('div');
  toast.className = 'cds-toast cds-toast--' + size + ' cds-toast--' + type;
  toast.id = 'toast-id-'+toastContainer.children.length;

  if (highlighted)
   toast.className = toast.className + ' is-highlighted';

  const toastcontent = document.createElement('div');
  toastcontent.className = 'cds-toast__content';

  if (message != null) {
    const toastcontentmessage = document.createElement('span');
    toastcontentmessage.className = 'cds-toast__title';
    toastcontentmessage.textContent = message;
    toastcontent.appendChild(toastcontentmessage);
  }

  if (details != null) {
    const toastcontentdetails = document.createElement('span');
    toastcontentdetails.className = 'cds-toast__text';
    toastcontentdetails.textContent = details;
    toastcontent.appendChild(toastcontentdetails);
  }

  if (isCloseable) {
    const closeButton = document.createElement('button');
    closeButton.className = 'cds-toast__close';
    closeButton.onclick = () => {
      finishInterval();
    };
    toast.appendChild(closeButton);
  }

  toast.appendChild(toastcontent);
  toastContainer.appendChild(toast);
  document.body.appendChild(toastContainer);

  setTimeout(() => {
      toast.classList.add('show');
  }, 10);

  const intervalTime = 10;
  const totalIntervals = (timeVisible * 1000) / intervalTime;
  let currentInterval = 0;
  let interval;
  let isHovered = false;

  const startInterval = () => {
    interval = setInterval(() => {
      currentInterval++;
      const widthPercentage = (currentInterval / totalIntervals) * 100;
      toast.style.setProperty('--progress-width', `${widthPercentage}%`);

      if (currentInterval >= totalIntervals) {
          if (toastContainer.contains(toast) && !isHovered) {
              finishInterval();
          }
      }
    }, intervalTime);
  };

  const pauseInterval = () => {
    clearInterval(interval);
  };

  const finishInterval = () => {
    clearInterval(interval);
    toast.style.setProperty('--progress-width', '100%');
    toast.classList.remove('show');
    
    setTimeout(() => {
      if (toastContainer.contains(toast)) {
          toastContainer.removeChild(toast);
      }
      if (!toastContainer.hasChildNodes()) {
          document.body.removeChild(toastContainer);
      }
    }, 500);
  };

  toast.addEventListener('mouseover', () => {
    isHovered = true;
    pauseInterval();
  });

  toast.addEventListener('mouseout', () => {
    isHovered = false;
    startInterval();
  });

  startInterval();
}