Badge
A number or status mark on buttons and icons.
Basic usage
Displays the amount of new messages.
<template>
<b-badge :value="10">
<b-button small>Button</b-button>
</b-badge>
</template>
Max Value
You can customize the max value.
<template>
<b-badge :value="100">
<b-button small>Button</b-button>
</b-badge>
</template>
Customizations
Displays text content other than numbers or different styles.
<template>
<b-space wrap>
<b-badge value="new" class="mr-4">
<b-button small>Button</b-button>
</b-badge>
<b-badge value="6" type="primary">
<b-button small>Button</b-button>
</b-badge>
<b-badge value="6" type="info">
<b-button small>Button</b-button>
</b-badge>
<b-badge value="6" type="warning">
<b-button small>Button</b-button>
</b-badge>
<b-badge value="6" type="success">
<b-button small>Button</b-button>
</b-badge>
<b-badge value="6" type="danger">
<b-button small>Button</b-button>
</b-badge>
</b-space>
</template>
Red Dot
Use a red dot to mark content that needs to be noticed.
<template>
<b-badge is-dot content-class="right-[6px] top-[6px]">
<b-button :icon="NotificationsOn" rounded />
</b-badge>
</template>
<script setup lang="ts">
import { NotificationsOn } from '@bigin/icons-vue'
</script>
Badge Attributes
Attribute | 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 | primary / success / warning / danger / info | danger |
content-class | CSS class of content | string | — |
Badge Slots
Name | Description |
---|
default | customize default content |