Feedback

Badge

A badge is a small label that displays a short yet important piece of information.
View source
Default
Beta
Critical
New
Success
Warning
Information
1
import {Badge, BadgeType} from '@coveord/plasma-react';
2


3
export default () => (
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
);

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
export default () => (
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
);
Badge small
Default
Beta
Critical
New
Success
Warning
Information
1
import {Badge, BadgeType} from '@coveord/plasma-react';
2


3
export default () => (
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
);

No guidelines exist for Badge yet.

Create guidelines