You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

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
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

Name	Type	Default	Description
`icon`required	`Icon`		Add an icon to the badge (Required if no label)
`label`required	`string`		The label of the badge (Required if no icon)
`extraClasses`	`string[]`		CSS class for the badge
`iconPlacement`	`BadgeIconPlacement`	`BadgeIconPlacement.Left`	Whether the icon is left or right (Required if no label)
`isSmall`	`boolean`	`false`	The Badge will be smaller in size when true
`type`	`BadgeType`	`Default`	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