🌏 Translated with the assistance of DeepSeek and ChatGPT

Badge

A small badge component used to display counts, status, or indicators attached to other elements (for example, buttons or icons).

Basic

Use Badge to attach a small indicator to other elements.

8

<template>
	<px-space>
		<px-badge value="8">
			<px-button>Inbox</px-button>
			<template #icon>
				<IconEnvelope></IconEnvelope>
			</template>
		</px-badge>
	</px-space>
</template>

<script setup lang="ts">
import { IconEnvelope } from '@pixelium/web-vue/icon-hn/es'
</script>

Maximum

max sets the maximum value for the badge. When exceeded, it will be displayed as ${max}+.

5

99+

```vue
<template>
	<px-space>
		<px-badge value="5">
			<px-avatar></px-avatar>
		</px-badge>
		<px-badge :value="120" :max="99">
			<px-avatar></px-avatar>
		</px-badge>
	</px-space>
</template>

```

Dot Mode

Show a small dot only by setting dot to true.

<template>
	<px-space>
		<px-badge dot>
			<px-button>Messages</px-button>
		</px-badge>
		<px-badge dot>
			<IconBell :size="24"></IconBell>
		</px-badge>
	</px-space>
</template>
<script setup lang="ts">
import { IconBell } from '@pixelium/web-vue/icon-hn/es'
</script>

Themes

Badge supports multiple themes: 'primary', 'sakura', 'success', 'warning', 'danger' and 'notice'.

1

1

4

5

1

4

<template>
	<px-space>
		<px-badge value="1" theme="primary">
			<px-button>Primary</px-button>
		</px-badge>
		<px-badge value="1" theme="notice">
			<px-button theme="notice">Notice</px-button>
		</px-badge>
		<px-badge value="4" theme="success">
			<px-button theme="success">Success</px-button>
		</px-badge>
		<px-badge value="5" theme="warning">
			<px-button theme="warning">Warning</px-button>
		</px-badge>
		<px-badge value="1" theme="danger">
			<px-button theme="danger">Danger</px-button>
		</px-badge>
		<px-badge value="4" theme="sakura">
			<px-button theme="sakura">Sakura</px-button>
		</px-badge>
		<px-badge theme="sakura" dot>
			<px-button theme="sakura">Dot</px-button>
		</px-badge>
	</px-space>
</template>

Offset

Use offset to adjust the badge position. Accepts a number, a tuple [x: number, y: number], or an object { x: number, y: number }.

?

!

<template>
	<px-space>
		<px-badge value="?" :offset="[-36, 0]" theme="warning">
			<px-button theme="warning" shape="circle">?</px-button>
		</px-badge>
		<px-badge value="!" theme="success">
			<px-button theme="success" shape="square">!</px-button>
		</px-badge>
	</px-space>
</template>

Custom Color

Set color to customize the badge background; set borderColor to change the badge border color.

99

<template>
	<px-badge value="99" color="#6b7280" borderColor="#441">
		<px-button>Custom</px-button>
	</px-badge>
</template>

Visibility

Control whether the badge is visible with the visible prop.

5

<template>
	<px-space>
		<px-badge :visible="show" value="5">
			<px-button theme="info">Toggle</px-button>
		</px-badge>
		<px-button @click="show = !show">Toggle Badge</px-button>
	</px-space>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

Content Slot

Use the content slot to fully customize the badge content when dot is false.

HOT

* HOT

<template>
	<px-space>
		<px-badge :value="value">
			<px-button theme="info">Default</px-button>
		</px-badge>

		<px-badge :value="value">
			<template #content>
				<span>* {{ value }}</span>
			</template>
			<px-button theme="info">Custom</px-button>
		</px-badge>
	</px-space>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('HOT')
</script>

API

BadgeProps

Attribute	Type	Optional	Default	Description	Version
value	number | string	True	''	The value or string displayed on the badge.	0.1.0
max	number	True		The maximum value. If exceeded, it displays as ${max}+.	0.1.0
dot	boolean	True	false	Whether to display as a small dot.	0.1.0
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice'	True	'danger'	Badge's theme.	0.1.0
visible	boolean	True	true	Whether it is visible.	0.1.0
offset	number | [number, number] | { x?: number; y?: number }	True	0	The offset of the badge marker.	0.1.0
color	string	True		Custom background color, supporting CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', and hexadecimal numbers with lengths of 3, 4, 6, or 8 digits.	0.1.0
borderColor	string	True		Custom border color.	0.1.0
contentProps	RestAttrs	True		Additional properties passed through to the badge content container DOM.	0.1.0
pollSizeChange	boolean	True	false	Enable polling for component size changes, which may affect performance. Commonly used when the size is affected by container elements, leading to abnormal canvas rendering.	0.1.0

BadgeSlots

Slot	Parameter	Description	Version
default		The slot for the wrapped attached element.	0.1.0
content	value: string | string	The slot for badge content (effective when dot is false).	0.1.0