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.
MDBootstrap
11 mins ago
Primary Basic Example
MDBootstrap
11 mins ago
Secondary Basic Example
MDBootstrap
11 mins ago
Success Basic Example
MDBootstrap
11 mins ago
Danger Basic Example
MDBootstrap
11 mins ago
Warning Basic Example
MDBootstrap
11 mins ago
Info Basic Example
MDBootstrap
11 mins ago
Light Basic Example
MDBootstrap
11 mins ago
Dark Basic Example
<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
MDBootstrap
11 mins ago
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
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
MDBootstrap
11 mins ago
Hello, world! This is a toast message.
<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
MDBootstrap
11 mins ago
Toast placement
<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.
MDBootstrap
11 mins ago
Offset: 50
<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.
MDBootstrap
11 mins ago
Toast inside another element!
<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;