skills.rest
UCloud-FE
UCloud-FEOFFICIAL
Explore all skills by this author →
GitHub

cpn-basic-badge

Apply UDesign Badge component settings in React UI projects.

1|Updated Apr 14, 2026
Search Tags:#ui#react#demo#design-system#badge#placement
One-click install
npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-badge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cpn-basic-badge
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-badge
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-badge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides AI to correctly apply the UDesign Badge component in UI development, ensuring consistent usage and reducing missteps when adding badges to interfaces.

Core Features & Use Cases

  • Standard import and usage patterns for the Badge component in React projects.
  • Supports configurations such as value, dot mode, placement, color, and maxValue to maintain consistent visuals.
  • Use case: add informative badges to dashboards, lists, and cards to indicate counts or status at a glance.

Quick Start

Import the Badge component from the UDesign React package and render a basic badge in a demo container to verify correct behavior.

Frequently Asked Questions about cpn-basic-badge

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

FAQPage Schema
How do I add a badge to a React dashboard component?▼

Import the UDesign Badge component into your React UI and configure properties like value, dot, placement, color, and maxValue to display counts or status on dashboards and lists at a glance.

Can I display just a status dot instead of a number using the Badge component?▼

Yes, you can display a status dot by enabling dot mode in the UDesign Badge component, rendering visual status indicators without numeric values.

Does the UDesign Badge require any external dependencies to function?▼

No, the UDesign Badge requires no external dependencies. Import it from the UDesign React package to ensure usage adheres to project conventions and maintains ecosystem consistency.

How do I cap large notification counts on a React UI badge?▼

Cap large notification counts by configuring the maxValue property on the UDesign Badge component, limiting displayed numbers when counts exceed the defined threshold to maintain visual consistency.

What is the best way to position a badge on dashboard cards?▼

Position badges on dashboard cards by configuring the placement property on the UDesign Badge component, ensuring correct alignment with UI elements to maintain consistent visual layouts.

Related Skills

Explore More Design & Creative Skills→
UCloud-FEUCloud-FE
1

cpn-basic-tree

Integrate and use the UDesign Tree component in React projects with documented API props and usage guidelines.

Official
Advanced
AnsteorraAnsteorra
6

badge-list-consistency

Enforce identical permission checks between notification badge counts and linked list views.

Official
Intermediate
Aaron-TawilAaron-Tawil

building-streamlit-dashboards

Create interactive Streamlit dashboards with KPI cards and data tables.

Community
Intermediate
kimjuyoung1127kimjuyoung1127

page-onboarding-notification-upgrade

Upgrade the /onboarding/notification route with deterministic states and telemetry.

Community
Intermediate