vant/src/badge

Badge

Intro

Display a small badge or a red dot to the top-right of its child.

Install

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);

Usage

Basic Usage

<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>

Max

<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>

Custom Color

<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>

Custom Content

Use content slot to custom :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;
}

Standalone

<van-badge :content="20" />

<van-badge :content="200" max="99" />

API

Props

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

Slots

Name	Description
default	Default slot
content	Custom badge content

CSS Variables

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	-