n-badge

You can display notification badges on avatars in Vue 3 by wrapping the avatar with a badge component, configuring the value prop to show counts, and using the dot prop for simple status indicators.

Yes, you can show a status dot instead of a number by enabling the dot prop on the badge, which renders a small indicator ideal for inline status labels without displaying a numeric value.

You can handle large notification counts by setting the max prop on the badge, which manages overflow handling by capping the displayed value and appending a plus sign for exceeded limits.

Yes, the badge supports standalone usage, allowing it to render independently without a wrapper element, making it flexible for inline labels and isolated status indicators across your layout.

You can customize the badge color and position by using the color prop for custom styling and the offset prop to adjust the spatial coordinates relative to its target element.

Yes, you can use custom text content inside the badge by utilizing its built-in slots, allowing you to render template content or text instead of relying solely on the standard numeric value prop.