Feedback

Color dot

A color dot indicates the status of an item.
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