# Notification Patterns

> Toast notifications, in-app alerts, badge systems, push notification UX, and notification preferences.

- Skill: `dragoon0x/notification-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/notification-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/notification-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/notification-patterns

---


# Notification Patterns

## Types

| Type | Duration | User Action | Use For |
|------|----------|-------------|---------|
| Toast | 3-5 sec auto-dismiss | None required | Success, info, non-critical |
| Banner | Until dismissed | Dismiss or act | Warnings, updates, promos |
| Inline alert | Persistent | Context-dependent | Form errors, status messages |
| Badge | Until cleared | Open to clear | Unread counts, new items |
| Push | N/A | Open or dismiss | Time-sensitive, actionable |

## Toast Rules
- Position: top-right (desktop) or top-center (mobile)
- Stack new toasts above old ones
- Auto-dismiss after 3-5 seconds for success/info
- Don't auto-dismiss errors (users need time to read)
- Include undo action for destructive operations ("Item deleted. Undo")
- Maximum 3 visible at once

## Notification Preferences
- Default to minimal (don't spam)
- Group by category (marketing, product updates, activity)
- Allow per-category opt-out
- Distinguish between in-app and push/email
- "Quiet hours" setting for push notifications

## Badge Design
- Red for urgent/unread, gray for neutral
- Show count for small numbers (1-99), "99+" for more
- Position: top-right corner of the icon
- Clear badge when content is viewed, not when notification center is opened