NotificationCenter

TYPESCRIPT / BROWSER

Live TypeScript example

Try the component here, then use the source below in your application.

Component sizev0.6.2 · minified + gzip

JavaScript: 5.0 KiB
Component CSS: 1.4 KiB
Shared theme CSS: 3.8 KiBonce per application

How sizes are measured

The JavaScript figure includes this component’s required helpers. CSS includes its styling dependencies. Each entry is bundled separately for ES2022, minified, then compressed with gzip level 9. Your bundler may share helpers across components. Images, fonts, examples and application code are excluded.

Before compression: JavaScript 12.9 KiB; component CSS 6.9 KiB. These figures describe browser assets, not the complete package download.

View all component measurements →

Preview

Use the bell to open the inbox. Escape closes the popover and returns focus. Search, filters, read, archive and item actions are keyboard accessible.

import '@blukavantui/web/theme.css'

import {createNotificationCenter} from '@blukavantui/web/notification-center';
import '@blukavantui/web/notification-center.css';
export function mount(host:HTMLElement) {
  const status=document.createElement("p");status.setAttribute("role","status");
  const component=createNotificationCenter(host, {
  "Items": [
    {
      "Key": "approval",
      "Title": "Purchase order needs approval",
      "Description": "Jordan submitted PO-1042 for your review.",
      "Category": "Approvals",
      "Timestamp": "2026-10-12T14:20:00Z",
      "Color": "Warning",
      "IsRead": false,
      "IsArchived": false,
      "ActionLabel": "Review request"
    },
    {
      "Key": "import",
      "Title": "Customer import completed",
      "Description": "248 customer records are ready to use.",
      "Category": "Data",
      "Timestamp": "2026-10-12T13:40:00Z",
      "Color": "Success",
      "IsRead": false,
      "IsArchived": false,
      "ActionLabel": "View records"
    },
    {
      "Key": "mention",
      "Title": "You were mentioned in a comment",
      "Description": "Alex: Can you check the updated inspection plan?",
      "Category": "Team",
      "Timestamp": "2026-10-12T12:10:00Z",
      "Color": "Primary",
      "IsRead": true,
      "IsArchived": false,
      "ActionLabel": "Open comment"
    },
    {
      "Key": "export",
      "Title": "Your export is ready",
      "Description": "The weekly report has been generated.",
      "Category": "Data",
      "Timestamp": "2026-10-11T19:30:00Z",
      "Color": "Cyan",
      "IsRead": true,
      "IsArchived": true,
      "ActionLabel": "View export"
    }
  ],
  "DisplayMode": "Inline",
  "IsOpen": false,
  "IsLoading": false,
  "IsDisabled": false,
  "Title": "Your inbox"
}, { ItemsChanged: (items, key, reason) => {
      // Persist per-user inbox state through your application's API.
      status.textContent = `${reason}: ${key || 'all notifications'}`;
    }, Action: key => { status.textContent = `Application action requested: ${key}`; } });
  host.append(status);
  return {destroy(){component.destroy();status.remove();}};
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()

Install the library and add the host element

npm install https://blukavantui.blutekmedia.com/downloads/blukavantui-web-0.6.2.tgz

<div id="example"></div>

Download .ts source ↓TypeScript interfaces →Web API reference →Installation guide →

Download TypeScript library · 825.6 KiB ↓Download starter project · 907.6 KiB ↓

Connect your application data

This example uses the downloadable @blukavantui/web package. Your application handles persistence and authentication through its typed callbacks. The starter ZIP includes this same example.

Build on your platform

Choose the reference that matches your application.

WEB · TYPESCRIPT

createNotificationCenter

Pass options as the second argument and callbacks in the third argument. Keep the returned instance to update options or dispose it when its view is removed.

v0.6.2

import { createNotificationCenter } from '@blukavantui/web/notification-center';
import '@blukavantui/web/notification-center.css';

Load @blukavantui/web/theme.css once in your app shell.

createNotificationCenter(host: HTMLElement, options: T.NotificationCenterOptions, events?: T.NotificationCenterEvents)

Reference for @blukavantui/web 0.6.2. Required and optional follow the shipped TypeScript declarations; optional does not imply a particular default. Pass typed arrays and objects directly where shown.

Options

Name	Type / requirement	Usage
`Items`	`BluInboxItem[]`Required	Application-owned notifications; echo OnItemsChanged.ItemsJson back after local changes.
`DisplayMode`	`string`Optional	Popover renders a bell and anchored inbox; Inline renders the full inbox. Default: "Popover".
`IsOpen`	`boolean`Optional	Requested popover visibility; echo OnOpenChanged.IsOpen back. Default: False.
`IsLoading`	`boolean`Optional	Shows loading feedback and prevents repeated load requests. Default: False.
`HasMore`	`boolean`Optional	Displays Load more; the application supplies additional records. Default: False.
`IsDisabled`	`boolean`Optional	Disables inbox mutation and action controls. Default: False.
`Title`	`string`Optional	Inbox heading. Default: "Notifications".
`AccessibleLabel`	`string`Optional	Accessible component name; empty uses the component default. Default: "".
`ExtendedClass`	`string`Optional	Additional CSS classes on the Block root. Default: "".

Callbacks

Name	Type / requirement	Usage
`ItemsChanged`	`(items: T.BluInboxItem[], key: string, reason: string) => void \| Promise<void>`Optional
`OpenChanged`	`(isOpen: boolean) => void \| Promise<void>`Optional
`Action`	`(key: string) => void \| Promise<void>`Optional
`LoadMore`	`(loadedCount: number) => void \| Promise<void>`Optional
`Error`	`(message: string) => void \| Promise<void>`Optional

Instance methods & properties

Name	Signature / type	Usage
`element`	`HTMLElement`	Root owned by this instance. Dispose before removing its host.
`update`	`(patch: Partial<T.NotificationCenterOptions>) => void`	Apply a partial options update to this instance.
`destroy`	`() => void`	Dispose the instance and its listeners when the view is removed.

Related data types

Expand a type for its fields and allowed values.

BluInboxItem

interface BluInboxItem {
    /** Unique notification key. */
    Key: string;
    /** Notification heading. */
    Title: string;
    /** Plain-text message body. */
    Description?: string;
    /** Optional category used by the filter. */
    Category?: string;
    /** ISO 8601 date/time including timezone; empty hides the timestamp. */
    Timestamp?: string;
    /** Shared ComponentColor code, such as Primary, Success or Warning. */
    Color?: ComponentColor;
    /** Whether this notification has been read. */
    IsRead?: boolean;
    /** Whether this notification is archived. */
    IsArchived?: boolean;
    /** Optional action button caption; OnAction returns this item key. */
    ActionLabel?: string;
}

ComponentColor

type ComponentColor = typeof componentColors[number];

Events0No events yet.View events

Interact with an example to see its events.

Live TypeScript example

createNotificationCenter

Options

Callbacks

Instance methods & properties

Related data types

Purpose and use

Keyboard design guidance

In your application

Search BluKavantUI