diff --git a/components/lib/badge/badge.d.ts b/components/lib/badge/badge.d.ts
index 3d1b7a41c2..e700219c67 100644
--- a/components/lib/badge/badge.d.ts
+++ b/components/lib/badge/badge.d.ts
@@ -48,10 +48,10 @@ export interface BadgeProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      */
     value?: any | null | undefined;
     /**
-     * Severity type of the badge.
+     * Defines the severity styling, valid values are "secondary", "success", "info", "warn", "error", "danger", "help".
      * @defaultValue null
      */
-    severity?: 'success' | 'info' | 'warning' | 'danger' | null | undefined;
+    severity?: 'secondary' | 'success' | 'info' | 'warn' | 'error' | 'danger' | 'help' | undefined;
     /**
      * Size of the badge, valid options are "large" and "xlarge".
      * @defaultValue null
diff --git a/components/lib/button/button.d.ts b/components/lib/button/button.d.ts
index 944e231b84..dbe6eba528 100644
--- a/components/lib/button/button.d.ts
+++ b/components/lib/button/button.d.ts
@@ -125,9 +125,10 @@ export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHT
      */
     link?: boolean | undefined;
     /**
-     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger", "help".
+     * Defines the severity styling, valid values are "secondary", "success", "info", "warn", "error", "danger", "help".
+     * @defaultValue null
      */
-    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | undefined;
+    severity?: 'secondary' | 'success' | 'info' | 'warn' | 'error' | 'danger' | 'help' | undefined;
     /**
      * Defines the size of the button, valid values are "small" and "large".
      */
diff --git a/components/lib/message/message.d.ts b/components/lib/message/message.d.ts
index a8379a4674..958cd8c5cc 100644
--- a/components/lib/message/message.d.ts
+++ b/components/lib/message/message.d.ts
@@ -56,6 +56,7 @@ export interface MessageProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
     text?: React.ReactNode | ((props: MessageProps) => React.ReactNode);
     /**
      * Severity level of the message.
+     * @defaultValue info
      */
     severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
     /**
diff --git a/components/lib/messages/messages.d.ts b/components/lib/messages/messages.d.ts
index 681d1e5316..027d258ca0 100644
--- a/components/lib/messages/messages.d.ts
+++ b/components/lib/messages/messages.d.ts
@@ -74,7 +74,8 @@ export interface MessagesMessage {
      */
     id?: string | undefined;
     /**
-     * Severity of the message.
+     * Severity level of the message.
+     * @defaultValue info
      */
     severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
     /**
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 2673181640..a649ee2a57 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -628,11 +628,13 @@ const Tailwind = {
                     'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
                         props.severity === 'info',
                     'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
-                        props.severity === 'warning',
+                        props.severity === 'warn',
                     'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
                         props.severity === 'help',
                     'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
-                        props.severity === 'danger'
+                        props.severity === 'danger',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'error'
                 },
                 {
                     'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
@@ -642,11 +644,13 @@ const Tailwind = {
                     'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
                         props.severity === 'info' && !props.text && !props.outlined && !props.plain,
                     'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
-                        props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                        props.severity === 'warn' && !props.text && !props.outlined && !props.plain,
                     'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
                         props.severity === 'help' && !props.text && !props.outlined && !props.plain,
                     'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
-                        props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+                        props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
+                        props.severity === 'error' && !props.text && !props.outlined && !props.plain
                 },
                 { 'shadow-lg': props.raised },
                 { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
@@ -655,7 +659,7 @@ const Tailwind = {
                     'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
                     'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
                     'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
-                    'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
+                    'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warn' && !props.plain,
                     'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
                     'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
                 },
@@ -670,9 +674,10 @@ const Tailwind = {
                     'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
                     'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
                     'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
-                    'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
+                    'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warn' && !props.plain,
                     'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
-                    'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
+                    'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain,
+                    'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'error' && !props.plain
                 },
                 { 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
                 { 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' },
diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts
index de1f048fe7..63eae61932 100644
--- a/components/lib/splitbutton/splitbutton.d.ts
+++ b/components/lib/splitbutton/splitbutton.d.ts
@@ -127,9 +127,10 @@ export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTM
      */
     outlined?: boolean | undefined;
     /**
-     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger".
+     * Defines the severity styling, valid values are "secondary", "success", "info", "warn", "error", "danger", "help".
+     * @defaultValue null
      */
-    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | undefined;
+    severity?: 'secondary' | 'success' | 'info' | 'warn' | 'error' | 'danger' | 'help' | undefined;
     /**
      * Defines the size of the button, valid values are "small" and "large".
      */
diff --git a/components/lib/tag/tag.d.ts b/components/lib/tag/tag.d.ts
index 0a256b3713..998bb1fa33 100644
--- a/components/lib/tag/tag.d.ts
+++ b/components/lib/tag/tag.d.ts
@@ -55,10 +55,10 @@ export interface TagProps extends Omit<React.DetailedHTMLProps<React.HTMLAttribu
      */
     value?: React.ReactNode;
     /**
-     * Severity type of the tag.
+     * Defines the severity styling, valid values are "secondary", "success", "info", "warn", "error", "danger", "help".
      * @defaultValue null
      */
-    severity?: 'success' | 'info' | 'warning' | 'danger' | null | undefined;
+    severity?: 'secondary' | 'success' | 'info' | 'warn' | 'error' | 'danger' | 'help' | undefined;
     /**
      * Whether the corners of the tag are rounded.
      * @defaultValue false