Badge - Semi Design Next

Demos

How to import

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

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, a string or a JSX element. A number or string is shown as text; count="5" is a string and is likewise never cut off by overflowCount. A JSX element is rendered as is, and the type and theme classes are removed.

BM5

YL

XZ

WFNEW

Code

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

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

export default function BadgeDemo() {
    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 { Avatar, Badge } from '@fibrous/semi-ui-solid';

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

export default function BadgeDemo() {
    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 { Avatar, Badge } from '@fibrous/semi-ui-solid';

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

export default function BadgeDemo() {
    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 { Avatar, Badge } from '@fibrous/semi-ui-solid';

const bgStyle = {
    padding: '8px',
};

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

const invertedBgStyle = {
    padding: '8px',
    'border-radius': '4px',
    'background-color': 'var(--semi-color-fill-0)',
};

export default function BadgeDemo() {
    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={invertedBgStyle}>
                <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 { Avatar, Badge } from '@fibrous/semi-ui-solid';

const bgStyle = {
    padding: '8px 8px 3px 8px',
};

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

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

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
count	Badge content: a number or string is shown as text; a JSX element is rendered as is, and the type and theme classes are removed.	`JSX.Element`	-
countClassName	Class name of the count element.	`string`	-
countStyle	Style of the count element, as a CSS object with kebab-case keys or a string.	`JSX.CSSProperties \| string`	-
dot	Shows a small dot instead of the content.	`boolean`	`false`
overflowCount	Maximum number shown; larger numbers display as `${overflowCount}+`. Applies to numbers only, and 0 counts as unset.	`number`	-
position	Badge position relative to the wrapped element. Defaults to leftTop under an RTL ConfigProvider and rightTop otherwise.	`BadgePosition`	-
theme	Badge theme: solid, light or inverted.	`BadgeTheme`	`"solid"`
type	Badge type: primary, secondary, tertiary, danger, warning or success.	`BadgeType`	`"primary"`

class, style, ref, native attributes and native events such as id, aria-*, onClick and onMouseEnter land on the root <span> element. countClassName and countStyle only apply to the count 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	描边宽度