Sonner

@/components/kamod-ui/sonner

Installation

Import Sonner and helper functions from `@/components/kamod-ui/sonner`.

pnpm add @kamod-ch/ui

Usage

Mount Sonner once near app root, then trigger notifications from events.

import { Sonner } from "@/components/kamod-ui/sonner";
<Sonner />

Basic Toast

Display a short success message after an action.

Dismissible Toast

Close notifications programmatically if workflow changes.

API Reference

Props, slots and variants for this component.

Sonner

Sonner component props and accepted values.

PropTypeDefault
sonner(args: { title: string; description?: string }) => stringfunction
dismissSonner(id: string) => voidfunction
SonnerNotification outlet componentmounted

Accessibility Notes

Ensure toast messages stay short, avoid critical-only notifications, and keep important outcomes visible in page content.