Badge - Svelte - Semi Design Next

Demos

How to import

<script lang="ts">
    import { Badge } from '@fibrae/semi-ui-svelte';
</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, a string or a snippet. Write a snippet as {#snippet count()}...{/snippet} inside the Badge tag; it is rendered as is, and the type and theme classes are removed. Pass numbers with count={5}: count="5" is a string and is never cut off by overflowCount. The element the badge is attached to goes inside the tag, as the children snippet.

BM 5

YL

XZ

WF NEW

Code

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

    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

<div>
    <Badge count={5}>
        <Avatar color="blue" shape="square" {style}>BM</Avatar>
    </Badge>
    <br />
    <br />
    <Badge dot>
        <Avatar color="blue" shape="square" {style}>YL</Avatar>
    </Badge>
    <br />
    <br />
    <Badge>
        {#snippet count()}
            <IconLock style="color: var(--semi-color-primary)" />
        {/snippet}
        <Avatar color="light-blue" shape="square" {style}>XZ</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count="NEW">
        <Avatar color="light-blue" shape="square" {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}+.

ZH 99

HS 100

DY 10+

TT 999+

Code

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

    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

<div>
    <Badge count={99}>
        <Avatar color="teal" shape="square" {style}>ZH</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count={100}>
        <Avatar color="teal" shape="square" {style}>HS</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count={99} overflowCount={10}>
        <Avatar color="green" shape="square" {style}>DY</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count={1000} overflowCount={999}>
        <Avatar color="green" shape="square" {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.

ZH VIP

HS VIP

DY VIP

TT VIP

Code

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

    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

<div>
    <Badge count="VIP" position="rightTop" type="danger">
        <Avatar color="amber" shape="square" {style}>ZH</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count="VIP" position="rightBottom" type="danger">
        <Avatar color="amber" shape="square" {style}>HS</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count="VIP" position="leftTop" type="danger">
        <Avatar color="orange" shape="square" {style}>DY</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count="VIP" position="leftBottom" type="danger">
        <Avatar color="orange" shape="square" {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.

XZ 5

YB 5

LX 5

Code

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

    const bgStyle = 'padding: 8px';
    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

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

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

MR 5

YL 5

ZW 5

JL 5

RT 5

Code

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

    const bgStyle = 'padding: 8px 8px 3px 8px';
    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

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

<script lang="ts">
    import { Badge } from '@fibrae/semi-ui-svelte';
</script>

<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	Snippet for the element the badge is attached to. Without it the badge stands alone.	`Snippet`	-
count	Badge content as a number, string or snippet. A snippet is rendered as given and removes the type and theme classes.	`number \| string \| Snippet \| null`	-
countClassName	Class name of the count element.	`string`	-
countStyle	Style string of the count element.	`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, native attributes and native events (such as id, aria-* and onclick) 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	描边宽度