Badge
A number or status mark on buttons and icons.
Basic Usage
Displays the amount of new messages.
The amount is defined with value which accepts Number or String.
12
3
1
2
1
export function BadgeBasic() {
return (
<>
<ElBadge value={12} className="item" style={item}>
<ElButton>comments</ElButton>
</ElBadge>
<ElBadge value={3} className="item" style={item}>
<ElButton>replies</ElButton>
</ElBadge>
<ElBadge value={1} type="primary" className="item" style={item}>
<ElButton>comments</ElButton>
</ElBadge>
<ElBadge value={2} type="warning" className="item" style={item}>
<ElButton>replies</ElButton>
</ElBadge>
<ElBadge value={1} color="green" className="item" style={item}>
<ElButton>custom background</ElButton>
</ElBadge>
<span
style={{ ...dropdown, display: "inline-flex", verticalAlign: "top" }}
>
<ElDropdown
trigger="click"
menu={
<ElDropdownMenu>
<ElDropdownItem>
comments
<ElBadge value={12} className="mark" style={mark} />
</ElDropdownItem>
<ElDropdownItem>
replies
<ElBadge value={3} className="mark" style={mark} />
</ElDropdownItem>
</ElDropdownMenu>
}
>
<span style={dropdownLink}>
Click Me
<ElIcon className="el-icon--right">
<CaretBottom />
</ElIcon>
</span>
</ElDropdown>
</span>
</>
);
}
Max Value
You can customize the max value.
The max value is defined by property max which is a Number. Note that it only works when value is also a Number.
export function BadgeMax() {
return (
<>
<ElBadge value={200} max={99} className="item" style={itemWide}>
<ElButton>comments</ElButton>
</ElBadge>
<ElBadge value={100} max={10} className="item" style={itemWide}>
<ElButton>replies</ElButton>
</ElBadge>
</>
);
}
Customizations
Displays text content other than numbers. Or you can use the content slot to customize content.
When value is a String, it can display customized text. Or use the content slot.
export function BadgeCustomize() {
return (
<>
<ElBadge value="new" className="item" style={itemWide}>
<ElButton>comments</ElButton>
</ElBadge>
<ElBadge value="hot" className="item" style={itemWide}>
<ElButton>replies</ElButton>
</ElBadge>
<ElBadge
value={99}
className="item" style={itemWide}
content={(value) => (
<div style={customContent}>
<ElIcon>
<Message />
</ElIcon>
<span>{value}</span>
</div>
)}
>
<ElButton>share</ElButton>
</ElBadge>
</>
);
}
Red Dot
Use a red dot to mark content that needs to be noticed.
Use the attribute is-dot. It is a Boolean.
export function BadgeDot() {
return (
<>
<ElBadge isDot className="item" style={itemWide}>query</ElBadge>
<ElBadge isDot className="item" style={itemWide}>
<ElButton icon={<Share />} type="primary" />
</ElBadge>
</>
);
}
Offset 2.7.0
Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.
export function BadgeOffset() {
return (
<ElBadge value={1} offset={[10, 5]} className="item" style={item}>
<ElButton> offset</ElButton>
</ElBadge>
);
}
API
Attributes
| Name | Description | Type | Default |
|---|
| value | display value. | string / number | '' |
| max | maximum value, shows {max}+ when exceeded. Only works if value is a number. | number | 99 |
| is-dot | if a little dot is displayed. | boolean | false |
| hidden | hidden badge. | boolean | false |
| type | badge type. | enum | danger |
| show-zero 2.6.0 | Whether to show badge when value is zero. | boolean | true |
| color 2.6.3 | background color of the dot | string | |
| offset 2.7.0 | offset of badge | array | [0, 0] |
| badge-style 2.7.1 | custom style of badge | object | — |
| badge-class 2.7.1 | custom class of badge | string | — |
Slots
| Name | Description | Type |
|---|
| default | customize default content | - |
| content 2.9.1 | customize badge content | object |
