Notification

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeNotificationExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeNotificationExample/></NativeScope>}

States

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

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="notification" id="states"/>}

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.

Custom icon

Use any Remix icon while keeping the selected status colors.

Livia Saris

just now

Mentioned you in the launch checklist.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="notification" id="visuals"/>}

Action buttons

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

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="notification" id="actions"/>}

Position

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

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="notification" id="position"/>}

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.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="notification" id="countdown"/>}