components
Badges
A visual cue to alerts users to new or updated items with numeric, alphabetic, or dots.
Variants
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
R500
G500
GR100
GG100
N400
none
Predefined by variants & states
Width
hug
none
Height
fixed (18px)
none
Radius
999px
none
Outline
N0
none
Solid color : use 2px outline
Gradient color : no outline color
Animation shimmer
ON/OFF
none
Shimmer animation can be turn on or off by vertical
Badge text
removable
changeable
Typography token
small
none
example title usecase : New, Baru, Hot
Color
text invert
none
Alignment
align-center
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Dimension
Variants
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
R500
G500
GR100
GG100
N400
none
Predefined by variants & states
Width
hug
none
Height
fixed (18px)
none
Radius
999px
none
Outline
N0
none
Solid color : use 2px outline
Gradient color : no outline color
Animation shimmer
ON/OFF
none
Shimmer animation can be turn on or off by vertical
Badge text
removable
changeable
Typography token
small
none
example title usecase : New, Baru, Hot
Color
text invert
none
Alignment
align-center
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Dimension
Variants
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
R500
G500
GR100
GG100
N400
none
Predefined by variants & states
Width
hug
none
Height
fixed (18px)
none
Radius
999px
none
Outline
N0
none
Solid color : use 2px outline
Gradient color : no outline color
Animation shimmer
ON/OFF
none
Shimmer animation can be turn on or off by vertical
Badge text
removable
changeable
Typography token
small
none
example title usecase : New, Baru, Hot
Color
text invert
none
Alignment
align-center
none
Overflow handling
truncation : none
none
Max lines
no max line
none
Will be capped to use short text by copywriters, code-wise show all text
Dimension
