HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
CalloutView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA passage set apart as a note, information, a warning, or an error.StableSince 0.1.0MarkersUsageimport'@fusion.dev/helix/callout'import'@fusion.dev/helix-headless/callout'Preview
API ReferenceRoothelix-calloutA passage set apart as a note, information, a warning, or an error.
PropTypeDescriptiondismissiblebooleanDefaultfalseWhether the element shows a control that dismisses it.dismissLabelstringDefault"Dismiss {label}"The dismiss control's label, read by screen readers.openbooleanDefaulttrueWhether the callout is showing. A dismissal nobody canceled turns it
false and the callout hides itself, and setting it true shows the callout
again. open="false" renders it hidden. Not reflected: open is the resting
state, so an open attribute would appear on markup a server sent without
it.separation"filled"|"outlined"|"plain"Where the callout's box ends, whatever its tone.tone"danger"|"info"|"neutral"|"success"|"warning"What kind of attention the passage needs.toneLabelstringDefault""What a screen reader is told the tone is, such as "Fehler".toneLabelsPartial<Record<"danger" | "info" | "neutral" | "success" | "warning", string>>Default{ danger: "Error", info: "Information", neutral: "Note", success: "Success", warning: "Warning", }What a screen reader is told each tone is, by the tone's name, written as
JSON in the attribute: tone-labels='{"danger":"Fehler"}'. A tone left
out keeps its English, and tone-label wins over both.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The callout's content.dismiss-iconReplaces the cross inside the dismiss button.headingA heading above the content.iconReplaces the icon chosen by tone.
EventTypeDescriptionhelix-dismissHelixDismissEventThe dismiss button was pressed. Unless a listener cancels it, the callout hides itself, and a listener may remove it instead. Cancelable: cancel it to keep the callout showing.
MethodTypeDescriptiondismiss() => booleanFires helix-dismiss, and returns false if a listener cancels it.
PartDescriptioncontentThe content region.dismissThe button that dismisses the callout, shown when dismissible is set.dismiss-markThe cross on the dismiss button, shown when the dismiss-icon slot is empty.iconThe icon region.icon-markThe icon for the tone, shown when no icon is slotted.
CSS PropertyDescription--callout-accent-colorThe color of the bar, the mark and the tint, in place of the tone's.--callout-background-colorThe fill behind the callout.--callout-bar-thicknessThe thickness of the bar on the inline start edge.--callout-font-sizeThe size of the callout's text. Defaults to the control text step, which follows data-density.--callout-gapThe space between the mark and the content.--callout-paddingThe inset around the content, to which the bar's width is added at the start. Defaults to the control space step, which follows data-density.--callout-radiusThe corner radius of the callout.
Custom stateDescriptionclosedWhile open is false: the callout was dismissed, and is leaving or hidden.enteringWhile a callout shown again by open runs its entrance animations.exitingWhile a dismissed callout runs its exit animations, before it is hidden.has-headingSomething is slotted into heading.has-iconAn icon of your own is slotted into icon, in place of the tone's.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-calloutA passage set apart as a note, information, a warning, or an error.
PropTypeDescriptiondismissiblebooleanDefaultfalseWhether the element shows a control that dismisses it.dismissLabelstringDefault"Dismiss {label}"The dismiss button's name, read by screen readers, with {label} for
what the callout is called: its heading, or the tone's name where it has
none.openbooleanDefaulttrueWhether the callout is showing. A dismissal nobody canceled turns it
false and the callout hides itself, and setting it true shows the callout
again. open="false" renders it hidden. Not reflected: open is the resting
state, so an open attribute would appear on markup a server sent without
it.tone"danger"|"info"|"neutral"|"success"|"warning"What kind of attention the passage needs.toneLabelstringDefault""What a screen reader is told the tone is, such as "Fehler".toneLabelsPartial<Record<"danger" | "info" | "neutral" | "success" | "warning", string>>Default{ danger: "Error", info: "Information", neutral: "Note", success: "Success", warning: "Warning", }What a screen reader is told each tone is, by the tone's name, written as
JSON in the attribute: tone-labels='{"danger":"Fehler"}'. A tone left
out keeps its English, and tone-label wins over both.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The callout's content.dismiss-iconReplaces the cross inside the dismiss button.headingA heading above the content.iconReplaces the icon chosen by tone.
EventTypeDescriptionhelix-dismissHelixDismissEventThe dismiss button was pressed. Unless a listener cancels it, the callout hides itself, and a listener may remove it instead. Cancelable: cancel it to keep the callout showing.
MethodTypeDescriptiondismiss() => booleanHides the callout once a dismissal stands, unless the page removed it in
its listener, which is the page's answer and leaves open as it was.
PartDescriptioncontentThe content region.dismissThe button that dismisses the callout, shown when dismissible is set.dismiss-markThe cross on the dismiss button, shown when the dismiss-icon slot is empty.iconThe icon region, an image named for the tone.icon-markThe icon for the tone, shown when no icon is slotted.
Custom stateDescriptionclosedWhile open is false: the callout was dismissed, and is leaving or hidden.enteringWhile a callout shown again by open runs its entrance animations.exitingWhile a dismissed callout runs its exit animations, before it is hidden.has-headingSomething is slotted into heading.has-iconAn icon of your own is slotted into icon, in place of the tone's.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionDensityA callout follows data-density, written on a region or on the callout itself, as the controls beside it do.DismissibleA dismissible callout sends helix-dismiss, and the page removes it. Focus moves on to the next control.PreviewA note set apart from the prose around it.PreviewA note set apart from the prose around it.SeparationThe callout's three edges: the resting tint, an outline, and the bar alone.TonesThe callout in each tone, from a plain note to a danger.