Notification

A flexible floating message for product feedback and activity - six viewport positions plus information, success, error, custom-icon, avatar, action-button, and timed auto-dismiss variants in one component.

Installation

You can add the notification component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add notification

States

Set status to information, success, or error. Each state supplies the semantic live-region role, default icon, and accent colors.

<Notification  status="information"  title="New version available"  description="Refresh to start using the latest dashboard updates."/>
<Notification  status="success"  title="Changes saved"  description="Your workspace settings have been updated."/>
<Notification  status="error"  title="Upload failed"  description="Check the file size and try again."/>

Icons and avatars

Pass any Remix icon through icon, or replace the icon with an avatar. Avatar notifications can show online, busy, or offline presence.

import { RiSparklingFill } from "@remixicon/react";
{/* Custom icon */}<Notification  icon={RiSparklingFill}  title="Custom icon"  description="Use any Remix icon."/>
{/* Avatar with presence */}<Notification  avatar={{    src: "/avatars/livia-saris.webp",    alt: "Livia Saris",    presence: "busy",  }}  title="Livia Saris"  timestamp="just now"  description="Mentioned you in the launch checklist."/>

Action buttons

The actions array renders small BoardUI buttons and supports primary, secondary, and danger variants.

<Notification  status="information"  title="Backup ready"  description="Your latest workspace backup is ready to download."  actions={[    { label: "Not now", variant: "secondary", onClick: dismiss },    { label: "Download", variant: "primary", onClick: download },  ]}/>

Position

Use the position prop on NotificationViewport to anchor the stack to any corner or horizontal center of the browser viewport.

import {  Notification,  NotificationViewport,} from "@/components/base/notification/notification";
<NotificationViewport position="top-center">  <Notification    status="information"    title="New version available"    description="Refresh to start using the latest dashboard updates."  /></NotificationViewport>
{/* Available positions:    top-left, top-center, top-right,    bottom-left, bottom-center, bottom-right */}

Timed dismissal

Set autoDismissDuration in milliseconds to show a synchronized 3px countdown bar and dismiss the notification when it reaches zero. Use NotificationViewport to portal repeated notifications to a smoothly animated stack at the edge of the browser viewport.

const [notifications, setNotifications] = useState([]);
function showNotification(variant) {  setNotifications((current) => [    ...current,    { id: crypto.randomUUID(), variant },  ]);}
<Button onClick={() => showNotification("success")}>Replay notification</Button><Button onClick={() => showNotification("information")}>Information</Button><Button onClick={() => showNotification("error")}>Error</Button><Button onClick={() => showNotification("avatar")}>With avatar</Button><Button onClick={() => showNotification("actions")}>With buttons</Button>
<NotificationViewport>  {notifications.map((notification) => (    <Notification      {...variants[notification.variant]}      key={notification.id}      autoDismissDuration={2500}      introDelay={0}      onDismiss={() =>        setNotifications((current) =>          current.filter((item) => item.id !== notification.id)        )      }    />  ))}</NotificationViewport>