NotificationItem

Display

Notification list item with avatar, title, description, and timestamp.

Props

Prop	Type	Default	Description
`title`	`string`	`undefined`	Notification title.
`description`	`string`	`undefined`	Description / content.
`time`	`string`	`undefined`	Timestamp displayed.
`read`	`boolean`	`false`	Indicates whether the notification has been read (no blue dot).
`avatarSrc`	`string`	`undefined`	Avatar image URL.
`avatarInitials`	`string`	`undefined`	Initials if no image is provided.

Examples

Notification list

New comment on your post

Alice Martin left a comment: 'This is a great component!'

2 minutes ago

Deployment successful

Production build #142 deployed without errors.

1 hour ago

Subscription renewed

Your Pro plan has been renewed for another year.

Yesterday

vue

<div class="w-80 rounded-ds-xl border border-ds-border overflow-hidden">
  <DsNotificationItem
    title="Pull request merged"
    description="feat/ui-components has been successfully merged into main."
    time="5 min ago"
    :read="false"
    avatar-initials="GH"
    @click="() => {}"
    @dismiss="() => {}"
  />
  <DsNotificationItem
    title="New comment"
    description="Alice left a comment on your design review."
    time="1h ago"
    :read="true"
    avatar-initials="AL"
    @click="() => {}"
    @dismiss="() => {}"
  />
</div>

Skeleton

Use DsNotificationItemSkeleton as a loading placeholder while content is being fetched.

Default (3 items)

vue

<DsNotificationItemSkeleton :count="3" />

Accessibility

role="listitem" on each notification.
The dismiss button has an aria-label.

Kbd

ScrollArea