StartFoundationsComponentsContent
Overview
Button Icon button Split button Button group Toggle button Toggle button group
Badge Banner Empty state Progress bar Progress ring Section message Skeleton Spinner Toast
Field Input Textarea Number input Number stepper Search field OTP input Phone input Checkbox Radio group Switch Slider Selection card Inline edit
Select family Select Combobox Multiselect Country select Date picker Date range picker Time picker Calendar Emoji picker
Dialog Sheet Popover Menu Tooltip
Sidebar Navigation menu Tab bar Segmented control Breadcrumb Pagination Tree
Table Data table Avatar Avatar group Tag Icon Image
Text Prose Link Code block Kbd
Accordion Collapsible Divider Scroll area Splitter Aspect ratio
Page header

Toast

A toast is a short message that confirms an action, floats at the bottom of the screen, and goes away on its own.

Stable Figma
OverviewUsageAPIAccessibility
Save changes 
<tk-button onclick="document.querySelector('tk-toaster').toast('Changes saved')">Save changes</tk-button>
<tk-toaster></tk-toaster>

Anatomy

Part What it is
tk-toaster the region you add once; it places, queues, and announces toasts
tk-toast the pill the toaster creates for each message
message one short line of text
action one optional button, such as Undo
dismiss button the ✕, only with dismissible

There is one look: a dark pill in the light theme and a light one in the dark theme. There are no tones and no icons.

Show a toast

Add one empty tk-toaster to the page, then call toast() on it.

<tk-toaster></tk-toaster>
<tk-button onclick="document.querySelector('tk-toaster').toast('Changes saved')">Save changes</tk-button>
  • Put the toaster in your page markup, empty, before any toast. Screen readers only announce a live region that already existed, so don't create it the moment you need it.
  • Use one toaster per page.

Actions

const toaster = document.querySelector('tk-toaster');

toaster.toast('Conversation archived', {
  action: {
    label: 'Undo',
    handler: () => restoreConversation(),
    altText: 'Undo: press {hotkey} then Enter',
  },
});
  • One action at most, and only as a shortcut. The user must be able to do the same thing somewhere else on the page. If the action is the only way, use a dialog.
  • altText is required with an action. Screen readers hear it after the message, so say how to reach the action. {hotkey} becomes the toaster's hotkey, F8 by default.
  • dismissible: true adds a ✕. Most toasts don't need one; they leave on their own.

Behavior

Toast Shown for
without an action 5 seconds
with an action at least 10 seconds
  • Hover, focus, and switching windows pause the timer. It resumes with the time that was left.
  • Set duration for a longer message. Plan about 5 seconds plus 1 second for every 120 words.
  • One toast shows at a time, in the order they came. The same message twice in a row restarts the current toast instead of queuing a copy.
  • Up to 3 wait in the queue (max-queue). Past that, the oldest waiting toast is dropped.
  • toast() returns a handle. Call handle.dismiss() to remove the toast early; it's always safe to call.

Before a toast leaves, tk-toaster fires a cancelable tk-dismiss event. Call preventDefault() to keep it on screen, for example while an undo finishes.

toaster.addEventListener('tk-dismiss', (event) => {
  if (event.detail.reason === 'action' && undoInProgress) event.preventDefault();
});

Position

The toast floats at the bottom center, above dialogs, 16px from the bottom edge. If you have a bottom navigation bar, raise --tk-toaster-offset so the toast never covers it. The empty toaster doesn't block clicks on the page.