Demos How to import import { Badge } from '@douyinfe/semi-ui';
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 passed in a node type, the node will be rendered directly.
import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
import { IconLock } from '@douyinfe/semi-icons';
() => {
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}+.
import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
() => {
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.
import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
() => {
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.
import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
() => {
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.
import React from 'react';
import { Badge, Avatar } from '@douyinfe/semi-ui';
() => {
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.
import React from 'react';
import { Badge } from '@douyinfe/semi-ui';
() => (
<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 Properties Instructions type Default children Base ReactNode - count Display content ReactNode - dot Displayed as a little dot. boolean false overflowCount Cap number value number - position Badge position, optional left Top, left Bottom, right Top, right Bottom string rightTopstyle style CSSProperties - theme Badge theme, one of solid, light, inverted string solidtype Badge type, one of primary, secondary, tertiary, danger, warning,success, string primary
Content Guidelines Capitalize the first letter