Notification Center

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="notification-center"/>;}

Filtering

The component manages its filter locally unless you provide controlled state. Choose the initial view with defaultTab, or pair tab with onTabChange to coordinate filtering with the rest of your application.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="notification-center" example="filtering"/>;}

Notification data and actions

Each notification specifies a category and timeline group. Add an avatar or meaningful status icon, mark unread items, and provide compact actions. Pressing an action marks that notification read and passes the item and action identifiers to onAction.

'use client';
import {useState} from 'react';
import {NativeScope,NativeNotificationCenter} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){const[status,setStatus]=useState('');return <NativeScope><NativeNotificationCenter notifications={[{id:'review',category:'mentions',group:'Today',title:'Review requested',description:'Review this local example.',timestamp:'Now',unread:true,actions:[{id:'review',label:'Review changes'}]}]} onAction={(id,action)=>setStatus(action+' selected for '+id)}/><p role="status">{status}</p></NativeScope>;}