Avatars

Personalize your toast notifications by adding avatars. Perfect for social interactions, user mentions, or chat-like notifications.

Avatar Types

Nuxt Notify supports three types of avatars:

Image Avatar: Display a user's profile picture
Icon Avatar: Show an icon
Text Avatar: Display initials or short text

Image Avatar

Display a user's profile picture:

Example

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "John Doe mentioned you",
  description: "In the project discussion",
  avatar: {
    type: "image",
    src: "https://i.pravatar.cc/150?img=12",
  },
});
</script>

Icon Avatar

Use an icon as the avatar:

Example

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Achievement Unlocked",
  description: "You earned a new badge!",
  avatar: {
    type: "icon",
    icon: "i-lucide-trophy",
  },
});
</script>

Text Avatar

Display initials or short text:

Example

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "New message from Sarah",
  description: "Hey, are you available for a quick call?",
  avatar: {
    type: "text",
    text: "SK",
  },
});
</script>

Use Cases

Example

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "Emma liked your post",
  description: '"Amazing work on the new design!"',
  avatar: {
    type: "image",
    src: "https://i.pravatar.cc/150?img=5",
  },
});
</script>

Team Collaboration

Example

<script setup>
const toast = useToast();

toast.add({
  type: "warning",
  title: "Alex assigned you a task",
  description: "Review Q4 marketing proposal",
  avatar: {
    type: "text",
    text: "AM",
  },
  actions: [{ label: "View Task", onClick: () => {} }],
});
</script>

System Notifications with Icons

Example

<script setup>
const toast = useToast();

toast.add({
  type: "success",
  title: "Backup Complete",
  description: "Your data has been backed up successfully",
  avatar: {
    type: "icon",
    icon: "i-lucide-cloud-upload",
  },
});
</script>

Chat Messages

Example

<script setup>
const toast = useToast();

toast.add({
  type: "info",
  title: "Mike sent a message",
  description: "Can you review the latest changes?",
  avatar: {
    type: "image",
    src: "https://i.pravatar.cc/150?img=8",
  },
  actions: [
    { label: "Reply", onClick: () => {} },
    { label: "View", onClick: () => {} },
  ],
});
</script>

Avatar with All Features

Combine avatars with other features:

Example

<script setup>
const toast = useToast();

toast.add({
  type: "warning",
  title: "Review Required",
  description: "Lisa needs your approval on the design",
  avatar: {
    type: "image",
    src: "https://i.pravatar.cc/150?img=45",
  },
  actions: [
    { label: "Approve", onClick: () => {} },
    { label: "Reject", onClick: () => {} },
  ],
  showProgress: true,
  duration: 10000,
});
</script>

Popular Icons for Avatar

Some commonly used icons for system avatars:

Examples

User-related
- i-lucide-user
- i-lucide-users
- i-lucide-user-check

Actions
- i-lucide-bell
- i-lucide-mail
- i-lucide-message-square

System
- i-lucide-cloud
- i-lucide-cloud-upload
- i-lucide-download
- i-lucide-shield

Achievements
- i-lucide-trophy
- i-lucide-star
- i-lucide-award

Pro Tip: Use image avatars for person-to-person interactions, icon avatars for system events, and text avatars when you don't have a profile picture but want to show initials.

Best Practices

Image URLs

Use HTTPS URLs for security
Ensure images are optimized (small file size)
Use square images (1:1 ratio) for best results
Consider using a CDN for faster loading

Text Avatars

Keep text short (1–2 characters max)
Use uppercase for consistency
Perfect for user initials: "JD" for John Doe

Icon Selection

Choose icons that represent the action or context
Stick to a consistent icon set
Ensure icons are recognizable at small sizes