Badge - Semi Design Next

Demos

How to import

<script setup lang="ts">
    import { Badge } from '@fibrous/semi-ui-vue';
</script>

Basic Usage

The basic type of Badge is count. The dot property changes a badge into a small dot. The two are mutually exclusive, giving priority to rendering dot.

count accepts a number or a string. Put a node in the #count slot instead, which is rendered directly and wins when both are given. Bind numbers with :count="5": count="5" is a string and is never cut off by overflowCount.

BM5

YL

XZ

WFNEW

Code

<script setup lang="ts">
    import { IconLock } from '@fibrous/semi-icons-vue';
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <div>
        <Badge :count="5">
            <Avatar color="blue" shape="square" :style="style">BM</Avatar>
        </Badge>
        <br />
        <br />
        <Badge dot>
            <Avatar color="blue" shape="square" :style="style">YL</Avatar>
        </Badge>
        <br />
        <br />
        <Badge>
            <template #count>
                <IconLock :style="{ color: 'var(--semi-color-primary)' }" />
            </template>
            <Avatar color="light-blue" shape="square" :style="style">XZ</Avatar>
        </Badge>
        <br />
        <br />
        <Badge count="NEW">
            <Avatar color="light-blue" shape="square" :style="style">WF</Avatar>
        </Badge>
    </div>
</template>

Maximum Value

You can use the overflowCount property to cap the number value of the badge content. When the actual value exceeds that value, it will be formatted into ${overflowCount}+.

ZH99

HS100

DY10+

TT999+

Code

<script setup lang="ts">
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <div>
        <Badge :count="99">
            <Avatar color="teal" shape="square" :style="style">ZH</Avatar>
        </Badge>
        <br />
        <br />
        <Badge :count="100">
            <Avatar color="teal" shape="square" :style="style">HS</Avatar>
        </Badge>
        <br />
        <br />
        <Badge :count="99" :overflowCount="10">
            <Avatar color="green" shape="square" :style="style">DY</Avatar>
        </Badge>
        <br />
        <br />
        <Badge :count="1000" :overflowCount="999">
            <Avatar color="green" shape="square" :style="style">TT</Avatar>
        </Badge>
    </div>
</template>

Position

You can use the position property to set the position of the badge to its children. The prop uses one of: leftTop, leftBottom, rightTop(default), rightBottom. Under an RTL ConfigProvider the default is leftTop.

ZHVIP

HSVIP

DYVIP

TTVIP

Code

<script setup lang="ts">
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <div>
        <Badge count="VIP" position="rightTop" type="danger">
            <Avatar color="amber" shape="square" :style="style">ZH</Avatar>
        </Badge>
        <br />
        <br />
        <Badge count="VIP" position="rightBottom" type="danger">
            <Avatar color="amber" shape="square" :style="style">HS</Avatar>
        </Badge>
        <br />
        <br />
        <Badge count="VIP" position="leftTop" type="danger">
            <Avatar color="orange" shape="square" :style="style">DY</Avatar>
        </Badge>
        <br />
        <br />
        <Badge count="VIP" position="leftBottom" type="danger">
            <Avatar color="orange" shape="square" :style="style">TT</Avatar>
        </Badge>
    </div>
</template>

Theming

You can use the theme and type prop to customize the styling. theme supports the following values: solid(default), light, inverted.

XZ5

YB5

LX5

Code

<script setup lang="ts">
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const bgStyle = {
        padding: '8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <div :style="{ display: 'flex' }">
        <div :style="bgStyle">
            <Badge :count="5" theme="solid">
                <Avatar color="indigo" shape="square" :style="style">XZ</Avatar>
            </Badge>
        </div>
        <div :style="bgStyle">
            <Badge :count="5" theme="light">
                <Avatar color="indigo" shape="square" :style="style">YB</Avatar>
            </Badge>
        </div>
        <div :style="bgStyle">
            <Badge :count="5" theme="inverted">
                <Avatar color="light-green" shape="square" :style="style">LX</Avatar>
            </Badge>
        </div>
        <br />
        <div :style="bgStyle">
            <Badge dot theme="solid">
                <Avatar color="light-green" shape="square" :style="style">YZ</Avatar>
            </Badge>
        </div>
        <div :style="bgStyle">
            <Badge dot theme="light">
                <Avatar color="lime" shape="square" :style="style">HW</Avatar>
            </Badge>
        </div>
        <div :style="{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }">
            <Badge dot theme="inverted">
                <Avatar color="lime" shape="square" :style="style">XM</Avatar>
            </Badge>
        </div>
    </div>
</template>

type support the following values: primary(default),secondary,tertiary,warning and danger.

MR5

YL5

ZW5

JL5

RT5

Code

<script setup lang="ts">
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const bgStyle = {
        padding: '8px 8px 3px 8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <div :style="{ display: 'flex' }">
        <div :style="bgStyle">
            <Badge :count="5" type="primary">
                <Avatar color="violet" shape="square" :style="style">MR</Avatar>
            </Badge>
        </div>
        <div :style="bgStyle">
            <Badge :count="5" type="secondary">
                <Avatar color="violet" shape="square" :style="style">YL</Avatar>
            </Badge>
        </div>
        <div :style="bgStyle">
            <Badge :count="5" type="tertiary">
                <Avatar color="red" shape="square" :style="style">ZW</Avatar>
            </Badge>
        </div>
        <br />
        <div :style="bgStyle">
            <Badge :count="5" type="warning">
                <Avatar color="red" shape="square" :style="style">JL</Avatar>
            </Badge>
        </div>
        <div :style="bgStyle">
            <Badge :count="5" type="danger">
                <Avatar color="pink" shape="square" :style="style">RT</Avatar>
            </Badge>
        </div>
        <div :style="bgStyle">
            <Badge dot type="primary">
                <Avatar color="pink" shape="square" :style="style">YF</Avatar>
            </Badge>
        </div>
    </div>
</template>

Independent Usage

Badge can be used alone when it is a stand-alone element.

5

NEW

10+

进行中 processing
信息 info
成功 success
提醒 warning
错误 error

Code

<script setup lang="ts">
    import { Badge } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Badge :count="5" />
        <br />
        <br />
        <Badge count="NEW" theme="light" />
        <br />
        <br />
        <Badge :count="99" :overflowCount="10" type="danger" />
        <br />
        <br />
        <span><Badge dot type="primary" /> 进行中 processing</span>
        <br />
        <span><Badge dot type="tertiary" /> 信息 info</span>
        <br />
        <span><Badge dot type="success" /> 成功 success</span>
        <br />
        <span><Badge dot type="warning" /> 提醒 warning</span>
        <br />
        <span><Badge dot type="danger" /> 错误 error</span>
    </div>
</template>

API Reference

Props

Property	Description	Type	Default
count	Badge content as a number or string; use the count slot for other content.	`string \| number`	`semiGlobalDefault("Badge", "count")`
dot	Shows a small dot instead of the content.	`boolean`	`semiDefault("Badge", "dot", false)`
type	Badge type: primary, secondary, tertiary, danger, warning or success.	`BadgeType`	`semiDefault("Badge", "type", "primary")`
theme	Badge theme: solid, light or inverted.	`BadgeTheme`	`semiDefault("Badge", "theme", "solid")`
position	Badge position relative to the wrapped element. Defaults to leftTop under an RTL ConfigProvider and rightTop otherwise.	`BadgePosition`	`semiGlobalDefault("Badge", "position")`
overflowCount	Maximum number shown; larger numbers display as `${overflowCount}+`. Applies to numbers only, and 0 counts as unset.	`number`	`semiGlobalDefault("Badge", "overflowCount")`
countClassName	Class name of the count element.	`string`	`semiGlobalDefault("Badge", "countClassName")`
countStyle	Style of the count element.	`CSSProperties`	`semiGlobalDefault("Badge", "countStyle")`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	The element the badge is attached to. Without it the badge stands alone.	`any`
count	Custom badge content. It wins over count and removes the type and theme classes.	`any`

Exposes

Name	Description	Type
None

class, style, native attributes and native events such as @click and @mouseenter land on the root element through attrs. The count element only takes countClassName and countStyle. The default slot runs once per render.

Content Guidelines

Capitalize the first letter

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$color-badge_default-border-default	var(--semi-color-bg-1)	描边颜色 - 默认
$color-badge_default-bg-default	var(--semi-color-bg-1)	背景颜色 - 默认
$color-badge_default-text-default	var(--semi-color-bg-2)	文字颜色 - 默认
$color-badge_primary_solid-bg-default	var(--semi-color-primary)	背景颜色 - 主色
$color-badge_primary_light-bg-default	var(--semi-color-primary-light-default)	背景颜色 - 浅版主色
$color-badge_primary_light-text-default	var(--semi-color-primary)	文字颜色 - 浅版主色
$color-badge_primary_inverted-text-default	var(--semi-color-primary)	文字颜色 - 白底
$color-badge_secondary_solid-bg-default	var(--semi-color-secondary)	背景颜色 - 次要
$color-badge_secondary_light-bg-default	var(--semi-color-secondary-light-default)	背景颜色 - 浅版次要
$color-badge_secondary_light-text-default	var(--semi-color-secondary)	文字颜色 - 浅版次要
$color-badge_secondary_inverted-text-default	var(--semi-color-secondary)	文字颜色 - 白底
$color-badge_tertiary_solid-bg-default	var(--semi-color-tertiary)	背景颜色 - 第三
$color-badge_tertiary_light-bg-default	var(--semi-color-tertiary-light-default)	背景颜色 - 第三
$color-badge_tertiary_light-text-default	var(--semi-color-tertiary)	文字颜色 - 浅版第三
$color-badge_tertiary_inverted-text-default	var(--semi-color-tertiary)	文字颜色 - 白底
$color-badge_danger_solid-bg-default	var(--semi-color-danger)	背景颜色 - 危险
$color-badge_danger_light-bg-default	var(--semi-color-danger-light-default)	背景颜色 - 浅版危险
$color-badge_danger_light-text-default	var(--semi-color-danger)	文字颜色 - 浅版危险
$color-badge_danger_inverted-text-default	var(--semi-color-danger)	文字颜色 - 白底
$color-badge_warning_solid-bg-default	var(--semi-color-warning)	背景颜色 - 警告
$color-badge_warning_light-bg-default	var(--semi-color-warning-light-default)	背景颜色 - 浅版警告
$color-badge_warning_light-text-default	var(--semi-color-warning)	文字颜色 - 浅版危险
$color-badge_warning_inverted-text-default	var(--semi-color-warning)	文字颜色 - 白底
$color-badge_success_solid-bg-default	var(--semi-color-success)	背景颜色 - 成功
$color-badge_success_light-bg-default	var(--semi-color-success-light-default)	背景颜色 - 浅版成功
$color-badge_success_light-text-default	var(--semi-color-success)	文字颜色 - 浅版成功
$color-badge_success_inverted-text-default	var(--semi-color-success)	文字颜色 - 白底
$width-badge_dot	8px	点状徽标宽度
$height-badge_dot	8px	点状徽标高度
$radius-badge_dot	var(--semi-border-radius-circle)	点状徽标圆角
$height-badge_count	18px	数字徽标宽度
$spacing-badge_count-paddingY	0px	数字徽标上下内边距
$spacing-badge_count-paddingX	4px	数字徽标左右内边距
$width-badge-border	1px	描边宽度