HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
ToastView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorThe region messages arrive in, and the only thing that announces them.ExperimentalSince 0.1.0OverlaysUsageimport'@fusion.dev/helix/toast'import'@fusion.dev/helix-headless/toast'Preview
API ReferenceRoothelix-toastThe region messages arrive in, and the only thing that announces them.
PropTypeDefaultDescriptionlabelstring"Notifications"Accessible name for the region, such as "Notifications".placement"bottom-center"|"bottom-end"|"bottom-start"|"top-center"|"top-end"|"top-start"Which corner or edge the stack sits at.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The messages, as `helix-toast-item` elements.
PartDescriptionregionThe stack the messages are in.
CSS PropertyDescription--toast-gapSpace between one message and the next.--toast-inline-sizeWidth of a message.--toast-insetDistance from the edges of the window.
Itemhelix-toast-itemOne message in the toast region.
PropTypeDefaultDescriptiondismissiblebooleanfalseWhether it offers a control to take it away.dismissLabelstring"Dismiss"Accessible name for that control.durationnumberHow long it stays, in milliseconds. Absent means until it is dismissed.openbooleanWhether the message is still showing.tone"danger"|"info"|"success"|"warning"What kind of message it is, which picks the mark and its name.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The message.actionsWhat to do about it, usually a button or a link.dismiss-iconReplaces the glyph inside the dismiss control.iconReplaces the tone mark. Matches `Callout`, which is why the dismiss control's own glyph is `dismiss-icon` rather than this: two slots cannot share a name, assignment goes to whichever comes first in the tree, and the tone mark is the one a consumer reaches for.
EventTypeDescriptionhelix-dismissHelixDismissEventFired when it asks to go, whether by the control or by its timer. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptiondismiss() => booleanAnnounces that it should go, and reports whether the request stood.pause() => voidStops the clock, leaving whatever is left of it.resume() => voidStarts it again from where it stopped.
PartDescriptionactionsThe region holding what to do about it.contentThe message.dismissThe control that asks to close.dismiss-markThe glyph on the dismiss control, where none is slotted.iconThe tone mark, where the message has one.icon-markThe tone glyph, where none is slotted.itemThe message's own surface.timerThe bar showing how long is left, where a duration was given.
CSS PropertyDescription--toast-border-colorColor of the panel's edge.--toast-border-widthWidth of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise.--toast-durationHow long this message stays, in milliseconds, for a progress hint.--toast-item-paddingSpace between the message's edge and its contents.--toast-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.
Roothelix-headless-toastThe region messages arrive in, and the only thing that announces them.
PropTypeDefaultDescriptionlabelstring"Notifications"Accessible name for the region, such as "Notifications".placement"bottom-center"|"bottom-end"|"bottom-start"|"top-center"|"top-end"|"top-start"Which corner or edge the stack sits at.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The messages, as `helix-toast-item` elements.
PartDescriptionregionThe stack the messages are in.
Itemhelix-headless-toast-itemOne message in the toast region.
PropTypeDefaultDescriptiondismissiblebooleanfalseWhether it offers a control to take it away.dismissLabelstring"Dismiss"Accessible name for that control.durationnumberHow long it stays, in milliseconds. Absent means until it is dismissed.openbooleanWhether the message is still showing.tone"danger"|"info"|"success"|"warning"What kind of message it is, which picks the mark and its name.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The message.actionsWhat to do about it, usually a button or a link.dismiss-iconReplaces the glyph inside the dismiss control.iconReplaces the tone mark. Matches `Callout`, which is why the dismiss control's own glyph is `dismiss-icon` rather than this: two slots cannot share a name, assignment goes to whichever comes first in the tree, and the tone mark is the one a consumer reaches for.
EventTypeDescriptionhelix-dismissHelixDismissEventFired when it asks to go, whether by the control or by its timer. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptiondismiss() => booleanAsks to be taken away, and reports whether the request stood.pause() => voidStops the clock, leaving whatever is left of it.resume() => voidStarts it again from where it stopped.
PartDescriptionactionsThe region holding what to do about it.contentThe message.dismissThe control that asks to close.dismiss-markThe glyph on the dismiss control, where none is slotted.iconThe tone mark, where the message has one.icon-markThe tone glyph, where none is slotted.itemThe message's own surface.timerThe bar showing how long is left, where a duration was given.
CSS PropertyDescription--toast-durationHow long this message stays, in milliseconds, for a progress hint.
ExamplesNameDescriptionArrivingSeveral toasts stacking as they arrive.Auto DismissA toast that leaves on its own, and one that waits to be dismissed.EventsA message asks to go, and what happens next is the page's to decide.Page ModeToasts over a dark page, taking their own color mode.PreviewA message over the page, in the corner it was told to appear.PreviewA message over the page, in the corner it was told to appear.SeveritiesThe severities together, from a plain note to a danger.