Description
Badge generates a small badge on its child(ren), or can be a inline/standalone badge.
Badge variants
Information Badge
Can be used to describe or inform about new activity or features in our applications. The label can be placed on top of element backgrounds or inline with text within cells.
The logic of how long it should be visible would differ from case to case, so that's up to the designer.
Notification Badge
The notification badge has a very limited use. Area of use is limited as of now, as a counter of messages in the message's center.
We only show single digits in the counter. If there are more notifications than that, we show “9+”.
Demos
Setting property variant
default variant is 'information'
New
Code Editor
<Badge content="New" />
Text Info Text
Code Editor
<div> Text <Badge content="Info" variant="information" /> Text </div>
Persons:ANy
Code Editor
<Badge content="Ny" variant="information"> <Avatar.Group label="Persons:"> <Avatar size="large" variant="secondary"> A </Avatar> </Avatar.Group> </Badge>
variant 'notification'
Notifications: 1
Code Editor
<Badge content={1} label="Notifications:" variant="notification" />
Text Notifications: 1 Text
Code Editor
<div> Text <Badge content={1} label="Notifications:" variant="notification" />{' '} Text </div>
Persons:ANotifications: 1
Code Editor
<Badge content={1} label="Notifications:" variant="notification"> <Avatar.Group label="Persons:"> <Avatar size="large">A</Avatar> </Avatar.Group> </Badge>
Setting property horizontal and vertical
vertical 'top' horizontal 'left'
Persons:ANotifications: 9+
Code Editor
<Badge content={66} label="Notifications:" vertical="top" horizontal="left" variant="notification" > <Avatar.Group label="Persons:"> <Avatar size="large">A</Avatar> </Avatar.Group> </Badge>
vertical 'top' horizontal 'right'
Persons:ANotifications: 1
Code Editor
<Badge content={1} label="Notifications:" vertical="top" horizontal="right" variant="notification" > <Avatar.Group label="Persons:"> <Avatar size="large">A</Avatar> </Avatar.Group> </Badge>
vertical 'bottom' horizontal 'left'
Persons:ANotifications: 9+
Code Editor
<Badge content={13} label="Notifications:" vertical="bottom" horizontal="left" variant="notification" > <Avatar.Group label="Persons:"> <Avatar size="large">A</Avatar> </Avatar.Group> </Badge>
vertical 'bottom' horizontal 'right'
Persons:ANotifications: 9+
Code Editor
<Badge content={58} label="Notifications:" vertical="bottom" horizontal="right" variant="notification" > <Avatar.Group label="Persons:"> <Avatar size="large">A</Avatar> </Avatar.Group> </Badge>
Alternatives
Code Editor
<Badge content={<Icon icon={Confetti} />}> <Img src="https://avatars.githubusercontent.com/u/1501870?v=4" alt="Profile picture" height="64" width="64" /> </Badge>
Notifications: 9+
Code Editor
<Badge content={99} label="Notifications:" variant="notification" vertical="top" horizontal="right" > <Icon icon={Email} size="x-large" /> </Badge>