NotificationPanel

A full-width horizontal notification bar for persistent inline notifications within page layouts. Cross-platform (web and React Native) via @xsolla/xui-primitives.

Installation

npm install @xsolla/xui-notification-panel

Imports

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

Quick start

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

export default function Example() {
  return (
    <NotificationPanel
      type="success"
      title="Success"
      description="Your changes have been saved."
      onClose={() => console.log('dismissed')}
    />
  );
}

API Reference

<NotificationPanel>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | type | "alert" \| "warning" \| "success" \| "neutral" \| "brand" | "neutral" | Visual variant. Drives panel background and default icon. | | title | string | — | Title text. | | description | string | — | Description text. | | showIcon | boolean | true | Show or hide the icon frame. | | icon | ReactNode | — | Custom icon override. Replaces the default type icon. | | actionButton | ReactElement | — | A Button or IconButton element. size: "xs" and variant: "secondary" are auto-applied via cloneElement; all other props are preserved as written. | | showCloseButton | boolean | true | Show or hide the close button. | | onClose | () => void | — | Close button click handler. | | closeButtonAlign | "top" \| "center" | "top" | Vertical alignment of the trailing button column. | | testID | string | — | Test identifier. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Type values

| Type | Use case | | --- | --- | | neutral | General information, default state. | | success | Positive outcomes, confirmations. | | warning | Caution, requires attention. | | alert | Errors, critical issues. | | brand | Branded messages, promotions. |

Examples

All types

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

export default function Types() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <NotificationPanel type="neutral" title="Info" description="Informational message." />
      <NotificationPanel type="success" title="Success" description="Operation completed." />
      <NotificationPanel type="warning" title="Warning" description="Review before proceeding." />
      <NotificationPanel type="alert" title="Error" description="Something went wrong." />
      <NotificationPanel type="brand" title="Brand" description="A branded notification." />
    </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 WithAction() {
  return (
    <NotificationPanel
      type="warning"
      title="Session expiring"
      description="Your session will expire in 5 minutes."
      actionButton={
        <Button onPress={() => console.log('extended')}>Extend session</Button>
      }
      onClose={() => console.log('dismissed')}
    />
  );
}

With IconButton action

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

export default function WithIconAction() {
  return (
    <NotificationPanel
      type="neutral"
      title="Quick action available"
      description="Click the arrow to view more details."
      actionButton={<IconButton icon={<ArrowRight />} aria-label="Open" onPress={() => {}} />}
      showCloseButton={false}
    />
  );
}

Title only / description only / no icon

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

export default function Variants() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <NotificationPanel type="success" title="Your payment was successful." />
      <NotificationPanel type="warning" description="Verify your email to continue." />
      <NotificationPanel type="neutral" title="Notice" description="No icon." showIcon={false} />
      <NotificationPanel type="alert" title="Critical" description="Cannot be dismissed." showCloseButton={false} />
    </div>
  );
}

Accessibility

• Renders with role="status" and an aria-label derived from type.
• The close button uses aria-label="Close notification".
• Action buttons remain keyboard-focusable; the default icon is decorative.

Related

• Notification — toast/inline message component.
• Toast — programmatic toast notifications via provider.