Skip to content

SiNotificationItemComponent documentation

selector
si-notification-item

This component represents a single notification that can be used within notification centers, popovers, or other containers. It supports various action types including router links, standard links, action buttons, and menus.

Input Properties

NameTypeDefaultDescription
description
TranslatableStringOptional translatable description.
heading
Required		TranslatableStringThe heading of the notification item.
(NotificationItemRouterLink | NotificationItemLink)Link to the source or relevant information of the notification, which triggers when clicking on the notification item text area.
primaryAction
NotificationItemPrimaryActionAction that is displayed on the right side of the notification.
quickActions
NotificationItemQuickAction[]Actions that are displayed below the text of the notification.
timeStamp
Required		TranslatableStringThe timestamp of the notification item.
unread
booleanfalseUnread messages are emphasized with a bolder font.

Types Documentation

(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
(NotificationItemActionCircleButton | NotificationItemActionIconButton | NotificationItemLinkIcon | NotificationItemRouterLinkIcon | NotificationItemMenu | NotificationItemActionButton)
Union type for primary actions in a notification item.
(NotificationItemActionCircleButton | NotificationItemActionIconButton | NotificationItemLinkIcon | NotificationItemRouterLinkIcon)
Union type for quick actions in a notification item.
Translatable
import
extends NotificationItemBase
Interface for an action circle button in a notification item.
@param: The type of the action, always 'action-circle-button'.
@param: Optional custom CSS class for styling.
@param: The action to perform when the button is clicked.
Deprecated: Use NotificationItemActionIconButton instead. This will be removed in a future release.
Properties
action: (source: this) => void
ariaLabel: TranslatableString from ariaLabel
customClass?: string
icon: string from icon
type: "action-circle-button"
extends NotificationItemBase
Interface for an action icon button in a notification item.
@param: The type of the action, always 'action-icon-button'.
@param: Optional custom CSS class for styling.
@param: The action to perform when the button is clicked.
Properties
action: (source: this) => void
ariaLabel: TranslatableString from ariaLabel
customClass?: string
icon: string from icon
type: "action-icon-button"
extends NotificationItemBase
Interface for a standard link with an icon in a notification item.
@param: The type of the link, always 'link'.
@param: The URL to navigate to.
@param: Optional target attribute for the link.
Properties
ariaLabel: TranslatableString from ariaLabel
href: string
icon: string from icon
target?: string
type: "link"
extends NotificationItemBase
Interface for a router link with an icon in a notification item.
@param: The type of the link, always 'router-link'.
@param: The router link to navigate to.
@param: Optional navigation extras for the router.
Properties
ariaLabel: TranslatableString from ariaLabel
extras?: NavigationExtras
icon: string from icon
type: "router-link"
Interface for a menu in a notification item.
@param: The type of the action, always 'menu'.
@param: The menu items to display in the menu.
Properties
menuItems: MenuItem[]
type: "menu"
Interface for an action button in a notification item.
@param: The type of the action, always 'action-button'.
@param: The label to display on the button.
@param: The action to perform when the button is clicked.
Properties
action: (source: this) => void
label: TranslatableString
type: "action-button"
Base interface for notification item actions.
@param: The ARIA label for accessibility.
@param: The icon to display for the action.
Properties
ariaLabel: TranslatableString
icon: string
(MenuItemGroup | MenuItemAction | MenuItemRouterLink | MenuItemLink | MenuItemRadioGroup | MenuItemCheckbox | MenuItemRadio | MenuItemHeader | MenuDivider)
extends MenuItemBase
Properties
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Submenu items for this menu item.
children: MenuItem[]
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "action"
Properties
Items that are part of the radio group.
children: [ MenuItemHeader, ...(MenuItemRadio | MenuItemHeader | MenuDivider)[] ]
type: "radio-group"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the checkbox is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "checkbox"
extends MenuItemBase
Properties
Action that called when the item is triggered. A function will be called, a string will be dispatched to the SiMenuActionService .
action: (string | (actionParam: any, source: this) => void)
Badge that is rendered after the label.
badge?: (string | number) from badge
Color of the badge (not iconBadge).
badgeColor?: string from badgeColor
Whether the radio is checked.
checked: boolean
Whether the menu item id disabled.
disabled?: boolean from disabled
Optional icon that will be rendered before the label.
icon?: string from icon
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean) from iconBadge
ID that will be attached to the DOM node.
id?: string from id
Label that is shown to the user.
label: TranslatableString from label
type: "radio"
Properties
The label of the header.
label: string
type: "header"
Properties
type: "divider"
Properties
Badge that is rendered after the label.
badge?: (string | number)
Color of the badge (not iconBadge).
badgeColor?: string
Whether the menu item id disabled.
disabled?: boolean
Optional icon that will be rendered before the label.
icon?: string
Badge (always red) that is attached to the icon. If value===true, an empty red dot will be rendered.
iconBadge?: (string | number | boolean)
ID that will be attached to the DOM node.
id?: string
Label that is shown to the user.
label: TranslatableString
Implement and provide this to an SiMenuFactoryComponent to receive trigger events.
Constructor
() => {}
Methods
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio), actionParam: any) => void
Will be called by SiMenuFactoryComponent if an action is defined with a string instead of a function.
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
actionParam?: any
Used in events emitted from SiLinkActionService
Properties
param: any
Constructor
() => {}
Properties
actionParam: InputSignal<unknown> = ...
items: InputSignal<(readonly (MenuItem | MenuItem)[] | undefined)> = ...
linkActionService: (SiLinkActionService | null) = ...
menuActionService: (SiMenuActionService | null) = ...
Methods
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: (MenuItem | MenuItem)) => item is MenuItem
Parameters
item: (MenuItem | MenuItem)
(item: MenuItem) => void
Parameters
item: MenuItem
(item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)) => void
Parameters
item: (MenuItemAction | MenuItemCheckbox | MenuItemRadio)
Constructor
() => {}
Properties
Observable which emits the link and param to run the action on.
action$: Observable<LinkAction> = this.actionSubject.asObservable()
actionSubject: Subject<LinkAction> = ...
Methods
(link: Link, param: any) => void
Emit a new link and param pair to run the action on.
Parameters
param: any

Except where otherwise noted, content on this site is licensed under MIT License.