Status

Badge

Codes
*VPN connection required
Designs
The Badge component serves as a graphical representation for numerical values, including tally and score results.
Badge
Badge

Sizes
xs
BACKGROUND STYLESPrimary (brand)
s
BACKGROUND STYLESPrimary (brand)
reg
BACKGROUND STYLESPrimary (brand)
l
BACKGROUND STYLESPrimary (brand)
xl
BACKGROUND STYLESPrimary (brand)
xs
BACKGROUND STYLESPrimary/Brand
s
BACKGROUND STYLESPrimary/Brand
reg
BACKGROUND STYLESPrimary/Brand
l
BACKGROUND STYLESPrimary/Brand
xl
BACKGROUND STYLESPrimary/Brand

Variants
xs
BACKGROUND STYLESPrimary (brand)
s
BACKGROUND STYLESStatus/Error
reg
BACKGROUND STYLESWhite
l
BACKGROUND STYLESNeutrals | Gray/25
xl
BACKGROUND STYLESPrimary (brand)
xl
BACKGROUND STYLESStatus/Success
xs
BACKGROUND STYLESPrimary/Brand
s
BACKGROUND STYLESTypography color/Accessible Red
reg
BACKGROUND STYLESPrimary/White
l
BACKGROUND STYLESNeutrals/25
xl
BACKGROUND STYLESPrimary/Brand
xl
BACKGROUND STYLESStatus & Alerts/Success

Loader

Codes
*VPN connection required
Designs
Types
Frame 627435
Frame 627436
Frame 627435
Frame 627436

Animated version

Spinner

Codes
*VPN connection required
Designs
Spinner
Spinner

Animated version

Progress bar

Codes
*VPN connection required
Designs
The progress bar is a linear indicator that gives the user feedback about an ongoing process.
Progress bar
BACKGROUND STYLESNeutrals | Gray/25
Progress bar
BACKGROUND STYLESNeutrals | Gray/25

Progress window

Designs
Progress notification
BACKGROUND STYLESPrimary (brand)
Progress notification
BACKGROUND STYLESPrimary (brand)

Skeleton loader

Designs
Skeleton
Skeleton