Update stying page with notification severity docs

content/docs/platform/inbox/advanced-customization/customize-bell.mdx

@@ -21,7 +21,7 @@
         applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
         subscriber="YOUR_SUBSCRIBER_ID"
       >
         <Bell/>
       </Inbox>
   );
 }
@@ -36,7 +36,7 @@
 
 ![Custom bell](/images/inbox/custom-bell.gif)
 
-<Tabs items={['Custom bell', 'Custom bell with showing unread count']}>
+<Tabs items={['Custom bell', 'Custom bell showing unread count', 'Custom bell showing number of notifications with high severity']}>
   <Tab>
 
 ```tsx
@@ -73,14 +73,40 @@
       subscriber="YOUR_SUBSCRIBER_ID"
       renderBell={(unreadCount) => {
           return (
-            <div className="bg-blue-300 p-4 inline-flex">New {unreadCount.total} notifications</div>
+            <div className="bg-blue-300 p-4 inline-flex">
+            New {unreadCount.total} notifications
+            </div>
           );
         }}
     />
   );
 }
 export default CustomBell;
 ```
+  </Tab>
+  <Tab>
 
+  ```tsx
+  import { Inbox, SeverityLevelEnum } from '@novu/react';
+
+  function CustomBell() {
+    return (
+      <Inbox 
+        applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+        subscriber="YOUR_SUBSCRIBER_ID"
+        renderBell={(unreadCount) => {
+            return (
+              <div className="bg-blue-300 p-4 inline-flex">
+                High severity $
+                {unreadCount.severity[SeverityLevelEnum.HIGH]}{' '}
+                notifications
+              </div>
+            );
+          }}
+      />
+    );
+  }
+  export default CustomBell;
+  ```
   </Tab>
 </Tabs>

content/docs/platform/inbox/configuration/icons.mdx

@@ -5,7 +5,7 @@ description: 'Learn how to override the default icons in the Inbox UI using the
 icon: 'Sparkle'
 ---
 
-You can customize or replace all the default icons in the Inbox UI with custom icons from your preferred library, such as [react-icons](https://react-icons.github.io/react-icons/) or [Material Icons](https://mui.com/material-ui/material-icons/), to match your visual style using the' icons' key in the `appearance` prop.
+You can customize or replace all the default icons in the Inbox UI with custom icons from your preferred library, such as [react-icons](https://react-icons.github.io/react-icons/) or [Material Icons](https://mui.com/material-ui/material-icons/), to match your visual style using the icons' key in the `appearance` prop.
 
 For each icon that you want to customize, provide a function that returns your custom icon as a React component.
 

content/docs/platform/inbox/configuration/styling.mdx

@@ -269,3 +269,64 @@ function Novu() {
 
 export default Novu;
 ```
+## Styling notifications by severity
+
+Notification severity comes with default visual styles, but you can fully customize how notifications look for each severity level using the `appearance` prop.
+
+![Notification severity in the inbox](/images/inbox/inbox-notification-severity.png)
+
+<Callout>By default, the bell icon takes the color of the highest severity unread notification.</Callout>
+Each severity level exposes selectors you can target through the `variables` and `elements` objects to apply custom styling.
+
+### Customizing severity colors
+
+You can override the default severity colors by setting new CSS custom properties in the `appearance.variables` object. Updating these variables automatically changes both the notification color and the bell icon color.
+
+| Prop                 | Description                     |
+|----------------------|---------------------------------|
+| `colorSeverityHigh`  | Color for high severity         |
+| `colorSeverityMedium`| Color for medium severity       |
+| `colorSeverityLow`   | Color for low severity          |
+
+```tsx
+const appearance = {
+  variables: {
+    colorSeverityHigh: 'green',
+    colorSeverityMedium: 'blue',
+    colorSeverityLow: 'yellow',
+  }
+};
+```
+
+### Customizing severity elements
+
+You can apply specific styles to individual components using keys in the `appearance.elements` object. This lets you target components conditionally based on their severity state.
+
+```tsx
+const appearance = {
+  elements: {
+    severityHigh__notificationBar: {
+      backgroundColor: 'red',
+    },
+  },
+};
+```
+
+This table lists severity element keys:
+
+| Elements key                           | Description                                      |
+| -------------------------------------- | ------------------------------------------------ |
+| `severityHigh__bellContainer`          | Styles the bell container for high severity      |
+| `severityMedium__bellContainer`        | Styles the bell container for medium severity    |
+| `severityLow__bellContainer`           | Styles the bell container for low severity       |
+| `bellSeverityGlow`                     | Base style for the severity glow around the bell |
+| `severityGlowHigh__bellSeverityGlow`   | Glow style for high severity                     |
+| `severityGlowMedium__bellSeverityGlow` | Glow style for medium severity                   |
+| `severityGlowLow__bellSeverityGlow`    | Glow style for low severity                      |
+| `severityHigh__notification`           | Styles individual high severity notifications    |
+| `severityMedium__notification`         | Styles individual medium severity notifications  |
+| `severityLow__notification`            | Styles individual low severity notifications     |
+| `notificationBar`                      | Base style for the vertical notification bar on the left of a notification|
+| `severityHigh__notificationBar`        | Styles the notification bar for high severity    |
+| `severityMedium__notificationBar`      | Styles the notification bar for medium severity  |
+| `severityLow__notificationBar`         | Styles the notification bar for low severity     |

content/docs/platform/inbox/configuration/tabs.mdx

@@ -116,6 +116,40 @@ function InboxTabs() {
 export default InboxTabs;
 ```
 
+### Using notification severity
+
+After setting [workflow notification severity in the dashboard](/platform/workflow/build-a-workflow#notification-severity), you can use that severity level to create dedicated tabs in your notification inbox. This lets you filter notifications based on their importance.
+
+To achieve this, add the severity key to the filter object for any tab in your Inbox component. The severity property can accept a single severity level or an array of levels.
+
+```tsx
+import { Inbox, SeverityLevelEnum } from '@novu/react';
+
+export default function InboxWithFilters() {
+
+  const tabs = [
+    {
+      label: 'All Notifications',
+      filter: { tags: [] },
+    },
+    {
+      label: 'Security',
+      filter: {
+        severity: SeverityLevelEnum.HIGH,
+      },
+    },
+  ];
+
+  return (
+    <Inbox
+      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
+      subscriber="YOUR_SUBSCRIBER_ID"
+      tabs={tabs}
+    />
+  );
+}
+```
+
 ## Show notification count for each tab
 
 The `useCounts` hook provides a way to fetch notification counts for each tab, this include the unread, unseen, and total counts. You can use these to display notification count for each tab in the Inbox component.