Display numeric counts or status markers on UI elements.
npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-badge
Please help me install this Agent Skill. Skill: el-badge Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-badge Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-badge
Badges provide a compact visual indicator for counts or status markers, enabling users to quickly perceive activity or priority without inspecting details.
Wrap a target element with el-badge and provide a value to display a notification count.
High-intent search queries and answers about installing and using this skill.
To display notification counts on interactive elements in Vue, wrap the target element with a badge component and set the value property to the numeric count you want to show.
A status indicator without a number in Element Plus is created by enabling the is-dot property, which renders a simple dot marker with optional color and offset customization.
To handle large numbers or zero states on a Vue badge, use the max property to cap displayed values and toggle the show-zero property to control visibility when the count is zero.
You can customize badge styling to match your design system by applying custom CSS through the color, badge-style, and badge-class properties, or by using the default and content slots.
Use a dot indicator instead of a numeric count when you need a simple status signal that conveys activity or priority without requiring the user to inspect specific numerical details.
jiaiyanDisplay counts and status indicators on Vue 3 UI elements with Naive UI badges.
KaakatiImplement Turbo and Stimulus patterns for real-time Rails UI updates.
jiaiyanAutomate guided usage of Element Plus el-button components in Vue 3 projects.
kriscendobotStyle native HTML select elements with CSS pseudo-elements and pseudo-classes.
