Skip to main content

​
Overview

NotificationsButton includes everything you need for user notifications:
  • Notification bell icon with unread count badge
  • Responsive modal that opens when clicked
  • User settings panel for channel and topic management
  • Notification history with read/unread states
  • Built-in authentication and wallet integration
Choose this component if you want:
  • ✅ Quick setup with minimal configuration
  • ✅ Professional notification UI out of the box
  • ✅ Built-in responsive design (mobile + desktop)
  • ✅ Light/dark theme options
  • ❌ Limited visual customization (theme prop only)

​
Prerequisites

Before implementing the NotificationsButton component, ensure you have completed:

​
Basic Usage

It is important that the NotificationsButton is always wrapped around the client SDK. We recommend writing a small component to ensure it is always the case.

​
Simple Integration

"use client";

import "@dialectlabs/react-ui/index.css";
import { DialectSolanaSdk } from "@dialectlabs/react-sdk-blockchain-solana";
import { NotificationsButton } from "@dialectlabs/react-ui";

const DAPP_ADDRESS = process.env.NEXT_PUBLIC_DIALECT_DAPP_ADDRESS!;

export function MyNotificationButton() {
  return (
    <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
      <NotificationsButton />
    </DialectSolanaSdk>
  );
}

​
Theme Options

Control the visual theme of the notification button and modal:
  • Light Theme
  • Dark Theme
<DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
  <NotificationsButton theme="light" />
</DialectSolanaSdk>

​
Channel Configuration

Control which additional notification channels users can configure. In-app notifications are always enabled by default. 
// Show all channels (default - includes email and telegram options)
<NotificationsButton />

// Limit to specific channels
<NotificationsButton channels={["email"]} />
Available channels:
  • "email" - Email notifications
  • "telegram" - Telegram bot notifications
  • In-app - Always enabled (not configurable)

​
Custom Button

Replace the default notification bell with your own button component: 
import { NotificationsButton } from "@dialectlabs/react-ui";

export function CustomButtonNotifications() {
  return (
    <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
      <NotificationsButton>
        {({ open, setOpen, unreadCount, ref }) => (
          <button 
            ref={ref} 
            onClick={() => setOpen(!open)}
            className="custom-notification-button"
          >
            <span>Notifications</span>
            {unreadCount > 0 && (
              <span className="badge">{unreadCount}</span>
            )}
          </button>
        )}
      </NotificationsButton>
    </DialectSolanaSdk>
  );
}
Render prop parameters:
  • open - Boolean indicating if modal is open
  • setOpen - Function to control modal state
  • unreadCount - Number of unread notifications
  • ref - Required ref for the button element

​
Custom Modal

Replace the default modal container with your own: 
export function CustomModalNotifications() {
  return (
    <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
      <NotificationsButton
        renderModalComponent={({ open, setOpen, ref, children }) => {
          if (!open) return null;
          
          return (
            <div 
              ref={ref} 
              className="fixed inset-0 z-50 bg-black bg-opacity-50"
            >
              <div className="flex items-center justify-center min-h-screen p-4">
                <div className="bg-white rounded-lg max-w-md w-full">
                  {children}
                </div>
              </div>
            </div>
          );
        }}
      />
    </DialectSolanaSdk>
  );
}
Modal render prop parameters:
  • open - Boolean indicating if modal should be shown
  • setOpen - Function to control modal state
  • ref - Required ref for the modal container
  • children - The notification content (must be rendered)

​
Advanced Configuration

​
Styling (Limited)

​
Available Styling Options

The NotificationsButton component has limited styling capabilities: 
// ✅ Theme options
<NotificationsButton theme="light" />
<NotificationsButton theme="dark" />

// ✅ CSS class for wrapper
<NotificationsButton className="my-wrapper-class" />

// ❌ CSS variables don't affect internal styling
// ❌ Individual component styling not available

​
Wrapper Styling

You can style the button wrapper, but internal components use fixed styling: 
.my-wrapper-class {
  /* This affects the button wrapper */
  position: relative;
  z-index: 10;
}

/* These CSS variables WON'T affect NotificationsButton */
.dialect {
  --dt-accent-brand: #custom-color; /* No effect */
  --dt-bg-primary: #custom-bg;      /* No effect */
}

​
For Full Styling Control

If you need complete visual customization, use the standalone Notifications component instead: 
// Full styling control with CSS variables
import { Notifications } from "@dialectlabs/react-ui";

<div className="my-custom-modal">
  <Notifications />
</div>

​
Component Behavior

​
Responsive Design

The component automatically adapts to different screen sizes:
  • Mobile: Full-screen modal overlay
  • Tablet/Desktop: Positioned modal (420px × 600px)
  • Button: Scales appropriately for touch interfaces

​
User Workflow

  1. Button Click: User clicks notification bell
  2. Authentication: User connects wallet (if not connected)
  3. Subscription: User signs a message, thereby subscribes to your app
  4. Settings: User can configure channels and topics
  5. Notifications: User views notification history

​
Troubleshooting

​
Common Issues

Button not appearing:
  • Verify dappAddress is correct and app is registered
  • Check that styles are imported before the component
  • Ensure wallet adapter is properly configured
Modal not opening:
  • Check browser console for JavaScript errors
  • Verify wallet connection is working
  • Ensure dappAddress matches your registered app
Styling not working:
  • CSS variables don’t affect NotificationsButton styling
  • Use the theme prop for basic theming
  • Consider the standalone Notifications component for full control
Wallet connection issues:
  • Verify wallet adapter compatibility
  • Check wallet permissions and connection state
  • Test with different wallet providers

​
Development Tips

  • Use environment="development" during development
  • Test with different wallet providers
  • Verify notification flow end-to-end
  • Check network requests in browser dev tools

​
Next Steps

The NotificationsButton provides everything most applications need for user notifications with minimal setup. For advanced customization needs, consider the standalone Notifications component.
⌘I