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.

Two layout variants are available via the variant prop:

• notification (default) — a taller banner with an icon frame on the left and a stacked title/description.
• announcement — a slim, single-line bar with an inline icon and the title/description on one row. Best for lightweight, page-level notices.

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 | | --- | --- | --- | --- | | variant | "notification" \| "announcement" | "notification" | Layout. notification is the taller banner with an icon frame; announcement is the slim, single-line bar. | | 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 (the icon frame for notification, the inline icon for announcement). | | icon | ReactNode | — | Custom icon to replace the default type icon. | | actionButton | ActionButtonElement | — | A Button, IconButton, or FlexButton element. The panel injects styling via cloneElement (see below). | | 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. Applies to the notification variant only (announcement is always centered). | | testID | string | — | Test ID for testing frameworks. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

ActionButtonElement

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

The element passed to actionButton. The panel overrides a small set of props via cloneElement so the button matches the design; everything else (onPress, icon, children, etc.) is forwarded as authored. The injected props depend on variant:

• notification — size="xs", variant="tertiary", tone="mono". Pass a Button.
• announcement — size="xs", variant="primary", background={false}. Pass a FlexButton so it renders text-only with the designed subtle hover. (FlexButton has no tone; the Primary palette gives content.primary text.)

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

The panel styles the button to match the design (size, variant, and tone/background — see ActionButtonElement), so pass a plain 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 onPress={() => extendSession()}>Extend session</Button>}
  onClose={() => dismiss()}
/>;

Announcement variant

A slim, single-line bar. Pass a FlexButton as the action so it renders text-only.

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

<NotificationPanel
  variant="announcement"
  type="alert"
  title="Alert notification"
  description="Remove all product restrictions"
  actionButton={<FlexButton onPress={() => openSettings()}>Button</FlexButton>}
  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> <variant>" (e.g. "warning notification", "alert announcement").
• 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.