- Implementation
- NotificationCard API
Common Examples
Basic Usage
Display a notification:Copy
Ask AI
import { NotificationCard } from "@servicetitan/ext-atlas";
function Notification() {
return (
<NotificationCard
title="New message from Atlas"
message="Your appointment has been confirmed for tomorrow."
timestamp="2 min ago"
unread
onClick={() => openConversation()}
/>
);
}
Read Notification
Display a read notification:Copy
Ask AI
import { NotificationCard } from "@servicetitan/ext-atlas";
function ReadNotification() {
return (
<NotificationCard
title="Previous message"
message="Thanks for your feedback!"
timestamp="1 hour ago"
onClick={() => openConversation()}
/>
);
}
Notification List
Display multiple notifications:Copy
Ask AI
import { NotificationCard } from "@servicetitan/ext-atlas";
function NotificationList({ notifications }) {
return (
<div>
{notifications.map((notification) => (
<NotificationCard
key={notification.id}
title={notification.title}
message={notification.message}
timestamp={notification.timestamp}
unread={notification.unread}
onClick={() => handleClick(notification.id)}
/>
))}
</div>
);
}
Copy
Ask AI
<NotificationCard
title="Notification title"
message="Notification message"
timestamp="2 min ago"
unread={true}
onClick={handleClick}
/>
NotificationCard Props
The notification message content (supports markdown).
The timestamp to display.
The notification title.
Callback fired when the notification card is clicked.
When true, shows the unread indicator and bolds the content.
