Notification

Displays a short, important message in a way that attracts the user's attention without interrupting what they are doing.

Notification offers three usage modes:

• type="block" (default): renders inline in the React tree. Useful for alerts inside sections, forms and cards.
• type="page": renders in a portal pinned to the top or bottom of the page (controlled by pagePosition). Slides from its own edge via the sheet/sheet-top motion presets (pure CSS, ADR-027).
• Stacked toasts: the useNotification() hook exposed by the NotificationsProvider fires floating notifications in the bottom-right corner.

When to use

Basic example

<Notification
  closable
  type="block"
  variant="primary"
  icon={<Icon icon={cog} />}
  title="Notification title"
  message="Complementary message"
/>

Actions

action accepts a ReactNode or a function ({ close }) => ReactNode. The action color is forced to the notification's variant.

<Notification
  closable
  type="block"
  variant="primary"
  icon={<Icon icon={cog} />}
  title="Title"
  message="Message"
  action={({ close }) => (
    <Button
      onClick={() => {
        confirm();
        close();
      }}
      size="small"
      text="Confirm"
    />
  )}
/>

Variants

Notification offers four color variants: primary (default), success, warning, danger.

<Notification variant="primary" title="Primary" message="Default message" />
<Notification variant="success" title="Success" message="Operation completed" />
<Notification variant="warning" title="Warning" message="Attention required" />
<Notification variant="danger"  title="Danger"  message="Something went wrong" />

Types

<Notification type="block" /* renders inline */ />
<Notification type="page" pagePosition="top" pageOffset={56} /* full-bleed banner under a 56px app bar */ />
<Notification type="page" pagePosition="bottom" /* strip at the page foot */ />

type="page" is a full-bleed banner: 100% wide, square, one border on the inner edge only (bottom when on top, top when at the bottom), fixed to the viewport edge. Pass pageOffset (the app-bar height) so a top banner sits under the chrome instead of covering it. type="block" stays the rounded, four-side-bordered card.

loading

Toasts

Use the useNotification() hook to display floating toasts. The NotificationsProvider is already mounted by the ThemeProvider, so any component below it can fire toasts:

import { useNotification } from '@apollion-dsi/core/containers/notification';
import { cog } from '@apollion-dsi/core/icons';
 
function ToastDemo() {
  const { showNotification } = useNotification();
 
  return (
    <Button
      text="Notify"
      onClick={() =>
        showNotification({
          title: 'Done!',
          message: 'Operation completed',
          variant: 'success',
          autoClose: 5,
        })
      }
    />
  );
}

The active queue is limited to 3 toasts — the fourth automatically removes the oldest one. autoClose in seconds displays a progress bar that pauses on hover.

When action should dismiss the notification, call the close argument yourself — the notification does not close automatically after the action fires.

Accessibility

The notification is a live region: it appears outside the focus flow and, without this, it would not exist for screen reader users.

aria-atomic="true" makes the title and message be read as a single unit. The close button gets its name via closeLabel; with multiple notifications on screen, differentiate them (closeLabel="Close payment notice").

autoClose disappears on its own. Do not make it the only route to critical information or to an action — screen reader users or slow navigators may miss it.

Properties

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, size, border) — not repeated here.

See also

• Storybook story: Components / Notification
• Provider and hook: Notification.context.