Toast

Transient notification stack with actions and dismissal.

Overview

  • Provide a persistent place to find information that remains important after a notification disappears.

Aliases

notification toast

When to use

  • Use Toast when the feedback can fade after a short time and does not need to remain inline with nearby content.
  • Add an action to open details or undo a change.

When not to use

  • Do not use Toast for blocking decisions; use Dialog.
  • Do not use Toast as the only place critical information exists if the user may miss it.

Structural parts

toast region

stack

Placement-aware stack of transient feedback surfaces.

single toast surface

item

Contains the title, description, optional action, and dismiss control.

follow-up action

action

Optional quick action inside a toast item.

Public interface

Props
NameTypeDefaultDescription
itemsArray<{ id: string; tone: string; title: string; description?: string; actionLabel?: string; actionHref?: string }>—Data-driven list of toast items to render in the stack.
placement'bottom-right' | 'bottom-left' | 'top-right' | 'top-left''bottom-right'Chooses the stack placement on the viewport.
durationMsnumber5000Auto-dismiss duration for toast items.
dismissiblebooleantrueShows a dismiss control.
onDismiss(detail: { id: string }) => void—Receives the dismissed toast ID.
onAction(detail: { id: string }) => void—Receives the activated toast ID.
themeThemeContract—Sets the theme used to resolve component styles.
Events
NamePayloadDescription
dismiss{ id: string }Fires with the dismissed toast ID.
action{ id: string }Fires with the activated toast ID.
Slots
NameDescription
defaultToast is data-driven and does not expose direct slots.

Variants, sizes, and states

Variants

  • brand: General product feedback.
  • success: Positive confirmation.
  • warning: Transient caution message.
  • danger: High-risk or failure feedback.

Sizes

  • default: Toast uses one structural size and varies by placement and message length.

States

  • open: Toast is visible in the stack.
  • dismissed: Toast leaves the stack after timeout or explicit dismissal.

Accessibility

Semantics

  • Toast exposes a title and optional description for transient feedback.

Keyboard

  • Dismiss buttons and action links remain keyboard reachable while visible.

Screen readers

  • Keep notification text understandable without the action that triggered it.

Caveats

  • Keep critical status available after the notification disappears.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-toast-stack-gap
0.75rem
--dk-toast-stack-inset
1rem
--dk-motion-duration
200ms

item

--dk-toast-item-bg
#f2f5fb
--dk-toast-item-fg
#16181c
--dk-toast-item-border
#95989d
--dk-toast-item-shadow
0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04)
--dk-toast-item-radius
clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem)
--dk-toast-item-padding
1rem
--dk-toast-item-max-width
320px

title

--dk-toast-title-size
0.9375rem
--dk-toast-title-weight
650

description

--dk-toast-description-size
0.8125rem

action

--dk-toast-action-bg
#d7e9ff
--dk-toast-action-fg
#000f4d
--dk-toast-action-radius
999px
--dk-toast-action-inline-padding
0.75rem
--dk-toast-action-block-size
36px
--dk-toast-action-size
0.8125rem

dismiss

--dk-toast-dismiss-size
44px

Implementation notes

  • Provide toast items through props. The component has no global notification service.

Examples

Starter

Save confirmation

A basic transient confirmation for a successful save.

<Toast items={[{ id: 'saved', tone: 'brand', title: 'Saved', description: 'Workspace updated.' }]} />

Common patterns

Undo-capable feedback

Provide an action to reverse or inspect the result.

<Toast items={[{ id: 'archive', tone: 'warning', title: 'Archived', description: 'Project moved to archive.', actionLabel: 'Undo' }]} onAction={(detail) => console.log(detail)} />

Edge cases

Long-running stack

Set the duration to match the time needed to read the notification.

<Toast placement="top-right" durationMs={20000} dismissible={false} items={[{ id: 'sync', tone: 'success', title: 'Sync complete', description: 'All records are in sync.' }]} />

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

toast-bottom-right

pass

placement=bottom-right

  • Evidence: mathematical
  • Coverage: complete (4 / 4 declared kinds evaluated)
  • Declared: contrast, target, anchoredSurface, motion
  • Evaluated: contrast, target, anchoredSurface, motion
  • Contrast: 98.5 Lc
  • Target: 44 px
  • Surface: 320 × 120 px
  • Motion: 200 ms

toast-top-left

pass

placement=top-left

  • Evidence: mathematical
  • Coverage: complete (4 / 4 declared kinds evaluated)
  • Declared: contrast, target, anchoredSurface, motion
  • Evaluated: contrast, target, anchoredSurface, motion
  • Contrast: 98.5 Lc
  • Target: 44 px
  • Surface: 320 × 120 px
  • Motion: 200 ms