ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

category	type	title	cover	coverDark
Components	Data Display	Badge	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original

Small numerical value or status descriptor for UI elements.

When To Use

Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.

<a-badge :count="5">
  <a href="#" class="head-example" />
</a-badge>

<a-badge :count="5" />

Property	Description	Type	Default	Version
color	Customize Badge dot color	string	-	1.5.0
count	Number to show in badge	number\|string \| slot
dot	Whether to display a red dot instead of `count`	boolean	`false`
offset	set offset of the badge dot, like [x, y]	[number\|string, number\|string]	-
overflowCount	Max count to show	number	99
showZero	Whether to show badge when `count` is zero	boolean	`false`
status	Set Badge as a status dot	`success` \| `processing` \| `default` \| `error` \| `warning`	`''`
text	If `status` is set, `text` sets the display text of the status `dot`	string	`''`
numberStyle	sets the display style of the status `dot`	object	''
title	Text to show when hovering over the badge	string	`count`

Property	Description	Type	Default
color	Customize Ribbon color	string	-
placement	The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR)	`start` \| `end`	`end`
text	Content inside the Ribbon	string \| VNode \| slot	-