Toast

Toasts are brief, non-modal notifications that confirm a user's action and disappear automatically.

Show toast

Usage

forge-toast shows a brief, temporary confirmation through open, duration, placement, and theme, plus an optional actionText and dismissible close button. Trigger it imperatively by setting open (or calling the static ToastComponent.present(...) helper) in response to a user action; reserve it for confirming something that just happened, and show only one at a time. For a message that requires a decision, use a dialog instead; for a page-level announcement, use a banner instead.

Rules

Confirm an action the user just took, like creating, moving, or updating a record.

Show only one toast at a time — queue successive toasts instead of stacking them.

If you add an action label, keep it a genuine alternate action, never "Dismiss" or "Cancel" — the toast already disappears on its own.

Display each toast for at least 5 seconds, adding more time for longer messages.

Don't

Don't use a toast for an error or decision that needs user input — use a dialog instead.

Don't use a toast for a page-level, persistent announcement — use a banner instead.

Don't use a toast for information a user might need to reference again — use an inline message instead.

Basic usage

A trigger fires the action, then sets the toast’s open property (or calls ToastComponent.present(...)) to show it. A toast shown via ToastComponent.present(...) removes itself from the DOM once duration elapses; a declarative <forge-toast open> does not — toggle open yourself to hide it.

A button triggers a toast confirming an action.

<forge-button variant="raised">
  Show Toast
</forge-button>
<forge-toast aria-live="assertive" aria-atomic>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</forge-toast>

With dialogs

A dismissible toast shown while a forge-dialog is open is non-interactive by default — the dialog makes everything outside it inert. Pass topLayer: true to keep it clickable; this appends the toast to the topmost open dialog instead of the page.

ToastComponent.present({ message: "Save successful", topLayer: true });

Action and dismiss button

Set actionText to add an inline action button, and dismissible to add a manual close button alongside the automatic timeout.

A dismissible toast adds a manual close button.

<forge-button variant="raised">
  Show Toast
</forge-button>
<forge-toast dismissible aria-live="assertive" aria-atomic>
  This toast is dismissible!
</forge-toast>

Placement

Set placement to move the toast to the top of the viewport instead of the default bottom.

A toast placed at the top of the viewport instead of the default bottom.

<forge-toast open placement="top">
  Saved.
</forge-toast>

Theme

Set theme to reinforce the outcome being confirmed, such as success.

A success-themed toast.

<forge-toast open theme="success">
  Record saved.
</forge-toast>

Toasts are non-modal notifications that appear in response to user interactions. Use toasts to provide brief messages about app processes at the bottom or top of the screen. They automatically disappear after a timeout, but can also include an action button and a dismiss button.

import "@tylertech/forge/toast";

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	The open state.
`duration`	`duration`	`number`	`2750`	The duration in milliseconds that the toast is displayed.
`placement`	`placement`	`ToastPlacement`	`"bottom"`	The placement of the toast.
`actionText`	`action-text`	`string`	—	The text for the action button. This controls the visibility of the action button.
`dismissible`	`dismissible`	`boolean`	`false`	Whether the toast is dismissible (displays a close button).
`dismissLabel`	`dismiss-label`	`string`	—	The accessible label for the dismiss button.
`theme`	`theme`	`ToastTheme`	`"default"`	The theme of the toast.

Events

Name	Type	Description
`forge-toast-action`	`CustomEvent<void>`	Dispatched when the action button is clicked.
`forge-toast-close`	`CustomEvent<void>`	Dispatched when the toast is closed.

CSS Parts

Name	Description
`::part(surface)`	The surface container.
`::part(message)`	The message container.
`::part(action-button)`	The action button.
`::part(close-button)`	The close button.
`::part(overlay)`	The `<forge-overlay>` element.

CSS Custom Properties

Name	Description
`--forge-toast-background`	The background color of the toast.
`--forge-toast-color`	The text color of the toast.
`--forge-toast-offset`	The offset of the toast from the edge of the viewport.
`--forge-toast-shape`	The shape of the toast.
`--forge-toast-elevation`	The elevation of the toast.
`--forge-toast-action-color`	The text color of the action button.
`--forge-toast-min-width`	The minimum width of the toast.
`--forge-toast-max-width`	The maximum width of the toast.
`--forge-toast-min-height`	The minimum height of the toast.
`--forge-toast-inline-padding`	The padding of the toast when inline.
`--forge-toast-spacing`	The spacing between toasts.
`--forge-toast-message-padding`	The padding of the toast message.
`--forge-toast-enter-duration`	The duration of the enter animation.
`--forge-toast-enter-timing`	The timing function of the enter animation.
`--forge-toast-exit-duration`	The duration of the exit animation.
`--forge-toast-exit-timing`	The timing function of the exit animation.
`--forge-toast-slide-origin`	The origin of the slide animation.

Methods

Name	Returns	Description
`show()`	`void`	Shows the toast.
`hide()`		Hides the toast.

Keyboard interaction

If a toast is dismissible, make sure its dismiss button is reachable and operable by keyboard.

Color

If a toast’s theme color conveys meaning (success, error, and so on), don’t rely on color alone — pair it with an icon or text so users with color perception deficiencies get the same information.