El Badge

Badge Component

Badge component displays a number or status mark on buttons and icons for notifications and status indicators.

When to Use

• Notification counts
• Status indicators
• Unread message badges
• Attention markers

Basic Usage

  
    comments
  
  
    replies
  

Max Value

  
    comments
  

Customizations

  
    comments
  
  
    replies
  

Red Dot

  
    query
  
  
    
  

Offset

  
    Offset badge
  

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | value | Display value | string \| number | '' | | max | Maximum value, shows {max}+ when exceeded | number | 99 | | is-dot | Display as a dot | boolean | false | | hidden | Hidden badge | boolean | false | | type | Badge type | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' | 'danger' | | show-zero | Show badge when value is zero | boolean | true | | color | Background color of the dot | string | — | | offset | Offset of badge | [number, number] | [0, 0] | | badge-style | Custom style of badge | CSSProperties | — | | badge-class | Custom class of badge | string | — |

Slots

| Name | Description | Type | |------|-------------|------| | default | Customize default content | — | | content | Customize badge content | { value: string } |

Common Patterns

Notification Badge

  
    
  

import { ref } from 'vue'

const unreadCount = ref(5)

Best Practices

1. Use max to prevent large numbers from overflowing
2. Use is-dot for simple status indicators
3. Set hidden when count is zero and show-zero is false

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.