Atlas is deprecated. Use AI Kit for any new Atlas experiences.
- Implementation
- NotificationCard API
Common Examples
Basic Usage
Display a notification:import { NotificationCard } from "@servicetitan/anvil2-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:import { NotificationCard } from "@servicetitan/anvil2-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:import { NotificationCard } from "@servicetitan/anvil2-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>
);
}
<NotificationCard
title="Notification title"
message="Notification message"
timestamp="2 min ago"
unread={true}
onClick={handleClick}
/>
NotificationCard Props
string
required
The notification message content (supports markdown).
string
required
The timestamp to display.
string
required
The notification title.
() => void
Callback fired when the notification card is clicked.
boolean
default:"false"
When true, shows the unread indicator and bolds the content.