Notification

Inline message card for system events, with optional icon, timestamp, actions, and dismiss control.

stable
since v0.1.0
3.8 kB
feedback
notification
status

Preview

tsx

import { Notification } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <Notification title="Saved" description="Your changes have been saved." />;
}

With icon and timestamp

Pass any node to icon for a leading glyph and a string or node to timestamp for an aligned trailing time.

Preview

Open

tsx

import { Notification } from '@arshad-shah/cynosure-react';

const BellIcon = () => (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.75"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M18 16v-5a6 6 0 1 0-12 0v5l-2 3h16l-2-3Z" />
    <path d="M10 20a2 2 0 0 0 4 0" />
  </svg>
);

export default function Example() {
  return (
    <Notification
      icon={<BellIcon />}
      title="New comment"
      description="Grace Hopper left a comment on your pull request."
      timestamp="2m ago"
    />
  );
}

Unread state

Pass unread to render the unread indicator dot. The optional onRead callback fires when the card is clicked so consumers can mark the notification as read.

Preview

Open

tsx

import { Notification } from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [unread, setUnread] = useState(true);

  return (
    <Notification
      unread={unread}
      onRead={() => setUnread(false)}
      title="Build finished"
      description="Your deployment to staging is ready to review."
      timestamp="just now"
    />
  );
}

With actions

The actions slot accepts any node — typically a row of Buttons for inline responses.

Preview

Open

tsx

import { Button, Notification } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Notification
      title="Invitation pending"
      description="Ada Lovelace invited you to the Cynosure workspace."
      timestamp="5m ago"
      actions={
        <>
          <Button size="sm">Accept</Button>
          <Button size="sm" variant="ghost">
            Decline
          </Button>
        </>
      }
    />
  );
}

Dismissable

Set onDismiss to render the close IconButton. Use dismissLabel to override the default "Dismiss notification" label.

Preview

Open

tsx

import { Notification } from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [open, setOpen] = useState(true);
  if (!open) return null;
  return (
    <Notification
      title="Heads up"
      description="You can dismiss this notification once you've read it."
      onDismiss={() => setOpen(false)}
    />
  );
}

API

PropTypeDefaultDescription

icon

ReactNode

—

Leading icon node.

title

ReactNode

—

Headline content. Mutually composes with `description` and `timestamp`.

description

ReactNode

—

Supporting body content rendered below the title.

timestamp

ReactNode

—

Right-aligned timestamp shown next to the title.

actions

ReactNode

—

Inline action row rendered beneath the description.

unread

boolean

false

Marks the notification as unread; renders an accent dot and triggers `onRead` on the next click.

onRead

(() => void)

—

Invoked when an unread notification is clicked.

onDismiss

(() => void)

—

Invoked when the user activates the dismiss control. When omitted, no dismiss button is rendered.

dismissLabel

string

Dismiss notification

Accessible label for the dismiss button.

Accessibility

The card itself is not a live region — wrap a stack of notifications in role="status" or role="log" when announcements are needed.
The dismiss control is an IconButton whose label is dismissLabel — defaults to "Dismiss notification".
The unread dot is decorative (aria-hidden="true"); pair it with a visible label such as “Unread” when state matters.
Clicking the card triggers onRead when unread is set, so non-pointer users should also be able to mark items read via an explicit control.
Use a heading element inside title (or nest your own heading) when the notification sits at the top of a region.

Recipes

Stack notifications inside a fixed-position container to build a notification centre.
Auto-dismiss informational notifications after a few seconds; keep dangerous ones manual.
Pair a primary action with a “Mark as read” secondary button inside actions.
Use a leading Avatar as the icon for activity feeds.