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:

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.jpg",    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>