Toasts

Bootstrap 5 Toast component

Bootstrap Toast component is a non-disruptive message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.

Push notifications to your visitors with a 'toast', a lightweight and easily customizable alert message. Toasts are designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Note: Read the API tab to find all available options and advanced customization

Required ES init: Toast *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Click the buttons to launch the toasts.

Edit in sandbox 
<!-- Trigger buttons -->
<button type="button" class="btn btn-primary" id="basic-primary-trigger" data-mdb-ripple-init>Primary</button>
<button type="button" class="btn btn-secondary" id="basic-secondary-trigger" data-mdb-ripple-init>Secondary</button>
<button type="button" class="btn btn-success" id="basic-success-trigger" data-mdb-ripple-init>Success</button>
<button type="button" class="btn btn-danger" id="basic-danger-trigger" data-mdb-ripple-init>Danger</button>
<button type="button" class="btn btn-warning" id="basic-warning-trigger" data-mdb-ripple-init>Warning</button>
<button type="button" class="btn btn-info" id="basic-info-trigger" data-mdb-ripple-init>Info</button>
<button type="button" class="btn btn-light" id="basic-light-trigger" data-mdb-ripple-init>Light</button>
<button type="button" class="btn btn-dark" id="basic-dark-trigger" data-mdb-ripple-init>Dark</button>

<!-- Toasts -->
<div
  class="toast fade mx-auto"
  id="basic-primary-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="primary"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Primary Basic Example</div>
</div>

<div
  class="toast fade mx-auto"
  id="basic-secondary-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="secondary"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Secondary Basic Example</div>
</div>

<div
  class="toast fade mx-auto"
  id="basic-success-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="success"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Success Basic Example</div>
</div>

<div
  class="toast fade mx-auto"
  id="basic-danger-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="danger"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Danger Basic Example</div>
</div>

<div
  class="toast fade mx-auto"
  id="basic-warning-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="warning"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Warning Basic Example</div>
</div>

<div
  class="toast fade mx-auto"
  id="basic-info-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="info"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Info Basic Example</div>
</div>

<div
  class="toast fade mx-auto"
  id="basic-light-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="light"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Light Basic Example</div>
</div>

<div
  class="toast fade mx-auto"
  id="basic-dark-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="dark"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Dark Basic Example</div>
</div>
import { Toast, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Toast, Ripple });

const toasts = [
  'basic-primary-example',
  'basic-secondary-example',
  'basic-success-example',
  'basic-danger-example',
  'basic-warning-example',
  'basic-info-example',
  'basic-light-example',
  'basic-dark-example',
];

const triggers = [
  'basic-primary-trigger',
  'basic-secondary-trigger',
  'basic-success-trigger',
  'basic-danger-trigger',
  'basic-warning-trigger',
  'basic-info-trigger',
  'basic-light-trigger',
  'basic-dark-trigger',
];

triggers.forEach((trigger, index) => {
  let basicInstance = Toast.getInstance(document.getElementById(toasts[index]));
  document.getElementById(trigger).addEventListener('click', () => {
    basicInstance.show();
  });
});
const toasts = [
  'basic-primary-example',
  'basic-secondary-example',
  'basic-success-example',
  'basic-danger-example',
  'basic-warning-example',
  'basic-info-example',
  'basic-light-example',
  'basic-dark-example',
];

const triggers = [
  'basic-primary-trigger',
  'basic-secondary-trigger',
  'basic-success-trigger',
  'basic-danger-trigger',
  'basic-warning-trigger',
  'basic-info-trigger',
  'basic-light-trigger',
  'basic-dark-trigger',
];

triggers.forEach((trigger, index) => {
  let basicInstance = mdb.Toast.getInstance(document.getElementById(toasts[index]));
  document.getElementById(trigger).addEventListener('click', () => {
    basicInstance.show();
  });
});

Static example

Edit in sandbox 
<div
  class="toast show fade mx-auto"
  id="static-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="false"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Static Example</div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";

initMDB({ Toast });

Colors

Since 4.2.0 release our toasts have their own color palette, so we don't use .bg-* and .text-* color classes. For a crisp edge, we removed the default border with .border-0.

Edit in sandbox 
<div class="row justify-content-center">
  <div class="col-xl-5 col-lg-6 mb-2">
    <div
      class="toast show fade"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-mdb-toast-init
      data-mdb-color="info"
      data-mdb-autohide="false"
    >
      <div class="toast-header">
        <i class="fas fa-info-circle fa-lg me-2"></i>
        <strong class="me-auto">MDBootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </div>
  <div class="col-xl-5 col-lg-6 mb-2">
    <div
      class="toast show fade"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-mdb-toast-init
      data-mdb-color="warning"
      data-mdb-autohide="false"
    >
      <div class="toast-header">
        <i class="fas fa-exclamation-triangle fa-lg me-2"></i>
        <strong class="me-auto">MDBootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </div>
</div>
<div class="row mb-2 justify-content-center">
  <div class="col-xl-5 col-lg-6 mb-2">
    <div
      class="toast show fade"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-mdb-toast-init
      data-mdb-color="success"
      data-mdb-autohide="false"
    >
      <div class="toast-header">
        <i class="fas fa-check fa-lg me-2"></i>
        <strong class="me-auto">MDBootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </div>
  <div class="col-xl-5 col-lg-6 mb-2">
    <div
      class="toast show fade"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-mdb-toast-init
      data-mdb-color="danger"
      data-mdb-autohide="false"
    >
      <div class="toast-header">
        <i class="fas fa-exclamation-circle fa-lg me-2"></i>
        <strong class="me-auto">MDBootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">Hello, world! This is a toast message.</div>
    </div>
  </div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";

initMDB({ Toast });

Placement

You can set position of every notification using data-mdb-position attribute or update() method.

Select horizontal / vertical alignment

Current position: top-right
Edit in sandbox 
<div
  class="toast show"
  id="placement-example-toast"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="false"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Toast position</div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";

initMDB({ Toast });

const instance = Toast.getInstance(document.getElementById('placement-example-toast'));
instance.update({ position: 'top-right', });
const instance = mdb.Toast.getInstance(document.getElementById('placement-example-toast'));
instance.update({ position: 'top-right', });

Offset

You can also change offset of every notification using data-mdb-offset attribute or update() method.

Edit in sandbox 
<div
  class="toast"
  id="offset-toast"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-toast-init
  data-mdb-autohide="false"
  data-mdb-offset="50"
  data-mdb-color="info"
>
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Toast offset</div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";

initMDB({ Toast });

Container

You can display notification anywhere. Just put your toast in your target element and fill data-mdb-container attribute with id or class of parent or update() method.

Edit in sandbox 
<div id="parent">
  <div
    class="toast"
    id="container-example-toast"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    data-mdb-toast-init
    data-mdb-autohide="false"
    data-mdb-container="#parent"
  >
    <div class="toast-header">
      <strong class="me-auto">MDBootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Toast container</div>
  </div>
</div>
// Initialization for ES Users
import { Toast, initMDB } from "mdb-ui-kit";

initMDB({ Toast });

Stacking

You can turn on/off stacking your notifications using data-mdb-stacking attribute or update() method.

Edit in sandbox 
<button type="button" class="btn btn-primary me-3" id="stacking-trigger" data-mdb-ripple-init>Show toast notification</button>
// Initialization for ES Users
import { Toast, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Toast, Ripple });

let stackCount = 0;

document.getElementById('stacking-trigger').addEventListener('click', () => {
  stackCount++;

  const toast = document.createElement('div');
  toast.innerHTML = `
    <div class="toast-header">
      <strong class="me-auto">${stackCount}</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Stacking element
    </div>
  `;

  toast.classList.add('toast', 'fade');

  document.body.appendChild(toast);

  const toastInstance = new Toast(toast, {
    stacking: true,
    hidden: true,
    width: '450px',
    position: 'top-right',
    autohide: false,
    delay: 5000,
  });

  toastInstance.show();
});
let stackCount = 0;

document.getElementById('stacking-trigger').addEventListener('click', () => {
  stackCount++;

  const toast = document.createElement('div');
  toast.innerHTML = `
    <div class="toast-header">
      <strong class="me-auto">${stackCount}</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Stacking element
    </div>
  `;

  toast.classList.add('toast', 'fade');

  document.body.appendChild(toast);

  const toastInstance = new mdb.Toast(toast, {
    stacking: true,
    hidden: true,
    width: '450px',
    position: 'top-right',
    autohide: false,
    delay: 5000,
  });

  toastInstance.show();
});

Stacking (container)

You can turn on/off stacking your notifications using data-mdb-stacking attribute or update() method.

Edit in sandbox 
<div class="container text-center" id="stacking-container" style="height: 400px; overflow: scroll;">
  <button type="button" class="btn btn-primary me-3" id="stacking-container-trigger" data-mdb-ripple-init>Show toast notification</button>
</div>
// Initialization for ES Users
import { Toast, Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Toast, Ripple });

let stackCount = 0;

document.getElementById('stacking-container-trigger').addEventListener('click', () => {
  stackCount++;

  const toast = document.createElement('div');
  toast.innerHTML = `
    <div class="toast-header">
      <strong class="me-auto">${stackCount}</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body text-start">
      Stacking element
    </div>
  `;

  toast.classList.add('toast', 'fade');

  document.getElementById('stacking-container').appendChild(toast);

  const toastInstance = new Toast(toast, {
    stacking: true,
    hidden: true,
    width: '450px',
    position: 'top-right',
    container: '#stacking-container',
    autohide: true,
    delay: 5000,
  });

  toastInstance.show();
});
let stackCount = 0;

document.getElementById('stacking-container-trigger').addEventListener('click', () => {
  stackCount++;

  const toast = document.createElement('div');
  toast.innerHTML = `
    <div class="toast-header">
      <strong class="me-auto">${stackCount}</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body text-start">
      Stacking element
    </div>
  `;

  toast.classList.add('toast', 'fade');

  document.getElementById('stacking-container').appendChild(toast);

  const toastInstance = new mdb.Toast(toast, {
    stacking: true,
    hidden: true,
    width: '450px',
    position: 'top-right',
    container: '#stacking-container',
    autohide: true,
    delay: 5000,
  });

  toastInstance.show();
});

Toasts - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
import { Toast, initMDB } from "mdb-ui-kit";

initMDB({ Toast });
import "mdb-ui-kit"

Usage

Via data attributes

Using the Toasts component doesn't require any additional JavaScript code - simply add data-mdb-toast-init attribute to .toast and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Edit in sandbox 
<div class="toast" data-mdb-toast-init id="example-toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="toast-body">Example toast</div>
</div>
Dismiss

Dismissal can be achieved with data attributes on a button within the toast as demonstrated below:

Edit in sandbox 
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>

or on a button outside the toast using the data-mdb-target as demonstrated below:

Edit in sandbox 
<button type="button" class="btn-close" data-mdb-dismiss="toast" data-mdb-target="#my-toast" aria-label="Close"></button>

Via JavaScript

Edit in sandbox 
const element = document.querySelector('.toast');
const instance = new Toast(element);
const element = document.querySelector('.toast');
const instance = new mdb.Toast(element);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
$(document).ready(() => {
  $('.example-class').toast(options);
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-offset="10".

Name Type Default Description
width String / null null Defines the width of a toast
position String null Sets the position of the toast. The option includes a horizontal component: top or bottom, and a vertical component: left, center, or right, with the horizontal part specified first and connected with a dash. For example, top-left
color String | null null Sets background of a toast (basic MDB colors)
offset Number 10 Changes offset of toast
container String | null '' Defines id/class of parent element
autohide Boolean true Toasts will hide automatically or not
animation Boolean true Toasts will be animated or not
delay Number | Boolean 500 Sets length of animation delay
appendToBody Boolean false Appends element to the end of body
stacking Boolean true Enables stacking notifications

Methods

Name Description Example
show Shows toast myToast.show()
hide Hides toast myToast.hide()
dispose Removes a mdb.Toast instance myToast.dispose()
getInstance Static method which allows you to get the toast instance associated to a DOM element. Toast.getInstance(toastEl)
getOrCreateInstance Static method which returns the toast instance associated to a DOM element or create a new one in case it wasn't initialized. Toast.getOrCreateInstance(toastEl)
update Updates options of mdb.Toast instance myToast.update({position: 'top-center'})
Edit in sandbox 
const toastEl = document.getElementById('show-example');
const toast = new Toast(toastEl);
toast.show();
const toastEl = document.getElementById('show-example');
const toast = new mdb.Toast(toastEl);
toast.show();

Events

Name Description
show.mdb.toast Emitted when a toast has been toggled
shown.mdb.toast Emitted once toast is shown
hide.mdb.toast Emitted when a toast has been toggled
hidden.mdb.toast Emitted once toast is hidden
Edit in sandbox 
const toastEl = document.getElementById('myToast')
toastEl.addEventListener('show.mdb.toast', () => {
  // do something...
});

CSS variables

As part of MDB’s evolving CSS variables approach, toast now use local CSS variables on .toast for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Edit in sandbox 
// .toast
--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

--#{$prefix}toast-border-bottom-width: #{$toast-border-bottom-width};
--#{$prefix}toast-btn-close-width: #{$toast-btn-close-width};
--#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr};
--#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};

// .toast-container
--#{$prefix}toast-zindex: #{$zindex-toast};

SCSS variables

Edit in sandbox 
$toast-max-width: 350px;
$toast-font-size: 0.875rem;
$toast-color: null;
$toast-border-width: var(--#{$prefix}border-width);
$toast-border-color: var(--#{$prefix}border-color-translucent);
$toast-spacing: $container-padding-x;

$toast-header-color: var(--#{$prefix}secondary-color);
$toast-header-border-color: $toast-border-color;

$toast-box-shadow: $box-shadow-4;
$toast-border-radius: $border-radius-lg;
$toast-border-bottom-width: $border-width-alternate;
$toast-background-color: var(--#{$prefix}surface-bg);
$toast-padding-x: 1rem;
$toast-padding-y: 0.65rem;
$toast-header-background-color: var(--#{$prefix}surface-bg);
$toast-btn-close-width: 1.3em;
$toast-btn-close-mr: -0.375rem;
$toast-btn-close-ml: 0.75rem;