Notifications
Notification centers, inbox views, activity timelines, and notification preferences.
Notification Center
Dropdown notification center with unread count and mark-all-read action.
Preview
Notification Center.tsx
import { NotificationCenter } from "@launchapp/design-system/blocks/notifications";const notifications = [ { id: "1", title: "New comment", description: "Alice commented on your post.", timestamp: "5m ago", read: false }, { id: "2", title: "Payment received", description: "$49 payment processed.", timestamp: "1h ago", read: true },];export default function Page() { return ( <NotificationCenter notifications={notifications} onRead={(id) => console.log("read", id)} onReadAll={() => console.log("read all")} /> );}Inbox View
Full inbox layout with notification list, filters, and bulk actions.
Preview
No preview available
See the code snippet below for usage.
Inbox View.tsx
import { InboxView } from "@launchapp/design-system/blocks/notifications";const notifications = [ { id: "1", title: "New comment", description: "Alice replied to your thread.", timestamp: "5m ago", read: false, type: "comment" }, { id: "2", title: "Mention", description: "Bob mentioned you in a post.", timestamp: "1h ago", read: false, type: "mention" },];export default function Page() { return ( <InboxView notifications={notifications} onRead={(id) => console.log("read", id)} onDelete={(id) => console.log("delete", id)} /> );}Activity Timeline
Vertical timeline of recent activity events with icons and timestamps.
Preview
Recent Activity
Project created
You created 'LaunchApp v2'
Member added
Alice joined the team
PR merged
feat(docs): update component library
Activity Timeline.tsx
import { ActivityTimeline } from "@launchapp/design-system/blocks/notifications";const events = [ { id: "1", title: "Project created", description: "You created 'LaunchApp v2'", timestamp: "2024-01-01T10:00:00Z", type: "create" }, { id: "2", title: "Member added", description: "Alice joined the team", timestamp: "2024-01-02T09:00:00Z", type: "user" },];export default function Page() { return <ActivityTimeline events={events} />;}Notification Bell
Bell icon button with unread badge that opens a notification popover.
Preview
No preview available
See the code snippet below for usage.
Notification Bell.tsx
import { NotificationBell } from "@launchapp/design-system/blocks/notifications";export default function Page() { return ( <NotificationBell count={3} notifications={[ { id: "1", title: "New message", read: false, timestamp: "now" }, ]} onRead={(id) => console.log("read", id)} /> );}Notification Preferences
Settings panel for toggling email, push, and in-app notification preferences.
Preview
No preview available
See the code snippet below for usage.
Notification Preferences.tsx
import { NotificationPreferences } from "@launchapp/design-system/blocks/notifications";const preferences = [ { id: "email_comments", label: "Comments", description: "Email when someone comments", channel: "email", enabled: true }, { id: "push_mentions", label: "Mentions", description: "Push when mentioned", channel: "push", enabled: false },];export default function Page() { return ( <NotificationPreferences preferences={preferences} onToggle={(id, enabled) => console.log(id, enabled)} /> );}