Feedback

Badge

A badge is a small label that displays a short yet important piece of information.
Default
Beta
Critical
New
Success
Warning
Information
1
import {Badge, BadgeType} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<>
5
<Badge label="Default" type={BadgeType.Default} />
6
<Badge label="Beta" type={BadgeType.Beta} extraClasses={['ml1']} />
7
<Badge label="Critical" type={BadgeType.Critical} extraClasses={['ml1']} />
8
<Badge label="New" type={BadgeType.New} extraClasses={['ml1']} />
9
<Badge label="Success" type={BadgeType.Success} extraClasses={['ml1']} />
10
<Badge label="Warning" type={BadgeType.Warning} extraClasses={['ml1']} />
11
<Badge label="Information" type={BadgeType.Information} extraClasses={['ml1']} />
12
</>
13
);
14
export default Demo;

Props

NameTypeDefaultDescription
iconrequiredIcon
Add an icon to the badge (Required if no label)
labelrequiredstring
The label of the badge (Required if no icon)
extraClassesstring[]
CSS class for the badge
iconPlacementBadgeIconPlacementBadgeIconPlacement.Left
Whether the icon is left or right (Required if no label)
isSmallbooleanfalse
The Badge will be smaller in size when true
typeBadgeTypeDefault
The type of the badge

Examples

Badge with icon
Icon is right
Icon is Left
Icon is right
Icon is left
1
import {Badge, BadgeIconPlacement} from '@coveord/plasma-react';
2
import {LockSize16Px} from '@coveord/plasma-react-icons';
3
4
const Demo = () => (
5
<div className="flex">
6
<Badge
7
icon={LockSize16Px}
8
label={'Icon is right'}
9
iconPlacement={BadgeIconPlacement.Right}
10
extraClasses={['ml1']}
11
/>
12
<Badge
13
icon={LockSize16Px}
14
label={'Icon is Left'}
15
iconPlacement={BadgeIconPlacement.Left}
16
extraClasses={['ml1']}
17
/>
18
<Badge
19
isSmall
20
icon={LockSize16Px}
21
label={'Icon is right'}
22
iconPlacement={BadgeIconPlacement.Right}
23
extraClasses={['ml1']}
24
/>
25
<Badge
26
isSmall
27
icon={LockSize16Px}
28
label={'Icon is left'}
29
iconPlacement={BadgeIconPlacement.Left}
30
extraClasses={['ml1']}
31
/>
32
<Badge isSmall icon={LockSize16Px} iconPlacement={BadgeIconPlacement.Right} extraClasses={['ml1']} />
33
</div>
34
);
35
export default Demo;
Badge small
Default
Beta
Critical
New
Success
Warning
Information
1
import {Badge, BadgeType} from '@coveord/plasma-react';
2
3
const Demo = () => (
4
<>
5
<Badge isSmall label="Default" type={BadgeType.Default} />
6
<Badge isSmall label="Beta" type={BadgeType.Beta} extraClasses={['ml1']} />
7
<Badge isSmall label="Critical" type={BadgeType.Critical} extraClasses={['ml1']} />
8
<Badge isSmall label="New" type={BadgeType.New} extraClasses={['ml1']} />
9
<Badge isSmall label="Success" type={BadgeType.Success} extraClasses={['ml1']} />
10
<Badge isSmall label="Warning" type={BadgeType.Warning} extraClasses={['ml1']} />
11
<Badge isSmall label="Information" type={BadgeType.Information} extraClasses={['ml1']} />
12
</>
13
);
14
export default Demo;

No guidelines exist for Badge yet.

Create guidelines