Notification Panel

A notification center panel that displays notification items within a work side menu, with tabs for filtering by unread, urgent, and all notifications.

Props

activeTab
GoabWorkSideNotificationActiveTabType unread | urgent | all
Sets the initially active tab.
Defaults to unread.
heading
string
Sets the panel heading text.
Defaults to Notifications.
testId
string
Sets a data-testid attribute for automated testing.
activeTab
GoabWorkSideNotificationActiveTabType unread | urgent | all
Sets the initially active tab in the notification panel.
heading
string
The heading text displayed at the top of the notification panel.
Defaults to Notifications.
testId
string
Sets a data-testid attribute for automated testing.
active-tab
GoabWorkSideNotificationPanelTabType unread | urgent | all
Sets the initially active tab.
Defaults to unread.
heading
string
Sets the panel heading text.
Defaults to Notifications.
testid
string
Sets a data-testid attribute for automated testing.

Events

onMarkAllRead
() => void
Callback fired when the "Mark all as read" button is clicked.
onViewAll
() => void
Callback fired when the "View all" button is clicked.
onMarkAllRead
() => void
Emits when the user clicks "Mark all as read".
onViewAll
() => void
Emits when the user clicks "View all".
_markAllRead
CustomEvent<void>
Emits when the user clicks "Mark all as read".
_viewAll
CustomEvent<void>
Emits when the user clicks "View all".

Notification Item Props

description
string
The body text content of the notification card.
priority
GoabWorkSideNotificationPriority normal | urgent
Sets the urgency level of the notification.
Defaults to normal.
readStatus
GoabWorkSideNotificationReadStatus read | unread
Indicates whether the notification has been read or is unread.
Defaults to unread.
testId
string
Sets a data-testid attribute for automated testing.
timestamp
string
ISO timestamp string representing when the notification occurred.
title
string
Title text displayed in the notification card header.
type
GoabWorkSideNotificationItemType default | success | critical | warning | info
Sets the visual type/style of the notification item.
Defaults to default.
description
string
The body text content of the notification card.
priority
GoabWorkSideNotificationPriority normal | urgent
Sets the urgency level of the notification.
Defaults to normal.
readStatus
GoabWorkSideNotificationReadStatus read | unread
Indicates whether the notification has been read or is unread.
Defaults to unread.
testId
string
Sets a data-testid attribute for automated testing.
timestamp
string
ISO timestamp string representing when the notification occurred.
title
string
Title text displayed in the notification card header.
type
GoabWorkSideNotificationItemType default | success | critical | warning | info
Sets the visual type/style of the notification item.
Defaults to default.
description
string
The body text content of the notification card.
priority
GoabWorkSideNotificationItemPriority normal | urgent
Sets the urgency level of the notification.
Defaults to normal.
read-status
GoabWorkSideNotificationItemReadStatu read | unread
Indicates whether the notification has been read or is unread.
Defaults to unread.
testid
string
Sets a data-testid attribute for automated testing.
timestamp
string
ISO timestamp string representing when the notification occurred.
title
string
Title text displayed in the notification card header.
type
GoabWorkSideNotificationItemType default | success | critical | warning | info
Sets the visual type/style of the notification item.
Defaults to default.

Notification Item Events

onClick
() => void
Callback fired when the notification item is clicked.
onClick
() => void
Emits when the notification item is clicked.
_click
CustomEvent<void>
Emits when the notification item is clicked.
_notificationItemRead
CustomEvent<{ el: unknown; readStatus: unknown }>
Emits when the notification's read status changes.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

View old component docs