Notification Preferences

Notification preferences panel with channel toggles

SaaSNotifications

Overview

PreferencesPanel provides a settings interface for notification preferences. Users can toggle global notification channels (email, push, in-app, chat) and configure per-notification-type preferences within each category. Supports loading, saving, and error states.

Usage

import { PreferencesPanel } from '@leanicon/web-builder-library/saas'

;<PreferencesPanel
  preferences={{
    channelSettings: { email: true, push: true, 'in-app': true, chat: false },
    categoryPreferences: [
      { typeId: 'login', channel: 'email', enabled: true },
      { typeId: 'login', channel: 'push', enabled: true },
    ],
  }}
  categories={[
    {
      id: 'account',
      name: 'Account',
      description: 'Security and login activity.',
      types: [
        {
          id: 'login',
          name: 'New sign-in',
          description: 'Notify on new device sign-in.',
          defaultEnabled: true,
        },
      ],
    },
  ]}
  channels={['email', 'push', 'in-app', 'chat']}
  onChange={(prefs) => setPreferences(prefs)}
  onSave={async (prefs) => await savePreferences(prefs)}
/>

Variants

Default

Notification Channels

Choose how you want to receive notifications.

Receive notifications via email

Browser and mobile push notifications

Notifications within the application

Receive notifications in chat

Notification Preferences

Customize which notifications you receive for each channel.

Notification Type

New sign-in

Notify when a new device signs in.

Password changed

Notify when your password is updated.

Notification Type

Mentions

Someone mentioned you in a comment.

Loading

Saving

Notification Channels

Choose how you want to receive notifications.

Receive notifications via email

Browser and mobile push notifications

Notifications within the application

Notification Preferences

Customize which notifications you receive for each channel.

Notification Type

New sign-in

With Error

Failed to save preferences. Please check your connection and try again.

Notification Channels

Choose how you want to receive notifications.

Receive notifications via email

Browser and mobile push notifications

Notifications within the application

Notification Preferences

Customize which notifications you receive for each channel.

Notification Type

New sign-in