n-badge

Name: n-badge
Availability: InStock
Author: jiaiyan

Display counts and status indicators on Vue 3 UI elements with Naive UI badges.

8|3|Updated Mar 13, 2026

Search Tags:#frontend #vue3 #notification #badge #ui-component #naive-ui

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-badge

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-badge
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-badge
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-badge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Badge components streamline status indicators and notification counts directly on UI elements, removing the need for ad-hoc markup and manual state tracking.

Core Features & Use Cases

Multiple Types: default, info, success, warning, error
Dot Mode: small dot indicators for status
Overflow Handling: max value support for large counts
Custom Content: allow text or template content
Position & Visibility: offset and toggle visibility for flexible layouts
Standalone Usage: can render without a wrapper

Quick Start

Attach a badge to an icon or avatar and configure value, type, and dot to reflect status.

Frequently Asked Questions about n-badge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I display notification badges on avatars in a Vue 3 application?▼

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.

Can I show a status dot instead of a number using a UI badge?▼

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.

How do I handle large notification counts without breaking the UI layout?▼

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.

Does this badge component work as a standalone element without a wrapper?▼

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.

How do I customize the badge color and position in Naive UI?▼

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.

Can I use custom text content inside a Vue 3 badge component?▼

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.