Notification

A cross-platform React notification component for displaying alerts, success messages, warnings, and errors. Supports both toast and inline display modes.

Installation

npm install @xsolla/xui-notification

Imports

import { Notification, type NotificationProps } from "@xsolla/xui-notification";

Quick start

import * as React from "react";
import { Notification } from "@xsolla/xui-notification";

export default function Example() {
  return (
    <Notification
      tone="success"
      title="Success"
      message="Your changes have been saved."
    />
  );
}

API Reference

<Notification>

| Prop | Type | Default | Description | | ------------- | ------------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------- | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | tone | "neutral" \| "success" \| "warning" \| "alert" | "neutral" | Semantic colour tone. | | type | "toast" \| "inline" | "toast" | Display mode. toast for floating, inline for embedded. | | title | string | — | Title text. | | message | string | — | Message body. | | actionLabel | string | — | Optional action label. When set, renders the inline action. | | onAction | () => void | — | Action click handler. | | onClose | () => void | — | Close click handler. | | showClose | boolean | true | Show or hide the close button. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Tone values

| Tone | Use case | | --------- | ----------------------------------- | | neutral | General information, default state. | | success | Positive outcomes, confirmations. | | warning | Caution, requires attention. | | alert | Errors, critical issues. |

Examples

Tones

import * as React from "react";
import { Notification } from "@xsolla/xui-notification";

export default function Tones() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <Notification
        tone="neutral"
        title="Info"
        message="Informational message."
      />
      <Notification
        tone="success"
        title="Success"
        message="Operation completed."
      />
      <Notification
        tone="warning"
        title="Warning"
        message="Review before proceeding."
      />
      <Notification
        tone="alert"
        title="Error"
        message="Something went wrong."
      />
    </div>
  );
}

Toast vs inline

import * as React from "react";
import { Notification } from "@xsolla/xui-notification";

export default function Types() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <Notification
        type="toast"
        tone="success"
        title="Toast"
        message="Floating-style notification."
      />
      <Notification
        type="inline"
        tone="warning"
        title="Inline"
        message="Embedded-style notification."
      />
    </div>
  );
}

Dismissible

import * as React from "react";
import { Notification } from "@xsolla/xui-notification";

export default function Dismissible() {
  const [visible, setVisible] = React.useState(true);
  if (!visible) return null;
  return (
    <Notification
      title="Notification"
      message="Click the X to dismiss."
      onClose={() => setVisible(false)}
    />
  );
}

With action

import * as React from "react";
import { Notification } from "@xsolla/xui-notification";

export default function Action() {
  return (
    <Notification
      tone="alert"
      title="Session expiring"
      message="Your session will expire in 5 minutes."
      actionLabel="Extend session"
      onAction={() => console.log("extended")}
      onClose={() => console.log("dismissed")}
    />
  );
}

Persistent (no close button)

import * as React from "react";
import { Notification } from "@xsolla/xui-notification";

export default function Persistent() {
  return (
    <Notification
      tone="warning"
      title="Important"
      message="This notification cannot be dismissed."
      showClose={false}
    />
  );
}

Accessibility

• Tone provides visual distinction; pair title with message for context.
• Close and action are keyboard-focusable.
• Icons are decorative.
• The action element rendered by actionLabel/onAction is a pressable container, not a <button>. If you need full button semantics, render the action through your own focusable component instead.

Related

• NotificationPanel — full-width inline banner variant.
• Toast — programmatic auto-dismissing notifications.