Feedback

Color dot

A color dot indicates the status of an item.
View source
Success
1
export default () => (
2
    <>
3
        <span className="inline-flex label">
4
            <i className="color-dot mr1" />
5
            Success
6
        </span>
7
    </>
8
);

Examples

Color dots sizes


1
export default () => (
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
);
Flashing color dots
1
export default () => (
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
);

No guidelines exist for ColorDot yet.

Create guidelines