Library. Sonner. Создание системы Toast

🧱 Суть

Для сложного дизайна уведомлений можно вынести стили и поведение в собственный слой над Sonner.

📦 Проблема

При большом количестве уведомлений повторение классов приводит к разрозненным стилям.

Например:

toast.success('Saved', {
	className: 'border-green-500 ...'
})

во многих местах становится сложно поддерживать.

✅ Решение

Создать единый компонент или утилиту с вариантами стилей.

💻 Код

Вариант через class-variance-authority

Создаём варианты Toast:

const toastVariants = cva(
	"backdrop-blur-md bg-white/20 dark:bg-black/70 border-2 rounded-2xl shadow-lg",
	{
		variants: {
			type: {
			    success: "border-l-4 border-l-green-500",
			    error: "border-l-4 border-l-red-500",
			},
		},
	}
);

Использование:

notify.success('Успешно!', {
	className: 'font-medium',
});

Кастомный Toast

Если нужен полностью свой UI:

toast.custom((id) => (
	<div className="
		flex items-center gap-3
		p-4
		backdrop-blur-xl
		bg-white/10
		border
		rounded-full
		shadow-lg
	">
		<Loader2 className="w-5 h-5 animate-spin" />
	
		<p className="font-medium">
			Загрузка данных...
		</p>
	
		<button onClick={() => toast.dismiss(id)}>
			<X className="w-4 h-4" />
		</button>
	</div>
));

🎯 Вывод

Простые уведомления → toastOptions.
Большой проект → отдельная утилита notify.
Сложный дизайн → toast.custom.
class-variance-authority помогает держать варианты Toast в одном месте.

LETUNOFF DOCS

Навигация