NotificationPanel

A full-width horizontal notification bar for persistent inline feedback within B2B page layouts. Stays in place until dismissed and is designed to sit inline within a page or panel rather than as a floating overlay.

For the base (non-B2B) variant, see @xsolla/xui-notification-panel.

Installation

npm install @xsolla/xui-b2b-notification-panel

Imports

import {
  NotificationPanel,
  type NotificationPanelProps,
  type ActionButtonElement,
} from '@xsolla/xui-b2b-notification-panel';

Quick start

import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';

<NotificationPanel
  type="success"
  title="Changes saved"
  description="Your settings have been updated successfully."
/>;

API Reference

<NotificationPanel>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | type | "alert" \| "warning" \| "success" \| "neutral" \| "brand" | "neutral" | Visual tone of the panel. Controls background, default icon, and role. | | title | string | — | Bold title text. | | description | string | — | Secondary description text. | | showIcon | boolean | true | Show or hide the icon frame on the left. | | icon | ReactNode | — | Custom icon to replace the default type icon. | | actionButton | ActionButtonElement | — | A Button or IconButton element. size="xs" and variant="secondary" are injected via cloneElement; tone is not — set it yourself if needed. | | showCloseButton | boolean | true | Show or hide the dismiss (×) button. | | onClose | () => void | — | Called when the close button is pressed. | | closeButtonAlign | "top" \| "center" | "top" | Vertical alignment of the close button. Use "center" for single-line panels. | | testID | string | — | Test ID for testing frameworks. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

ActionButtonElement

type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;

The element passed to actionButton. Only size and variant are overridden when the panel renders it; everything else (including tone, onPress, icon, etc.) is forwarded as authored.

Examples

All types

import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';

<>
  <NotificationPanel type="neutral" title="Info"    description="Informational message." />
  <NotificationPanel type="success" title="Success" description="Operation completed." />
  <NotificationPanel type="warning" title="Warning" description="Please review before proceeding." />
  <NotificationPanel type="alert"   title="Error"   description="Something went wrong." />
  <NotificationPanel type="brand"   title="New"     description="A branded announcement." />
</>;

With action button

Pick a tone that complements the panel's type — the panel does not auto-tone the button.

import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
import { Button } from '@xsolla/xui-button';

<NotificationPanel
  type="warning"
  title="Session expiring"
  description="Your session will expire in 5 minutes."
  actionButton={
    <Button tone="mono" onPress={() => extendSession()}>
      Extend session
    </Button>
  }
  onClose={() => dismiss()}
/>;

With IconButton action

import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
import { IconButton } from '@xsolla/xui-button';
import { ArrowRight } from '@xsolla/xui-icons-base';

<NotificationPanel
  type="neutral"
  description="View all available webhooks in the documentation."
  actionButton={
    <IconButton tone="mono" icon={<ArrowRight aria-hidden />} onPress={() => openDocs()} />
  }
  showCloseButton={false}
/>;

Persistent (no close button)

import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';

<NotificationPanel
  type="alert"
  title="Payment failed"
  description="Please update your billing information to continue."
  showCloseButton={false}
/>;

Without icon frame

import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';

<NotificationPanel
  type="neutral"
  title="Notice"
  description="This notification has no icon."
  showIcon={false}
/>;

Center-aligned close button

import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';

<NotificationPanel
  type="success"
  title="Saved"
  closeButtonAlign="center"
  onClose={() => dismiss()}
/>;

Accessibility

• role="alert" for type="alert"; role="status" for all other types.
• aria-label on the root is "<type> notification" (e.g. "warning notification").
• The close button is an IconButton with aria-label="Close notification".
• The default type icons are decorative — pass aria-hidden on any custom icon you supply.