Skip to content
Ben Serkan ZararsızComponents

Toasts3

Notifications that come and go without stealing focus. They live in polite live regions and pause while you read them.

Stack

  • JS
  • Touch
  • aria-live

New toasts slide in on top, older ones tuck behind. Hover or focus fans the stack out and pauses every timer. Swipe right to dismiss.

    4.0s
    3
    12px
    8px
    16px
    0.40s

    Undo

    • JS
    • a11y

    The countdown bar shows how long "Undo" stays available. Hover or focus pauses it – people get the time they need (WCAG 2.2.1).

    5s
    Accent Sun
    Background Ink
    12px

    Island

    • CSS
    • aria-live

    A Dynamic-Island style pill: it stretches open with a springy overshoot, shows the news, then shrinks back.

    3.0s
    344px
    72px
    0.60s