HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
NotificationsView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA feed a reader comes back to, made of notifications they may not have seen.ExperimentalSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/notifications'import'@fusion.dev/helix-headless/notifications'Preview
API ReferenceNotificationhelix-notificationOne thing that happened, which a reader may not have seen yet.
PropTypeDefaultDescriptionatstring""When it happened, as anything `Date` parses.defaultReadbooleanfalseState to open with, where nothing declared one.dismissiblebooleanfalseWhether a reader may remove it.dismissLabelstring"Dismiss"Accessible name for the dismiss control.localestring""Locale for the timestamp.readbooleanWhether the reader has seen it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What happened, in the consumer's own markup.actionsWhat a reader can do about it.captionA second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.mediaAn avatar or icon identifying who or what it came from.
EventTypeDescriptionhelix-dismissHelixDismissEventFired when a reader asks to remove it, and cancelable.helix-readHelixReadEventFired when the item is marked read or unread, and cancelable.
MethodTypeDescriptionmarkRead(next: unknown) => booleanAsks to be marked read, and reports whether the request stood.
PartDescriptionactionsThe trailing slot's box.bodyThe label and the caption together.controlsThe actions and the dismiss, which replace the time.dismissThe control that removes it.dismiss-markThe glyph on that control, where none is slotted.itemThe whole notification.labelWhat happened, on the first line.mediaThe leading slot's box.timeWhen it happened.trailingThe column holding the time and the controls.
CSS PropertyDescription--notifications-colorInk in an item that has been read.--notifications-padding-blockSpace above and below an item.--notifications-padding-inlineSpace either side of an item.--notifications-ruleThe hairline between items.--notifications-unread-block-sizeHow long that mark is.--notifications-unread-inline-sizeHow thick that mark is.--notifications-unread-insetHow far it sits from the row's leading edge.--notifications-unread-markColor of the edge mark on an unread item.--notifications-unread-offsetHow far it sits from the row's top.--notifications-unread-radiusIts corner radius, which is what turns it into a dot.
Roothelix-notificationsA feed a reader comes back to, made of notifications they may not have seen.
PropTypeDefaultDescriptionemptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring""Accessible name for the feed.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.markAllbooleanfalseWhether to draw a control that marks everything read.markAllLabelstring"Mark all as read"Label for that control.
ReadTypeDescriptionitemsHelixHeadlessNotification[]The notifications declared as children, in the order they are written.unreadnumberHow many items are unread, counted from the items themselves.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The notifications, as `helix-notification` children.footerBelow the list, for a link to everything.headerAbove the list, for a title and the mark-all control.
EventTypeDescriptionhelix-readHelixReadEventFired by an item, and by this element when everything is marked read. Cancelable.
MethodTypeDescriptionmarkEveryoneRead() => numberMarks every unread item read, and reports how many actually moved.
PartDescriptionemptyShown when there is nothing in the feed.footerThe region below the list.headerThe region above the list.listThe list itself.loadingShown while the feed is still on its way.mark-allThe control that marks everything read.
CSS PropertyDescription--notifications-max-block-sizeHow tall the feed may get before the list scrolls.--notifications-media-columnThe gutter every item holds open where something in the feed has media.--notifications-padding-inlineSpace either side of the header and footer.--notifications-ruleThe hairline between items and around the regions.
Notificationhelix-headless-notificationOne thing that happened, which a reader may not have seen yet.
PropTypeDefaultDescriptionatstring""When it happened, as anything `Date` parses.defaultReadbooleanfalseState to open with, where nothing declared one.dismissiblebooleanfalseWhether a reader may remove it.dismissLabelstring"Dismiss"Accessible name for the dismiss control.localestring""Locale for the timestamp.readbooleanWhether the reader has seen it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What happened, in the consumer's own markup.actionsWhat a reader can do about it.captionA second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.mediaAn avatar or icon identifying who or what it came from.
EventTypeDescriptionhelix-dismissHelixDismissEventFired when a reader asks to remove it, and cancelable.helix-readHelixReadEventFired when the item is marked read or unread, and cancelable.
MethodTypeDescriptionmarkRead(next: unknown) => booleanAsks to be marked read, and reports whether the request stood.
PartDescriptionactionsThe trailing slot's box.bodyThe label and the caption together.controlsThe actions and the dismiss, which replace the time.dismissThe control that removes it.dismiss-markThe glyph on that control, where none is slotted.itemThe whole notification.labelWhat happened, on the first line.mediaThe leading slot's box.timeWhen it happened, read the way a person reads one.trailingThe column holding the time and the controls.
Roothelix-headless-notificationsA feed a reader comes back to, made of notifications they may not have seen.
PropTypeDefaultDescriptionemptyTextstring"Nothing to show"What is said where there are none, and none are coming.labelstring""Accessible name for the feed.loadingbooleanfalseWhether the rows are still on their way.loadingTextstring"Loading"What is said while they are on their way.markAllbooleanfalseWhether to draw a control that marks everything read.markAllLabelstring"Mark all as read"Label for that control.
ReadTypeDescriptionitemsHelixHeadlessNotification[]The notifications declared as children, in the order they are written.unreadnumberHow many items are unread, counted from the items themselves.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The notifications, as `helix-notification` children.footerBelow the list, for a link to everything.headerAbove the list, for a title and the mark-all control.
EventTypeDescriptionhelix-readHelixReadEventFired by an item, and by this element when everything is marked read. Cancelable.
MethodTypeDescriptionmarkEveryoneRead() => numberMarks every unread item read, and reports how many actually moved.
PartDescriptionemptyShown when there is nothing in the feed.footerThe region below the list.headerThe region above the list.listThe list itself.loadingShown while the feed is still on its way.mark-allThe control that marks everything read.
ExamplesNameDescriptionEventsRead and dismissed are two different things a feed is told.PreviewA feed with unread items, a mark-all control, and timestamps that stay correct.PreviewA feed with unread items, a mark-all control, and timestamps that stay correct.Read On The ServerRead state the page owns, so marking read can be the round trip it usually is.