STATUS ICON

<StatusIcon>status-icon.tsx

G2G

BROKER STATUS

Default Variants

sm Size

check

open

warn

refresh

loading

loadspin

off

clock

default Size

check

open

warn

refresh

loading

loadspin

off

clock

lg Size

check

open

warn

refresh

loading

loadspin

off

clock

Surface Variants — Hover

sm Size

check

open

warn

refresh

loading

loadspin

off

clock

default Size

check

open

warn

refresh

loading

loadspin

off

clock

lg Size

check

open

warn

refresh

loading

loadspin

off

clock

Side-by-side Comparison

Default (nav)

surface="hover"

PROJECT STATUS

Status Icons

Live

WIP

Research

Research 2

Todo

Backlog 1

Backlog 2

Blocked

Beta

Scale Icons - Positive

Scale 1

Scale 2

Scale 3

Scale 4

Scale 5

Scale Icons - Negative

Scale -1

Scale -2

Scale -3

Scale -4

Scale -5

ScaleX Icons - Positive

ScaleX 1

ScaleX 2

ScaleX 3

ScaleX 4

ScaleX 5

ScaleX Icons - Negative

ScaleX -1

ScaleX -2

ScaleX -3

ScaleX -4

ScaleX -5

Usage with Badges

Complete

In Progress

Research

To Do

Backlog

Blocked

Size Variations

3x3

4x4

5x5

6x6

8x8

10x10

12x12

PULSING STATUS DOTS

Size Variants

XS Size

Positive

Negative

Warning

Brand

SM Size

Positive

Negative

Warning

Brand

MD Size

Positive

Negative

Warning

Brand

LG Size

Positive

Negative

Warning

Brand

XL Size

Positive

Negative

Warning

Brand

Without Pulse Animation

Positive

Negative

Warning

Brand

Usage with Text

System Online

Pending Review

Connection Lost

Premium Active