diff --git a/docs/.vuepress/components/app-imports/BVToastMixin.js b/docs/.vuepress/components/app-imports/BVToastMixin.js
new file mode 100644
index 0000000..1007565
--- /dev/null
+++ b/docs/.vuepress/components/app-imports/BVToastMixin.js
@@ -0,0 +1,58 @@
+import StatusIcon from './StatusIcon';
+const BVToastMixin = {
+  components: {
+    StatusIcon
+  },
+  methods: {
+    toastTitle(title, status) {
+      // Create title with icon
+      const titleWithIcon = this.$createElement(
+        'strong',
+        { class: 'toast-icon' },
+        [
+          this.$createElement('StatusIcon', { props: { status: status } }),
+          title
+        ]
+      );
+      return titleWithIcon;
+    },
+    successToast(message, title = 'Success') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'success'),
+        variant: 'success',
+        autoHideDelay: 10000, //auto hide in milliseconds
+        isStatus: true,
+        solid: true
+      });
+    },
+    errorToast(message, title = 'Error') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'danger'),
+        variant: 'danger',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    },
+    warningToast(message, title = 'Warning') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'warning'),
+        variant: 'warning',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    },
+    infoToast(message, title = 'Informational') {
+      this.$root.$bvToast.toast(message, {
+        title: this.toastTitle(title, 'info'),
+        variant: 'info',
+        noAutoHide: true,
+        isStatus: true,
+        solid: true
+      });
+    }
+  }
+};
+
+export default BVToastMixin;
diff --git a/docs/.vuepress/components/app-imports/StatusIcon.vue b/docs/.vuepress/components/app-imports/StatusIcon.vue
new file mode 100644
index 0000000..954e477
--- /dev/null
+++ b/docs/.vuepress/components/app-imports/StatusIcon.vue
@@ -0,0 +1,61 @@
+<template>
+  <span :class="['status-icon', status]">
+    <icon-info v-if="status === 'info'" />
+    <icon-success v-else-if="status === 'success'" />
+    <icon-warning v-else-if="status === 'warning'" />
+    <icon-danger v-else-if="status === 'danger'" />
+    <icon-secondary v-else />
+  </span>
+</template>
+
+<script>
+import IconInfo from '@carbon/icons-vue/es/information--filled/20';
+import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
+import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
+import IconError from '@carbon/icons-vue/es/error--filled/20';
+import IconMisuse from '@carbon/icons-vue/es/misuse/20';
+
+export default {
+  name: 'StatusIcon',
+  components: {
+    IconInfo: IconInfo,
+    iconSuccess: IconCheckmark,
+    iconDanger: IconMisuse,
+    iconSecondary: IconError,
+    iconWarning: IconWarning
+  },
+  props: {
+    status: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "src/assets/styles/bmc/helpers";
+@import "src/assets/styles/bootstrap/helpers";
+.status-icon {
+  vertical-align: text-bottom;
+  &.info {
+    fill: theme-color('info');
+  }
+  &.success {
+    fill: theme-color('success');
+  }
+  &.danger {
+    fill: theme-color('danger');
+  }
+  &.secondary {
+    fill: gray('600');
+
+    svg {
+      transform: rotate(-45deg);
+    }
+  }
+  &.warning {
+    fill: theme-color('warning');
+  }
+}
+</style>