Badge

Introduction

The badge component is used to display unread message counts or status indicators next to icons or text.
You can use <MYBadge></MYBadge> or <MYBadge /> to create a badge.

Numeric Content

Use the content prop to set the badge content.

Code Demo

5

<template>
    <MYBadge :content='5'>
        <MYButton type='primary'>Messages</MYButton>
    </MYBadge>
</template>

展开代码

Dot Mode

Use the dot prop to display a small red dot instead of a specific number.

Code Demo

<template>
    <MYBadge dot>
        <MYButton type='primary'>Notifications</MYButton>
    </MYBadge>
</template>

展开代码

Custom Color

Use the color prop to customize the badge color.

Code Demo

8

<template>
    <MYBadge :content='8' color='#52c41a'>
        <MYButton type='primary'>Green Badge</MYButton>
    </MYBadge>
</template>

展开代码

Position Adjustment

Use the position prop to adjust the badge position.

Code Demo

3

3

3

3

<template>
    <div style='display: flex; gap: 20px;'>
        <MYBadge :content='3' position='top-left'>
            <MYButton type='primary'>Top Left</MYButton>
        </MYBadge>
        <MYBadge :content='3' position='top-right'>
            <MYButton type='primary'>Top Right</MYButton>
        </MYBadge>
        <MYBadge :content='3' position='bottom-left'>
            <MYButton type='primary'>Bottom Left</MYButton>
        </MYBadge>
        <MYBadge :content='3' position='bottom-right'>
            <MYButton type='primary'>Bottom Right</MYButton>
        </MYBadge>
    </div>
</template>

展开代码

Max Value Limit

Use the max prop to limit the maximum numeric value displayed on the badge.

Code Demo

99+

10+

5+

<template>
    <div style='display: flex; gap: 20px;'>
        <MYBadge :content='100' :max='99'>
            <MYButton type='primary'>Messages</MYButton>
        </MYBadge>
        <MYBadge :content='100' :max='10'>
            <MYButton type='primary'>Messages</MYButton>
        </MYBadge>
        <MYBadge :content='8' :max='5'>
            <MYButton type='primary'>Messages</MYButton>
        </MYBadge>
    </div>
</template>

展开代码

Standalone Usage

The badge can also be used independently without wrapping any content.

Code Demo

5

New Message!

<template>
    <div style='display: flex; gap: 20px; align-items: center;'>
        <MYBadge :content='5' />
        <MYBadge content='New Message!' />
        <MYBadge dot />
    </div>
</template>

展开代码

Combined Usage

Finally, here's an example combining multiple APIs to create a badge:

Code Demo

<template>
    <MYBadge 
        :content='25' 
        color='#8d4dd1'
        position='bottom-right'
        :max='20'
        dot
    >
        <MYButton 
            type='primary'
            size='large'
        >
            Combined Badge
        </MYButton>
    </MYBadge>
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Options	Default
content	Badge content	string | number	—	''
dot	Whether to show a small red dot	boolean	—	false
color	Badge color	string	Supports hex colors or color names	'#ff4d4f'
position	Badge position	string	top-right/top-left/bottom-right/bottom-left	'top-right'
max	Maximum value limit	number	—	99

Type Definitions

interface BadgeProps {
  content?: string | number;
  dot?: boolean;
  color?: string;
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  max?: number;
}