Toasts

Vue 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

Basic example

Click the buttons to launch the toasts.

<template>
  <MDBBtn color="primary" id="basic-primary-trigger" @click="toast1 = true">
    Primary
  </MDBBtn>
  <MDBBtn color="secondary" id="basic-secondary-trigger" @click="toast2 = true">
    Secondary
  </MDBBtn>
  <MDBBtn color="success" id="basic-success-trigger" @click="toast3 = true">
    Success
  </MDBBtn>
  <MDBBtn color="danger" id="basic-danger-trigger" @click="toast4 = true">
    Danger
  </MDBBtn>
  <MDBBtn color="warning" id="basic-warning-trigger" @click="toast5 = true">
    Warning
  </MDBBtn>
  <MDBBtn color="info" id="basic-info-trigger" @click="toast6 = true">
    Info
  </MDBBtn>
  <MDBBtn color="light" id="basic-light-trigger" @click="toast7 = true">
    Light
  </MDBBtn>
  <MDBBtn color="dark" id="basic-dark-trigger" @click="toast8 = true">
    Dark
  </MDBBtn>
  <MDBToast
    v-model="toast1"
    id="basic-primary-example"
    autohide
    :delay="2000"
    position="top-right"
    appendToBody
    stacking
    width="350px"
    toast="primary"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    Primary Basic Example
  </MDBToast>
  <MDBToast
    v-model="toast2"
    id="basic-secondary-example"
    autohide
    :delay="2000"
    position="top-right"
    appendToBody
    stacking
    width="350px"
    toast="secondary"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    Secondary Basic Example
  </MDBToast>
  <MDBToast
    v-model="toast3"
    id="basic-success-example"
    autohide
    :delay="2000"
    position="top-right"
    appendToBody
    stacking
    width="350px"
    toast="success"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    Success Basic Example
  </MDBToast>
  <MDBToast
    v-model="toast4"
    id="basic-danger-example"
    autohide
    :delay="2000"
    position="top-right"
    appendToBody
    stacking
    width="350px"
    toast="danger"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    Danger Basic Example
  </MDBToast>
  <MDBToast
    v-model="toast5"
    id="basic-warning-example"
    autohide
    :delay="2000"
    position="top-right"
    appendToBody
    stacking
    width="350px"
    toast="warning"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    Warning Basic Example
  </MDBToast>
  <MDBToast
    v-model="toast6"
    id="basic-info-example"
    autohide
    :delay="2000"
    position="top-right"
    appendToBody
    stacking
    width="350px"
    toast="info"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    Info Basic Example
  </MDBToast>
  <MDBToast
    v-model="toast7"
    id="basic-light-example"
    autohide
    :delay="2000"
    position="top-right"
    appendToBody
    stacking
    width="350px"
    toast="light"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    Light Basic Example
  </MDBToast>
  <MDBToast
    v-model="toast8"
    id="basic-dark-example"
    autohide
    :delay="2000"
    position="top-right"
    appendToBody
    stacking
    width="350px"
    toast="dark"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    Dark Basic Example
  </MDBToast>
</template>
<script>
  import { MDBToast, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";
  export default {
    components: {
      MDBToast,
      MDBBtn
    },
    setup() {
      const toast1 = ref(false);
      const toast2 = ref(false);
      const toast3 = ref(false);
      const toast4 = ref(false);
      const toast5 = ref(false);
      const toast6 = ref(false);
      const toast7 = ref(false);
      const toast8 = ref(false);
      return {
        toast1,
        toast2,
        toast3,
        toast4,
        toast5,
        toast6,
        toast7,
        toast8
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBToast, MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const toast1 = ref(false);
  const toast2 = ref(false);
  const toast3 = ref(false);
  const toast4 = ref(false);
  const toast5 = ref(false);
  const toast6 = ref(false);
  const toast7 = ref(false);
  const toast8 = ref(false);
</script>

Static example

<template>
  <MDBToast id="static-example" static :stacking="false" v-model="toast9">
    <template #title> MDBootstrap </template>
    <template #small> 11 mins ago </template>
    Static Example
  </MDBToast>
</template>
<script>
  import { MDBToast } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBToast,
    },
    setup() {
      const toast9 = ref(true);
      return {
        toast9,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBToast } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const toast9 = ref(true);
</script>

Colors

<template>
  <MDBRow class="mb-5">
    <MDBCol xl="3" lg="6">
      <MDBToast
        static
        :stacking="false"
        v-model="toast10"
        toast="info"
        icon="fas fa-info-circle fa-lg me-2"
      >
        <template #title> MDBootstrap </template>
        <template #small> 11 mins ago </template>
        Hello, world! This is a toast message.
      </MDBToast>
    </MDBCol>
    <MDBCol xl="3" lg="6">
      <MDBToast
        static
        :stacking="false"
        v-model="toast11"
        toast="warning"
        icon="fas fa-exclamation-triangle fa-lg me-2"
      >
        <template #title> MDBootstrap </template>
        <template #small> 11 mins ago </template>
        Hello, world! This is a toast message.
      </MDBToast>
    </MDBCol>
    <MDBCol xl="3" lg="6">
      <MDBToast
        static
        :stacking="false"
        v-model="toast12"
        toast="success"
        icon="fas fa-check fa-lg me-2"
      >
        <template #title> MDBootstrap </template>
        <template #small> 11 mins ago </template>
        Hello, world! This is a toast message.
      </MDBToast>
    </MDBCol>
    <MDBCol xl="3" lg="6">
      <MDBToast
        static
        :stacking="false"
        v-model="toast13"
        toast="danger"
        icon="fas fa-exclamation-circle fa-lg me-2"
      >
        <template #title> MDBootstrap </template>
        <template #small> 11 mins ago </template>
        Hello, world! This is a toast message.
      </MDBToast>
    </MDBCol>
  </MDBRow>
</template>
<script>
  import { MDBToast, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBToast,
      MDBRow,
      MDBCol,
    },
    setup() {
      const toast10 = ref(true);
      const toast11 = ref(true);
      const toast12 = ref(true);
      const toast13 = ref(true);
      return {
        toast10,
        toast11,
        toast12,
        toast13,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBToast, MDBRow, MDBCol } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const toast10 = ref(true);
  const toast11 = ref(true);
  const toast12 = ref(true);
  const toast13 = ref(true);
</script>

Placement

You can set position of every notification using position property.

Select horizontal / vertical alignment

Current position: top-right
<template>
  <div class="text-center">
    <p class="fw-bold">Select horizontal / vertical alignment</p>
  </div>
  <div class="my-4 text-center">
    <MDBBtn color="primary" @click="setVertical('top')">Top</MDBBtn>
    <MDBBtn color="primary" class="ms-2" @click="setVertical('bottom')"> Bottom </MDBBtn>
  </div>
  <div class="my-4 text-center">
    <MDBBtn color="primary" @click="setHorizontal('left')">Left</MDBBtn>
    <MDBBtn color="primary" class="mx-2" @click="setHorizontal('center')">
      Center
    </MDBBtn>
    <MDBBtn color="primary" @click="setHorizontal('right')"> Right </MDBBtn>
  </div>
  <div class="mb-4 text-center">
    <h5>
      Current position:
      <span id="positionDisplay">{{ toast14position }}</span>
    </h5>
  </div>
  <MDBBtn color="primary" id="placement-trigger" @click="toast14 = true">
    Show toast
  </MDBBtn>
  <MDBToast
    v-model="toast14"
    id="placement-toast"
    :position="toast14position"
    :autohide="false"
    appendToBody
    width="350px"
    toast="info"
  >
    <template #title> MDBootstrap </template>
    <template #small> 11 mins ago </template>
    Toast placement
  </MDBToast>
</template>
<script>
  import { MDBToast, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref, computed } from 'vue';
  export default {
    components: {
      MDBToast,
      MDBBtn,
    },
    setup() {
      const toast14 = ref(false);
      const vertical = ref('top');
      const horizontal = ref('right');
      const toast14position = computed(() => {
        return `${vertical.value}-${horizontal.value}`;
      });
      const setHorizontal = (value) => {
        horizontal.value = value;
      };
      const setVertical = (value) => {
        vertical.value = value;
      };
      return {
        toast14,
        toast14position,
        setHorizontal,
        setVertical,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBToast, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref, computed } from 'vue';

  const toast14 = ref(false);
  const vertical = ref('top');
  const horizontal = ref('right');
  const toast14position = computed(() => {
    return `${vertical.value}-${horizontal.value}`;
  });
  const setHorizontal = (value: string) => {
    horizontal.value = value;
  };
  const setVertical = (value: string) => {
    vertical.value = value;
  };
</script>

Offset

You can also change offset of every notification using offset property. 

<template>
  <MDBBtn color="primary" id="offset-trigger" @click="toast15 = true">
    Offset: 50
  </MDBBtn>
  <MDBToast
    v-model="toast15"
    id="offset-toast"
    :delay="2000"
    :autohide="false"
    position="top-right"
    offset="50"
    appendToBody
    width="350px"
    toast="info"
  >
    <template #title> MDBootstrap </template>
    <template #small> 11 mins ago </template>
    Offset: 50
  </MDBToast>
</template>
<script>
  import { MDBToast, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBToast,
      MDBBtn,
    },
    setup() {
      const toast15 = ref(false);
      return {
        toast15,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBToast, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const toast15 = ref(false);
</script>

Container

You can display notification anywhere. Just put your toast in your target element and fill container property with id or class of parent. 

<template>
  <MDBContainer class="text-center" id="container-example">
    <MDBBtn
      color="primary"
      class="mb-5"
      id="container-trigger"
      @click="toast16 = true"
    >
      Show toast in this element
    </MDBBtn>
    <MDBToast
      v-model="toast16"
      id="container-toast"
      role="alert"
      :delay="2000"
      position="bottom-right"
      container="#container-example"
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      Toast inside another element!
    </MDBToast>
  </MDBContainer>
</template>
<script>
  import { MDBToast, MDBBtn, MDBContainer } from "mdb-vue-ui-kit";
  import { ref } from 'vue';
  export default {
    components: {
      MDBToast,
      MDBBtn,
      MDBContainer
    },
    setup() {
      const toast16 = ref(false);
      return {
        toast16
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBToast, MDBBtn, MDBContainer } from "mdb-vue-ui-kit";
  import { ref } from 'vue';

  const toast16 = ref(false);
</script>

Stacking

You can turn on/off stacking your notifications using stacking property. 

<template>
  <MDBBtn color="primary" class="me-3" @click="addStacking">
    Show toast notification
  </MDBBtn>
  <MDBToast
    v-model="stacking[1]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    1
  </MDBToast>
  <MDBToast
    v-model="stacking[2]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    2
  </MDBToast>
  <MDBToast
    v-model="stacking[3]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    3
  </MDBToast>
  <MDBToast
    v-model="stacking[4]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    4
  </MDBToast>
  <MDBToast
    v-model="stacking[5]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    5
  </MDBToast>
  <MDBToast
    v-model="stacking[6]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    6
  </MDBToast>
  <MDBToast
    v-model="stacking[7]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    7
  </MDBToast>
  <MDBToast
    v-model="stacking[8]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    8
  </MDBToast>
  <MDBToast
    v-model="stacking[9]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    9
  </MDBToast>
  <MDBToast
    v-model="stacking[10]"
    autohide
    :delay="2000"
    appendToBody
    stacking
    width="350px"
  >
    <template #title>
      MDBootstrap
    </template>
    <template #small>
      11 mins ago
    </template>
    10
  </MDBToast>
</template>
<script>
  import { MDBToast, MDBBtn } from "mdb-vue-ui-kit";
  import { ref, reactive } from 'vue';
  export default {
    components: {
      MDBToast,
      MDBBtn
    },
    setup() {
      const stacking = reactive({
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
        8: false,
        9: false,
        10: false
      });
      const currentStacking = ref(1);
      const addStacking = () => {
        stacking[currentStacking.value] = true;
        currentStacking.value++;
        if (currentStacking.value > 10) {
          currentStacking.value = 1;
        }
      };
      return {
        stacking,
        addStacking
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBToast, MDBBtn } from "mdb-vue-ui-kit";
  import { ref, reactive } from 'vue';

  interface Stacking {
    [props: number]: boolean;
  }

  const stacking = reactive<Stacking>({
    1: false,
    2: false,
    3: false,
    4: false,
    5: false,
    6: false,
    7: false,
    8: false,
    9: false,
    10: false
  });
  const currentStacking = ref(1);
  const addStacking = () => {
    stacking[currentStacking.value] = true;
    currentStacking.value++;
    if (currentStacking.value > 10) {
      currentStacking.value = 1;
    }
  };
</script>

Stacking (container)

You can also stack alerts inside the container

<template>
  <MDBContainer class="text-center" id="stacking-container">
    <MDBBtn color="primary" class="me-3" @click="addStackingContainer">
      Show toast notification
    </MDBBtn>
    <MDBToast
      v-model="stackingContainer[1]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      1
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[2]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      2
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[3]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      3
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[4]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      4
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[5]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      5
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[6]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      6
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[7]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      7
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[8]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      8
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[9]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      9
    </MDBToast>
    <MDBToast
      v-model="stackingContainer[10]"
      autohide
      :delay="5000"
      container="#stacking-container"
      stacking
      width="350px"
    >
      <template #title>
        MDBootstrap
      </template>
      <template #small>
        11 mins ago
      </template>
      10
    </MDBToast>
  </MDBContainer>
</template>
<script>
  import { MDBToast, MDBContainer, MDBBtn } from "mdb-vue-ui-kit";
  import { ref, reactive } from 'vue';
  export default {
    components: {
      MDBToast,
      MDBContainer,
      MDBBtn
    },
    setup() {
      const stackingContainer = reactive({
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
        8: false,
        9: false,
        10: false
      });
      const currentStackingContainer = ref(1);
      const addStackingContainer = () => {
        stackingContainer[currentStackingContainer.value] = true;
        currentStackingContainer.value++;
        if (currentStackingContainer.value > 10) {
          currentStackingContainer.value = 1;
        }
      };
      return {
        stackingContainer,
        addStackingContainer
      };
    }
  };
</script>
<script setup lang="ts">
  import { MDBToast, MDBContainer, MDBBtn } from "mdb-vue-ui-kit";
  import { ref, reactive } from 'vue';

  interface Stacking {
    [props: number]: boolean;
  }

  const stackingContainer = reactive<Stacking>({
    1: false,
    2: false,
    3: false,
    4: false,
    5: false,
    6: false,
    7: false,
    8: false,
    9: false,
    10: false
  });
  const currentStackingContainer = ref(1);
  const addStackingContainer = () => {
    stackingContainer[currentStackingContainer.value] = true;
    currentStackingContainer.value++;
    if (currentStackingContainer.value > 10) {
      currentStackingContainer.value = 1;
    }
   };
</script>

Toasts - API

Import

<script>
  import {
    MDBToast
  } from 'mdb-vue-ui-kit';
</script>

Properties

Name Type Default Description
tag String 'div' Defines tag of the MDBToast element
position String 'top-right' Sets a position for the toast. Any combination of 'vertical-horizontal' position: 'top|bottom-left|center|right'
delay Number 5000 Sets the length of animation delay
autohide Boolean true Alerts will hide automatically or not
width String 'unset' Sets width of toast
stacking Boolean true Enables stacking toasts
offset String '10 Changes toast offset
container String '' Defines container selector
appendToBody Boolean false Appends element to the end of the body
color String null Allows to set the color of an toast - primary | secondary | secondary | danger | warning | info | light | dark
text String '' Set to 'white' for better text contrast on dark toast background
icon String '' Adds icon with given class to a toast header
animation Boolean true Allows to turn on or off the showing and hiding toast animation
heightAnimation Boolean false Animates toast height change
static Boolean false Makes toast static (open by default)
id String 'MDBToast-generated id' Allows to add custom id to toast element
v-model String '' Returns current picked time
toast String null Allows to set new color palette of toasts - primary | secondary | secondary | danger | warning | info | light | dark

Methods

Name Description Example
show Manually shows an toast toastRef.show()
hide Manually hides an toast toastRef.hide() 
<template>
  <MDBToast v-model="toast1" ref="toastRef" />
  <MDBBtn @click.stop="$refs.toastRef.show()" color="primary">
    Show
  </MDBBtn>
</template>

Events

Name Description
show This event fires immediately when the show method is called or `v-model` is set to true
shown This event fires immediately when the Alert is shown
hide This event fires immediately when the hide method is called or `v-model` is set to false
hidden This event fires immediately when the Alert is hidden 
<template>
  <MDBToast v-model="picker1" @close="doSomething" />
</template>

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. 

// .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};

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

SCSS variables

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

$toast-header-color: $gray-600;
$toast-header-border-color: rgba($black, 0.05);

$toast-box-shadow: $box-shadow-4;
$toast-border-radius: $border-radius-lg;
$toast-border-bottom-width: $border-width-alternate;
$toast-background-color: $white;
$toast-padding-x: 1rem;
$toast-padding-y: 0.65rem;
$toast-header-background-color: $white;
$toast-btn-close-width: 1.3em;
$toast-btn-close-mr: -0.375rem;
$toast-btn-close-ml: 0.75rem;