Deft
Ask AI

Search

Search skills, authors and topics

emilkowalski / skills

ask-sonner

Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and icons, positioning and multiple toasters. Use when working with Sonner or troubleshooting it — toasts that don't appear, appear twice, lose their styles, ignore Tailwind classes, sit behind a modal, or don't follow dark mode.

View sourceReactInteractionTooling

Install

npx skills add https://github.com/emilkowalski/skills --skill ask-sonner

Sonner API Reference

Exact props, types, and defaults. Options passed to toast() override the same options set via the Toaster's toastOptions.

<Toaster />

PropTypeDefaultDescription
themestring'light''light', 'dark', or 'system'.
richColorsbooleanfalseMakes error and success states more colorful.
expandbooleanfalseToasts expanded by default (otherwise they expand on hover).
visibleToastsnumber3Amount of visible toasts.
idstring–Toaster id, targeted by toast()'s toasterId option.
positionstring'bottom-right'top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.
closeButtonbooleanfalseAdds a close button to all toasts.
offsetstring | number | object'32px'Offset from screen edges. Object form is per-side: { bottom: '24px', right: '16px' }.
mobileOffsetstring | number | object'16px'Offset when screen width < 600px.
swipeDirectionsarraybased on positionAllowed swipe-to-dismiss directions.
dirstring'ltr'Text directionality.
hotkeystring⌥/alt + TKeyboard shortcut that focuses the toaster area.
invertbooleanfalseDark toasts in light mode and vice versa.
toastOptionsobject–Default options applied to every toast (any toast() option below).
gapnumber14Gap between toasts when expanded.
iconsobject–Replace default icons: { success, info, warning, error, loading }; null removes one.

toast() options

toast(message, options) — message is a string, JSX, or a function returning JSX. Returns the toast's id.

OptionTypeDefaultDescription
descriptionReactNode–Renders underneath the title; also accepts a function returning JSX.
closeButtonbooleanfalseAdds a close button.
invertbooleanfalseDark toast in light mode and vice versa.
durationnumber4000Milliseconds before auto-close. Infinity persists the toast.
positionstring'bottom-right'Position of this toast.
dismissiblebooleantrueIf false, the user cannot dismiss the toast.
iconReactNode–Icon in front of the text; null removes the default.
actionReactNode | { label, onClick }–Primary button; clicking closes the toast unless onClick calls event.preventDefault().
cancelReactNode | { label, onClick }–Secondary button; clicking closes the toast.
actionButtonStyleobject{}Styles for the action button.
cancelButtonStyleobject{}Styles for the cancel button.
idstring–Custom id; calling toast() again with the same id updates the existing toast.
testIdstring–Rendered as data-testid for e2e tests.
toasterIdstring–Id of the toaster to render this toast in.
styleobject–Inline styles for the toast.
classNamesobject–Classes per part: { toast, title, description, actionButton, cancelButton, closeButton }. Needs !important unless unstyled.
unstyledbooleanfalseRemoves all default styles.
onDismiss(toast) => void–Fires when the close button is clicked or the toast is swiped away.
onAutoClose(toast) => void–Fires when the toast closes automatically after duration.
containerAriaLabelstring'Notifications'ARIA label for the toast container.

Functions

FunctionPurpose
toast(message, opts?)Render a toast; returns its id.
toast.success / .error / .info / .warning(message, opts?)Typed toast with matching icon.
toast.loading(message, opts?)Toast with a spinner; update it by id.
toast.promise(promise, { loading, success, error })Loading toast that resolves with the promise; success/error accept strings, JSX, functions of the result, or objects of toast options.
toast.custom((t) => jsx, opts?)Headless toast — your JSX, Sonner's behavior.
toast.dismiss(id?)Dismiss one toast, or all when called without an id.
toast.getActiveToasts()All active toasts, usable outside React.
useSonner()React hook returning { toasts }.