diff --git a/src/components/Toast/Toast.module.scss b/src/components/Toast/Toast.module.scss
index 0bee3d6de9..5052c95ec0 100644
--- a/src/components/Toast/Toast.module.scss
+++ b/src/components/Toast/Toast.module.scss
@@ -59,6 +59,21 @@
background-color: var(--negative-color);
}
+.typeWarning {
+ background-color: var(--warning-color);
+ color: var(--text-color-fixed-dark);
+
+ .closeButton {
+ color: var(--text-color-fixed-dark);
+ }
+
+ .actionButton,
+ .actionLink {
+ color: var(--text-color-fixed-dark);
+ border-color: var(--text-color-fixed-dark);
+ }
+}
+
// Animation
.enterActive {
animation-iteration-count: 1;
diff --git a/src/components/Toast/ToastConstants.ts b/src/components/Toast/ToastConstants.ts
index 177c3a853e..c3caa130cf 100644
--- a/src/components/Toast/ToastConstants.ts
+++ b/src/components/Toast/ToastConstants.ts
@@ -1,11 +1,13 @@
import Info from "../Icon/Icons/components/Info";
import Check from "../Icon/Icons/components/Check";
import Alert from "../Icon/Icons/components/Alert";
+import Warning from "../Icon/Icons/components/Warning";
export enum ToastType {
NORMAL = "normal",
POSITIVE = "positive",
- NEGATIVE = "negative"
+ NEGATIVE = "negative",
+ WARNING = "warning"
}
export enum ToastActionType {
@@ -16,7 +18,8 @@ export enum ToastActionType {
export const defaultIconMap = {
[ToastType.NORMAL]: Info,
[ToastType.POSITIVE]: Check,
- [ToastType.NEGATIVE]: Alert
+ [ToastType.NEGATIVE]: Alert,
+ [ToastType.WARNING]: Warning
};
export type ToastAction = {
diff --git a/src/components/Toast/__stories__/toast.stories.mdx b/src/components/Toast/__stories__/toast.stories.mdx
index 4ab33dfef0..bdedc2efcb 100644
--- a/src/components/Toast/__stories__/toast.stories.mdx
+++ b/src/components/Toast/__stories__/toast.stories.mdx
@@ -162,6 +162,27 @@ Use when something was deleted, a problem has occured, etc.
+### Warning message
+
+
+
## Do’s and Don’ts