NotificationPanel

A full-width horizontal notification bar designed for persistent inline notifications within page layouts. Unlike the Notification component (designed for toast popups), NotificationPanel is intended for contextual feedback messages that should remain visible until dismissed.

Installation

npm install @xsolla/xui-notification-panel
# or
yarn add @xsolla/xui-notification-panel

Demo

Basic NotificationPanel

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';

export default function BasicNotificationPanel() {
  return (
    <NotificationPanel
      type="success"
      title="Success!"
      description="Your changes have been saved."
    />
  );
}

NotificationPanel Types

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';

export default function NotificationPanelTypes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <NotificationPanel type="neutral" title="Info" description="This is an informational message." />
      <NotificationPanel type="success" title="Success" description="Operation completed successfully." />
      <NotificationPanel type="warning" title="Warning" description="Please review before proceeding." />
      <NotificationPanel type="alert" title="Error" description="Something went wrong." />
      <NotificationPanel type="brand" title="Brand" description="A branded notification message." />
    </div>
  );
}

With Action Button

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';
import { Button } from '@xsolla/xui-button';

export default function ActionNotificationPanel() {
  return (
    <NotificationPanel
      type="warning"
      title="Session Expiring"
      description="Your session will expire in 5 minutes."
      actionButton={
        <Button onPress={() => console.log('Session extended')}>
          Extend Session
        </Button>
      }
      onClose={() => console.log('Dismissed')}
    />
  );
}

With Button Icon Right

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';
import { Button } from '@xsolla/xui-button';
import { ArrowRight } from '@xsolla/xui-icons';

export default function IconButtonNotificationPanel() {
  return (
    <NotificationPanel
      type="neutral"
      description="Check our guide to view all webhooks"
      actionButton={
        <Button
          iconRight={<ArrowRight />}
          onPress={() => console.log('Open docs')}
        >
          Open documentation
        </Button>
      }
    />
  );
}

With IconButton

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';
import { IconButton } from '@xsolla/xui-button';
import { ArrowRight } from '@xsolla/xui-icons';

export default function IconButtonNotificationPanel() {
  return (
    <NotificationPanel
      type="neutral"
      title="Quick action available"
      description="Click the arrow to view more details"
      actionButton={
        <IconButton
          icon={<ArrowRight />}
          onPress={() => console.log('Navigate')}
        />
      }
      showCloseButton={false}
    />
  );
}

Title Only

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';

export default function TitleOnlyNotificationPanel() {
  return (
    <NotificationPanel
      type="success"
      title="Your payment was successful!"
    />
  );
}

Description Only

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';

export default function DescriptionOnlyNotificationPanel() {
  return (
    <NotificationPanel
      type="warning"
      description="Please verify your email address to continue using all features."
    />
  );
}

Without Icon

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';

export default function NoIconNotificationPanel() {
  return (
    <NotificationPanel
      type="neutral"
      title="Notice"
      description="This notification has no icon."
      showIcon={false}
    />
  );
}

Without Close Button

import * as React from 'react';
import { NotificationPanel } from '@xsolla/xui-notification-panel';

export default function PersistentNotificationPanel() {
  return (
    <NotificationPanel
      type="alert"
      title="Critical"
      description="This notification cannot be dismissed."
      showCloseButton={false}
    />
  );
}

API Reference

NotificationPanel

NotificationPanel Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | type | "alert" \| "warning" \| "success" \| "neutral" \| "brand" | "neutral" | Visual variant/tone of the notification. | | title | string | - | Title text (optional). | | description | string | - | Description text (optional). | | showIcon | boolean | true | Show/hide the icon frame. | | icon | React.ReactNode | - | Custom icon override (optional). | | actionButton | React.ReactElement | - | Action button (Button or IconButton). tone, size, and variant are auto-applied. | | showCloseButton | boolean | true | Show/hide close button. | | onClose | () => void | - | Close button click handler. | | testID | string | - | Test ID for testing frameworks. |

Auto-Applied Button Props

When passing a Button or IconButton to actionButton, the following props are automatically injected:

| Prop | Value | Description | | :--- | :---- | :---------- | | tone | Based on type | Matches notification type (see table below). | | size | "xs" | Extra small size for compact appearance. | | variant | "secondary" | Secondary button variant. |

Type Values

| Type | Use Case | Button Tone | | :--- | :------- | :---------- | | neutral | General information, default state | mono | | success | Positive outcomes, confirmations | brandExtra | | warning | Caution, requires attention | mono | | alert | Errors, critical issues | alert | | brand | Branded messages, promotions | brand |

Theming

// Type-specific colors accessed via theme
theme.colors.overlay.alert     // Alert background
theme.colors.overlay.warning   // Warning background
theme.colors.overlay.success   // Success background
theme.colors.overlay.mono      // Neutral background
theme.colors.overlay.brand     // Brand background

// Icon frame backgrounds
theme.colors.background.warning.primary  // Warning icon frame
theme.colors.background.success.primary  // Success icon frame

Accessibility

• Uses role="status" for screen reader announcements
• Includes aria-label with notification type
• Close button has aria-label="Close notification"
• Action buttons are keyboard accessible and focusable
• Icons are decorative and hidden from screen readers

Comparison with Notification

| Feature | Notification | NotificationPanel | | :------ | :----------- | :---------------- | | Use case | Toast popups, temporary messages | Inline banners, persistent messages | | Display | Floating overlay | Full-width inline | | Layout | Compact, stacked | Horizontal bar | | Icon | Inline with text | Separate colored frame | | Types | 4 tones (neutral, success, warning, alert) | 5 types (+ brand) |