sonner

Rich toast with title, description, action. Auto-dismisses.

status: stable js: trigger support: popover-api

Preview

This overlay stays hidden until triggered — open it in the live demo →

Markup

<div class="sonner-region" aria-live="polite"><div class="sonner sonner-success" role="status"><svg aria-hidden="true">…</svg><div class="sonner-content"><div class="sonner-title">T</div><div class="sonner-description">D</div></div></div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/sonner.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add sonner

Accessibility

Open via showPopover(); role=status/aria-live; full removal needs hidePopover()

Classes

.sonner .sonner-region .sonner-content .sonner-title .sonner-description .sonner-action .sonner-close .sonner-success .sonner-error .sonner-warning .sonner-info .sonner-loading

Dependencies

base/tokens