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
# or
yarn add @xsolla/xui-notification

Demo

Basic Notification

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

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

Notification Tones

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

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

Notification Types (Toast vs Inline)

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

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

Dismissible Notification

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

export default function DismissibleNotification() {
  const [visible, setVisible] = React.useState(true);

  if (!visible) return null;

  return (
    <Notification
      title="Notification"
      message="Click the X to dismiss this notification."
      onClose={() => setVisible(false)}
    />
  );
}

Notification with Action

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

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

Hide Close Button

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

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

API Reference

Notification

Notification Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | tone | "neutral" \| "success" \| "warning" \| "alert" | "neutral" | Semantic color tone of the notification. | | type | "toast" \| "inline" | "toast" | Display mode - toast for floating notifications, inline for embedded. | | title | string | - | Notification title text. | | message | string | - | Notification message/description text. | | actionLabel | string | - | Text for the action button (optional). | | onAction | () => void | - | Callback when action button is clicked. | | onClose | () => void | - | Callback when close button is clicked. | | showClose | boolean | true | Whether to show the close button. |

Tone Values

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

Type Values

| Type | Description | | :--- | :---------- | | toast | Floating notification style, typically used for temporary messages | | inline | Embedded notification style, integrated into the page layout |

Theming

// Tone-specific colors accessed via theme
theme.colors.background.neutral.secondary  // Neutral background
theme.colors.background.success.secondary  // Success background
theme.colors.background.warning.secondary  // Warning background
theme.colors.background.alert.secondary    // Alert/error background

theme.colors.content.neutral.primary       // Neutral icon color
theme.colors.content.success.primary       // Success icon color
theme.colors.content.warning.primary       // Warning icon color
theme.colors.content.alert.primary         // Alert icon color

Accessibility

• Uses semantic color tones for visual distinction
• Close button is keyboard accessible
• Icons are decorative and hidden from screen readers
• Action buttons are focusable and clickable