Inbox
The notifications flyout from Attio.
Attio's notification panel: a ~380px rounded panel with a title, Notifications / Requests tabs (with counts), then notification rows (avatar + message + time + unread dot), or a centred empty state. Drop it inside a Popover for the tray flyout, or use it standalone. Switch to the Requests tab in the preview to see the empty state.
Preview
Notifications
Usage
import { Inbox } from "crisp";
<Inbox
tabs={[
{ id: "n", label: "Notifications", count: 3 },
{ id: "r", label: "Requests", count: 0 },
]}
activeTab={tab}
onTabChange={setTab}
notifications={[
{
id: "1",
avatar: <Avatar name="Ada" />,
message: <><b>Ada</b> mentioned you in <b>Kickoff notes</b></>,
time: "2h",
unread: true,
},
]}
/>;API
| Prop | Type | Description |
|---|---|---|
notifications | InboxNotification[] | { id, avatar?, message, time?, unread?, onClick? } rows. |
title | ReactNode | Panel title (default "Notifications"). |
tabs | { id, label, count? }[] | Tab bar with counts. |
activeTab | string | Selected tab id. |
onTabChange | (id: string) => void | Fired when a tab is chosen. |
emptyTitle | ReactNode | Empty-state heading. |
emptySubtitle | ReactNode | Empty-state subtitle. |
emptyAction | ReactNode | Action under the empty state (e.g. Settings). |