Display a small badge or a red dot to the top-right of its child.
Register component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';
import { Badge } from 'vant';
const app = createApp();
app.use(Badge);
<van-badge :content="5">
<div class="child" />
</van-badge>
<van-badge :content="10">
<div class="child" />
</van-badge>
<van-badge content="Hot">
<div class="child" />
</van-badge>
<van-badge dot>
<div class="child" />
</van-badge>
<style>
.child {
width: 40px;
height: 40px;
background: #f2f3f5;
border-radius: 4px;
}
</style>
<van-badge :content="20" max="9">
<div class="child" />
</van-badge>
<van-badge :content="50" max="20">
<div class="child" />
</van-badge>
<van-badge :content="200" max="99">
<div class="child" />
</van-badge>
<van-badge :content="5" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge :content="10" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot color="#1989fa">
<div class="child" />
</van-badge>
Use content slot to custom the content of badge.
<van-badge>
<div class="child" />
<template #content>
<van-icon name="success" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="cross" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="down" class="badge-icon" />
</template>
</van-badge>
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
Use position prop to set the position of badge.
<van-badge :content="10" position="top-left">
<div class="child" />
</van-badge>
<van-badge :content="10" position="bottom-left">
<div class="child" />
</van-badge>
<van-badge :content="10" position="bottom-right">
<div class="child" />
</van-badge>
<van-badge :content="20" />
<van-badge :content="200" max="99" />
| Attribute | Description | Type | Default |
|---|---|---|---|
| content | Badge content | number | string | - |
| color | Background color | string | #ee0a24 |
| dot | Whether to show dot | boolean | false |
| max | Max value, show {max}+ when exceed, only works when content is number | number | string | - |
offset v3.0.5 | Offset of badge dot | [number | string, number | string] | - |
show-zero v3.0.10 | Whether to show badge when content is zero | boolean | true |
position v3.2.7 | Badge position, can be set to top-left bottom-left bottom-right | string | top-right |
| Name | Description |
|---|---|
| default | Default slot |
| content | Custom badge content |
The component exports the following type definitions:
import type { BadgeProps, BadgePosition } from 'vant';
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --van-badge-size | 16px | - |
| --van-badge-color | var(--van-white) | - |
| --van-badge-padding | 0 3px | - |
| --van-badge-font-size | var(--van-font-size-sm) | - |
| --van-badge-font-weight | var(--van-font-weight-bold) | - |
| --van-badge-border-width | var(--van-border-width-base) | - |
| --van-badge-background-color | var(--van-danger-color) | - |
| --van-badge-dot-color | var(--van-danger-color) | - |
| --van-badge-dot-size | 8px | - |
| --van-badge-font-family | -apple-system-font, Helvetica Neue, Arial, sans-serif | - |