diff --git a/components/doc/badge/theming/tailwinddoc.js b/components/doc/badge/theming/tailwinddoc.js
index bf70ebdb77..6e6e3e57cb 100644
--- a/components/doc/badge/theming/tailwinddoc.js
+++ b/components/doc/badge/theming/tailwinddoc.js
@@ -15,9 +15,10 @@ const Tailwind = {
                     'bg-gray-500 ': props.severity == 'secondary',
                     'bg-green-500 ': props.severity == 'success',
                     'bg-blue-500 ': props.severity == 'info',
-                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-orange-500 ': props.severity == 'warn',
                     'bg-purple-500 ': props.severity == 'help',
-                    'bg-red-500 ': props.severity == 'danger'
+                    'bg-red-500 ': props.severity == 'danger',
+                    'bg-red-500 ': props.severity == 'error'
                 },
                 {
                     'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null,
diff --git a/components/doc/button/theming/tailwinddoc.js b/components/doc/button/theming/tailwinddoc.js
index 380a729139..ef46e1783b 100644
--- a/components/doc/button/theming/tailwinddoc.js
+++ b/components/doc/button/theming/tailwinddoc.js
@@ -26,11 +26,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':
@@ -40,11 +42,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 },
@@ -53,28 +57,30 @@ 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
+                    'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain,
+                    'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'error' && !props.plain
                 },
                 { 'shadow-lg': props.raised && props.text },
                 {
-                    'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
-                    'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
-                    'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
+                    'text-gray-500 hover:bg-gray-300/20': props.plain & props.text,
+                    'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain & props.outlined,
+                    'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain & !props.outlined & !props.text
                 },
                 {
                     'bg-transparent border': props.outlined && !props.plain,
                     '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' },
-                { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+                { 'opacity-60 pointer-events-none cursor-default': context?.disabled }
             )
         }),
         label: ({ props }) => ({
diff --git a/components/doc/splitbutton/theming/tailwinddoc.js b/components/doc/splitbutton/theming/tailwinddoc.js
index 925a5e0799..1fe2a078a3 100644
--- a/components/doc/splitbutton/theming/tailwinddoc.js
+++ b/components/doc/splitbutton/theming/tailwinddoc.js
@@ -26,15 +26,17 @@ const Tailwind = {
             icon: 'mr-2'
         },
         menu: {
-            className: classNames('outline-none', 'm-0 p-0 list-none')
+            className: classNames('outline-none', 'py-1	px-0 rounded-md	 list-none bg-white	border-none shadow-lg')
         },
-        menulist: 'relative',
-        menubutton: {
+        menuList: 'm-0 p-0 border-none outline-none no-underline list-none',
+        menuButton: {
             root: ({ parent }) => ({
                 className: classNames('rounded-l-none', { 'rounded-r-full': parent.props.rounded })
             }),
             label: 'hidden'
-        }
+        },
+        anchor: 'cursor-pointer flex items-center relative overflow-hidden py-3 px-5 rounded-none transition select-none hover:text-gray-700 hover:bg-gray-200',
+        menuIcon: 'mr-2'
     }
 }
         `
diff --git a/components/doc/tag/theming/tailwinddoc.js b/components/doc/tag/theming/tailwinddoc.js
index eb73dfa06e..f193fdf30a 100644
--- a/components/doc/tag/theming/tailwinddoc.js
+++ b/components/doc/tag/theming/tailwinddoc.js
@@ -15,9 +15,10 @@ const Tailwind = {
                     'bg-gray-500 ': props.severity == 'secondary',
                     'bg-green-500 ': props.severity == 'success',
                     'bg-blue-500 ': props.severity == 'info',
-                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-orange-500 ': props.severity == 'warn',
                     'bg-purple-500 ': props.severity == 'help',
-                    'bg-red-500 ': props.severity == 'danger'
+                    'bg-red-500 ': props.severity == 'danger',
+                    'bg-red-500 ': props.severity == 'error'
                 },
                 {
                     'rounded-md': !props.rounded,
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/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index b4cbcccd32..97c13feb9e 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -420,7 +420,7 @@ export const FileUpload = React.memo(
         };
 
         const onRemoveClick = (e, badgeOptions, index) => {
-            if (badgeOptions.severity === 'warning') remove(e, index);
+            if (badgeOptions.severity === 'warn') remove(e, index);
             else removeUploadedFiles(e, index);
         };
 
@@ -507,7 +507,7 @@ export const FileUpload = React.memo(
 
         const createFiles = () => {
             const badgeOptions = {
-                severity: 'warning',
+                severity: 'warn',
                 value: localeOption('pending') || 'Pending'
             };
             const content = filesState.map((file, index) => createFile(file, index, badgeOptions));
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..cab024a6b4 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,9 +659,10 @@ 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
+                    'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain,
+                    'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'error' && !props.plain
                 },
                 { 'shadow-lg': props.raised && props.text },
                 {
@@ -670,9 +675,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' },
@@ -1589,9 +1595,10 @@ const Tailwind = {
                     'bg-gray-500 ': props.severity == 'secondary',
                     'bg-green-500 ': props.severity == 'success',
                     'bg-blue-500 ': props.severity == 'info',
-                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-orange-500 ': props.severity == 'warn',
                     'bg-purple-500 ': props.severity == 'help',
-                    'bg-red-500 ': props.severity == 'danger'
+                    'bg-red-500 ': props.severity == 'danger',
+                    'bg-red-500 ': props.severity == 'error'
                 },
                 {
                     'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null,
@@ -1682,9 +1689,10 @@ const Tailwind = {
                     'bg-gray-500 ': props.severity == 'secondary',
                     'bg-green-500 ': props.severity == 'success',
                     'bg-blue-500 ': props.severity == 'info',
-                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-orange-500 ': props.severity == 'warn',
                     'bg-purple-500 ': props.severity == 'help',
-                    'bg-red-500 ': props.severity == 'danger'
+                    'bg-red-500 ': props.severity == 'danger',
+                    'bg-red-500 ': props.severity == 'error'
                 },
                 {
                     'rounded-md': !props.rounded,
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