AI 토스트 생성기.

Create a toast system with four semantic types — success with a check icon and green accent, error with an alert icon and red accent, warning with a triangle and amber accent, info with a circle and blue accent. Each toast is 360px wide with a 12px radius, 16px padding, a semibold title, an optional description and a close button with an accessible label. Stack in the bottom-right with 8px gaps, newest on top, three visible at once and the rest queued. Auto-dismiss success, info and warning after 5000ms; keep errors until the user closes them. Wrap non-error toasts in role="status" with aria-live="polite" and give errors role="alert". Slide in 16px from the right and fade out; under prefers-reduced-motion, fade only.

Create a toast with a visible dismiss countdown: a 2px progress bar along the bottom edge animating from full to zero over the toast duration. Pause the timer and freeze the bar on pointerenter and on focusin anywhere inside the toast, then resume from the remaining time on pointerleave and focusout — track elapsed time explicitly rather than restarting the interval, or the toast will live longer every time the pointer crosses it. Reset to the full duration when the toast content is updated in place. Under prefers-reduced-motion, replace the animated bar with a static severity stripe and keep the timer behaviour unchanged. Keep the toast in a role="status" region with aria-live="polite".

Create a toast variant with a single inline action button — Undo or Retry — beside the close control. Do not auto-dismiss while an action is present unless the caller passes an explicit duration, and never dismiss on a timer shorter than the window in which the action is still valid server-side. Move keyboard focus nowhere on mount; instead expose the toast region via a landmark and make the action reachable through a documented shortcut plus normal tab order, so a toast never steals focus from a form the user is typing in. Announce the toast with role="status" and aria-live="polite", and include the action label in the announced text so the option is heard, not just seen.

Create a promise-driven toast that mounts in a pending state with a spinner and a loading title, then updates the same toast node to success or error when the promise settles rather than mounting a second toast. Keep the toast ID stable across the transition so the stack position does not change, swap the icon and accent, and start the auto-dismiss timer only once the promise resolves. On rejection, switch the container to role="alert" and cancel auto-dismiss. Because the live region content changes in place, debounce the announcement so a request that resolves in under 400ms announces the final state only. Cap the pending state with a timeout that converts to an error toast rather than spinning forever.

Create a mobile-first toast pinned to the top-center with a safe-area inset using env(safe-area-inset-top), full width minus 16px gutters, capped at a single line of title text with the description truncated to two lines. Add horizontal swipe-to-dismiss with a 60px or 40% drag threshold, translating with the pointer and springing back below the threshold; suppress the pointer handlers while the user is scrolling the page underneath. Keep the close button hit area at 44px even though the glyph is 16px. Show one toast at a time and replace rather than stack, since a stack on a 375px viewport covers the content. Use role="status" with aria-live="polite" and disable the spring under prefers-reduced-motion.

Create a compact snackbar toast: a single line of 14px text on a dark surface, 8px radius, 12px vertical and 16px horizontal padding, no icon and no separate title, with an optional text-only action on the right. Anchor it bottom-center with a 24px offset and allow only one at a time — a new snackbar replaces the current one and resets its 4000ms timer instead of queueing, because these fire from rapid interactions like copy and toggle. Announce via role="status" with aria-live="polite", and when the text is identical to the previous message, force re-announcement by clearing the live region for one frame. Fade and lift 8px on entry; fade only under prefers-reduced-motion.