Badge - Semi Design Next

Demos

How to import

import { Badge } from '@fibrous/semi-ui-react';

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.

When count is a node, the node will be rendered directly.

BM5

YL

XZ

WFNEW

Code

import { IconLock } from '@fibrous/semi-icons-react';
import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <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 count={<IconLock style={{ color: 'var(--semi-color-primary)' }} />}>
                <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>
    );
}

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

import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <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>
    );
}

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

import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <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>
    );
}

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

import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const bgStyle = {
        padding: '8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <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>
    );
}

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

MR5

YL5

ZW5

JL5

RT5

Code

import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const bgStyle = {
        padding: '8px 8px 3px 8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <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>
    );
}

Independent Usage

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

5

NEW

10+

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

Code

import { Badge } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    return (
        <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>
    );
}

API Reference

Props

Property	Description	Type	Default
children	The element the badge is attached to; the badge is positioned relative to it. Without children, the badge is shown as a standalone element.	`React.ReactNode`	-
className	Class name of the root `span` element.	`string`	-
count	Badge content. Numbers and strings are shown as text; other nodes are rendered as is, without the `type` and `theme` classes.	`React.ReactNode`	-
countClassName	Class name of the count element.	`string`	-
countStyle	Style of the count element, used only when `style` is not set.	`React.CSSProperties`	-
dot	Shows a small dot instead of `count`.	`boolean`	`false`
onClick	Called when the root element is clicked.	`Type`	-
onMouseEnter	Called when the pointer enters the root element.	`Type`	-
onMouseLeave	Called when the pointer leaves the root element.	`Type`	-
overflowCount	Maximum number shown; a larger numeric `count` is displayed as `${overflowCount}+`. Applies to numbers only, and `0` is treated as unset.	`number`	-
position	Badge position relative to the wrapped element: `leftTop`, `leftBottom`, `rightTop` or `rightBottom`. When unset, it is `leftTop` under an RTL ConfigProvider and `rightTop` otherwise.	`BadgePosition`	-
ref	Reference to the root `span` element.	`Type`	-
style	Style of the count element. When set, it replaces `countStyle` rather than merging with it; it is not applied to the root element.	`React.CSSProperties`	-
theme	Badge theme: `solid`, `light` or `inverted`.	`BadgeTheme`	`"solid"`
type	Badge type: `primary`, `secondary`, `tertiary`, `danger`, `warning` or `success`.	`BadgeType`	`"primary"`

Other native attributes (such as id, aria-* and data-*) land on the root span element.

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	描边宽度