Component

Notification

Rich notification system with actions and persistence.

tsx

import { NotificationProvider, useNotification } from 'wss3-forge'
 
// Wrap app
<NotificationProvider>
  <App />
</NotificationProvider>

Usage

•

Richer than Toast for complex notifications

•

Supports actions and custom content

•

Can persist until dismissed

•

Use Toast for simple feedback

Examples

Notification Types

New Update

A new version is available

Payment Received

Your payment has been processed

Low Storage

Your storage is almost full

Connection Lost

Please check your internet connection

tsx

1<VStack gap="md">
2  <Notification type="info" title="New Update" message="A new version is available" />
3  <Notification type="success" title="Payment Received" message="Your payment has been processed" />
4  <Notification type="warning" title="Low Storage" message="Your storage is almost full" />
5  <Notification type="error" title="Connection Lost" message="Please check your internet connection" />
6</VStack>

With Actions

New message from John

Hey, are you available for a quick call?

tsx

1<Notification
2  type="info"
3  title="New message from John"
4  message="Hey, are you available for a quick call?"
5  actions={[
6    { label: 'Reply', onClick: () => {} },
7    { label: 'Dismiss', onClick: () => {}, variant: 'ghost' }
8  ]}
9/>

Dismissible

File uploaded

document.pdf has been uploaded successfully

tsx

1<Notification
2  type="success"
3  title="File uploaded"
4  message="document.pdf has been uploaded successfully"
5  onClose={() => {}}
6/>

Banner

Skeleton

Last updated: December 2025