Notification Card

One event in a feed: a toned icon tile, a title and a single line of detail in a soft raised card. The tone tints the tile only, so a mixed column still reads as one calm list.

tsx

1import { NotificationCard, NotificationList } from "@pestoui/core"

Tones

unread adds a leading dot. action is a right-aligned slot for a timestamp or a button.

New comment

A note was left on the weekly report.

Reminder

Team sync starts in 15 minutes.

Agent published

Now live in the directory.

Digest sent

12 runs summarised for the team.

Dismissible

Passing onDismiss adds a × that appears on hover or keyboard focus. The card does not remove itself — drop it from your list in the handler.

New comment

A note was left on the weekly report.

Reminder

Team sync starts in 15 minutes.

Run failed

The chat webhook could not be reached.

Props

Prop	Type	Default	Description
title	ReactNode	—	Required. One line; truncates.
description	ReactNode	—	A single muted line under the title; truncates.
icon	ReactNode	—	Shown in the round tile. Omit it and the tile is not drawn.
tone	"default" \| "brand" \| "info" \| "success" \| "warning" \| "critical"	"default"	Tints the icon tile. The copy stays neutral.
action	ReactNode	—	Right-aligned slot — a timestamp, a button, a menu trigger.
onDismiss	() => void	—	Renders the × button and fires on click.
unread	boolean	false	Shows a leading dot before the title.
className	string	—	On NotificationCard, or on NotificationList to cap the column's width.

PreviousNavigation Menu Next Number Animation

Pesto UI · 117 documented components