Badge

Mini-program developers can use the Badge component to create badges to notify users of pending tasks or new updates in mini programs. It effectively grabs users' attention and encourages them to take relevant actions. This topic covers the user experience, attributes, and sample code for the Badge component.

User experience

The following image shows different badges on a mini-program interface:

badge1.jpg.png

Attributes

Attribute

Data type

Default

Description

className

String

N/A

The class name for the component's root node.

style

Object

N/A

The style for the component.

type

String

dot

The badge type. Valid values are:

  • dot: A red solid dot.
  • number: A round bubble that displays numbers. If the number is greater than 99, it is displayed as 99+.
  • text: A round bubble that displays text.
  • bubble: A speech bubble.

bgColor

String

N/A

The background color of the badge.

text

String, Number, Slot

N/A

The content displayed on the badge. Specify this attribute using numbers or text.

Notes:

  • Numbers larger than 99 are displayed as 99+.
  • No content is displayed if this attribute is not specified.

position

String

top-right

The badge's position to the container. Valid values are:

  • top-left: Place the badge at the top-left corner of the container.
  • top-right: Place the badge at the top-right corner of the container.
  • top-center: Place the badge at the center of the top edge of the container.
  • left: Place the badge at the center of the left edge of the container.
  • right: Place the badge at the center of the right edge of the container.
  • bottom-left: Place the badge at the bottom-left corner of the container.
  • bottom-center: Place the badge at the center of the bottom edge of the container.
  • bottom-right: Place the badge at the bottom-right corner of the container.

offsetX

String

'-50%'

The horizontal offset of the badge.

offsetY

String

'-50%'

The vertical offset of the badge.

stroke

Boolean

false

Whether to outline the badge.

Sample code

The following sample code demonstrates how to create badges that are shown in User experience:

.axml

copy
<ant-container title="Basic usage">
  <view class="badge-list">
    <ant-badge
      type="dot"
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 2 }}"
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 100 }}"
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="new"
      position="top-right">
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

<ant-container title="Outlined badges">
  <view class="badge-list">
    <ant-badge
      type="dot"
      stroke
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 1 }}"
      stroke
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 100 }}"
      stroke
      position="top-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="new"
      stroke
      position="top-right">
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

<ant-container title="Customize background and position">
  <view class="badge-list">
    <ant-badge
      position="right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="1"
      position="bottom-right">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="number"
      text="{{ 100 }}"
      stroke
      bgColor="#1677FF">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="text"
      text="new"
      bgColor="#FF9F18"
      position="top-center">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="new"
      stroke
      bgColor="#34B368">
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

<ant-container title="Offset badges">
  <view class="badge-list">
    <ant-badge
      type="text"
      text="1"
      offsetX="-20px"
      offsetY="0px">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="text"
      text="1"
      position="bottom-right"
      offsetX="-20px"
      offsetY="-14px">
      <view class="box" />
    </ant-badge>
    <ant-badge
      type="bubble"
      text="new"
      position="top-right"
      offsetX="2px"
      offsetY="-8px">
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

<ant-container title="Customize badge content">
  <view class="badge-list">
    <ant-badge
      type="text"
      position="top-right">
      <ant-icon
        type="GlobalOutline"
        slot="text" />
      <view class="box" />
    </ant-badge>
  </view>
</ant-container>

.js

copy
Page({
    data: {},
});

.acss

copy
page {
  padding: 24rpx;
}
.badge-list {
  display: flex;
}
.ant-badge {
  margin-right: 16px;
}
.box {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 8px;
  background: #b3b3b3;
}

.json

copy
{
  "defaultTitle": "Badge",
  "usingComponents": {
    "ant-badge": "antd-mini/es/Badge/index",
    "ant-container": "antd-mini/es/Container/index",
    "ant-icon": "antd-mini/es/Icon/index"
  }
}