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
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
s
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
reg
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
l
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
xl
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
xs
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
s
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
reg
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
l
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)
xl
COLOR STYLESPrimary (brand)
BACKGROUND STYLESPrimary (brand)

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

Loader

Codes
*VPN connection required
Designs
⚠️ Please note: The loader is part of the Stage 1 OpenText Rebranding. Make sure to check the new guidelines in the Rebranding section
Frame 627435
Frame 627436
Frame 627435
Frame 627436

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
COLOR STYLESNeutrals | Gray/25
BACKGROUND STYLESNeutrals | Gray/25
Progress bar
COLOR STYLESNeutrals | Gray/25
BACKGROUND STYLESNeutrals | Gray/25

Progress window

Designs
sidenav
COLOR STYLESElevations/Elevation 3
SHADOW STYLESShadows/Elevation 3
BACKGROUND STYLESElevations/Elevation 3
sidenav
COLOR STYLESElevations/Elevation 3
SHADOW STYLESShadows/Elevation 3
BACKGROUND STYLESElevations/Elevation 3

Skeleton loader

Designs
Frame 627431
COLOR STYLESElevations/Elevation 1
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 1
BACKGROUND STYLESElevations/Elevation 1
Frame 627431
COLOR STYLESElevations/Elevation 1
STROKEGeneral styles/Border
SHADOW STYLESShadows/Elevation 1
BACKGROUND STYLESElevations/Elevation 1