HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
AnnouncementView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA message for the whole page, shown above its header, that can be dismissed.StableSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/announcement'import'@fusion.dev/helix-headless/announcement'Preview
API ReferenceRoothelix-announcementA message for the whole page, shown above its header, that can be dismissed.
PropTypeDescriptiondismissiblebooleanDefaultfalseWhether the element shows a control that dismisses it.dismissLabelstringDefault"Dismiss"The dismiss control's label, read by screen readers.durationnumberHow long the announcement stays, in milliseconds, before it sends
helix-dismiss. When it is not set, it stays until it is dismissed. The
attribute also takes a CSS time, such as 8s.hotkeystringDefault"F6"The key that moves focus to the announcement's first control, and back
to where it was, written as keys joined by +, such as F6 or Alt+A.labelstringDefault"Announcement"The name of the announcement's region, which screen readers list among
the page's landmarks. Translate it with the rest of your interface.queuedbooleanDefaultfalseWhether the announcement waits its turn behind the queued announcements
before it in the same parent, showing when the last of them is removed.separation"elevated"|"filled"|"outlined"The surface level the band sits on.tone"accent"|"danger"|"info"|"neutral"|"primary"|"success"|"warning"The band's color.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The message.actionsActions for the message, usually a link or a button.dismiss-iconReplaces the cross inside the dismiss button, as Callout's slot of the same name does.iconReplaces the cross inside the dismiss button. Deprecated: use dismiss-icon, which is read first.
EventTypeDescriptionhelix-dismissHelixDismissEventThe dismiss button was pressed, or duration ran out. The announcement does not remove itself, so remove it in response. Cancelable.
MethodTypeDescriptiondismiss() => booleanFires helix-dismiss, and returns false if a listener cancels it.
PartDescriptionactionsThe region after the message that holds the actions.contentThe region that holds the message.dismissThe button that dismisses the announcement.dismiss-markThe cross on the dismiss button, shown when the dismiss-icon and icon slots are empty.liveA copy of the message in a live region, read by screen readers when the announcement appears after the page has loaded, and emptied seven seconds later. Visually hidden in the styled tier.
CSS PropertyDescription--announcement-background-colorThe band's fill, in place of the one its separation gives it. A tone's tint still paints over it, so a band that sets this usually carries no tone.--announcement-block-sizeThe band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller.--announcement-font-sizeThe size of the message's text.--announcement-foreground-colorThe message's color, to pair with a fill set through the background hook.--announcement-insetThe inline padding, matched to the page.--announcement-text-alignWhere the message sits in the band. Centered by default; start lines it up with the page under it.--announcement-tone-colorThe color a toned band's tint and outline are mixed from, in place of the tone's.
Custom stateDescriptionpausedThe clock duration started is stopped, while the pointer or focus is on the announcement or the page is hidden.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.waitingThe announcement is queued behind another, and renders nothing until that one is removed.
Roothelix-headless-announcementA message for the whole page, shown above its header, that can be dismissed.
PropTypeDescriptiondismissiblebooleanDefaultfalseWhether the element shows a control that dismisses it.dismissLabelstringDefault"Dismiss"The dismiss control's label, read by screen readers.durationnumberHow long the announcement stays, in milliseconds, before it sends
helix-dismiss. When it is not set, it stays until it is dismissed. The
attribute also takes a CSS time, such as 8s.hotkeystringDefault"F6"The key that moves focus to the announcement's first control, and back
to where it was, written as keys joined by +, such as F6 or Alt+A.labelstringDefault"Announcement"The name of the announcement's region, which screen readers list among
the page's landmarks. Translate it with the rest of your interface.queuedbooleanDefaultfalseWhether the announcement waits its turn behind the queued announcements
before it in the same parent, showing when the last of them is removed.tone"accent"|"danger"|"info"|"neutral"|"primary"|"success"|"warning"The band's color.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The message.actionsActions for the message, usually a link or a button.dismiss-iconReplaces the cross inside the dismiss button, as Callout's slot of the same name does.iconReplaces the cross inside the dismiss button. Deprecated: use dismiss-icon, which is read first.
EventTypeDescriptionhelix-dismissHelixDismissEventThe dismiss button was pressed, or duration ran out. The announcement does not remove itself, so remove it in response. Cancelable.
MethodTypeDescriptiondismiss() => booleanFires helix-dismiss, and returns false if a listener cancels it.
PartDescriptionactionsThe region after the message that holds the actions.contentThe region that holds the message.dismissThe button that dismisses the announcement.dismiss-markThe cross on the dismiss button, shown when the dismiss-icon and icon slots are empty.liveA copy of the message in a live region, read by screen readers when the announcement appears after the page has loaded, and emptied seven seconds later. Visually hidden in the styled tier.
Custom stateDescriptionpausedThe clock duration started is stopped, while the pointer or focus is on the announcement or the page is hidden.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.waitingThe announcement is queued behind another, and renders nothing until that one is removed.
Examples
NameDescriptionEventsPressing the dismiss button sends helix-dismiss. The announcement stays in the page until your code removes it.PreviewA dismissible announcement with the info tone.PreviewA dismissible announcement with the info tone.SeparationA filled band, an elevated band, an elevated band with a tone, and a band with a line under it.TonesThe seven tones side by side, from neutral notice to danger.With ActionsAn announcement with a button in its actions slot, for a message you can act on.