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.

Color dot

A color dot indicates the status of an item.

View source

Success

1
const Demo = () => (
2
    <>
3
        <span className="inline-flex label">
4
            <i className="color-dot mr1" />
5
            Success
6
        </span>
7
    </>
8
);
9
export default Demo;

Examples

Color dots sizes

1
const Demo = () => (
2
    <>
3
        <i className="color-dot mr1" />
4
        <i className="color-dot state-critical mr1" />
5
        <i className="color-dot state-major mr1" />
6
        <i className="color-dot state-minor mr1" />
7
        <i className="color-dot state-warning mr1" />
8
        <i className="color-dot state-info mr1" />
9
        <i className="color-dot state-disabled mr1" />
10
        <i className="color-dot state-waiting mr1" />
11
        <i className="color-dot state-new mr1" />
12
        <i className="color-dot state-maintenance mr1" />
13
        <br></br>
14
        <br></br>
15
        <i className="color-dot mod-small mr1" />
16
        <i className="color-dot mod-small state-critical mr1" />
17
        <i className="color-dot mod-small state-major mr1" />
18
        <i className="color-dot mod-small state-minor mr1" />
19
        <i className="color-dot mod-small state-warning mr1" />
20
        <i className="color-dot mod-small state-info mr1" />
21
        <i className="color-dot mod-small state-disabled mr1" />
22
        <i className="color-dot mod-small state-waiting mr1" />
23
        <i className="color-dot mod-small state-new mr1" />
24
        <i className="color-dot mod-small state-maintenance" />
25
    </>
26
);
27
export default Demo;

Flashing color dots

1
const Demo = () => (
2
    <>
3
        <i className="color-dot state-executing mr1" />
4
        <i className="color-dot state-executing state-critical mr1" />
5
        <i className="color-dot state-executing state-major mr1" />
6
        <i className="color-dot state-executing state-minor mr1" />
7
        <i className="color-dot state-executing state-warning mr1" />
8
        <i className="color-dot state-executing state-info mr1" />
9
        <i className="color-dot state-executing state-disabled mr1" />
10
        <i className="color-dot state-executing state-waiting mr1" />
11
        <i className="color-dot state-executing state-new mr1" />
12
        <i className="color-dot state-executing state-maintenance" />
13
    </>
14
);
15
export default Demo;

No guidelines exist for ColorDot yet.

Create guidelines