components
Label
Used to inform users of the status of an object or of an action that’s been taken.
Variants
Sub variants of small sizes
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0 (default)
all solid color token
all gradient color token
exposed
N100 used for disabled state
Width
hug
none
Height
hug
none
Radius
4px
none
Animation shimmer
ON/OFF
none
Default: shimmer OFF
Disabled : shimmer OFF
Product label : shimmer ON
Icon
removable
changeable
Color
all icon color token
none
Predefined by states
Disabled : icon alpha 30%
Icon
tds_ic_cross_big
none
Size
12x12
16x16
none
12x12 : small variants
16x16 : medium variants
Image source
TDS asset
URL
none
Body text
unremovable
changeable
Text style
body 3 - regular
small
none
Predefined by label size
- Medium: Body 3
- Small: Small
Color
all text color token
exposed
Disabled : text disabled
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Countdown
removable
changeable
Variants
small
none
Text color
text invert (default)
all text color token
exposed
Milisecond
ON/OFF
none
Vertical can choose the countdown to use mili second or without mili second
Overflow handling
truncation : none
none
Countdown shall not be truncated.
Dimension
Behavior
Variants
Sub variants of small sizes
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0 (default)
all solid color token
all gradient color token
exposed
N100 used for disabled state
Width
hug
none
Height
hug
none
Radius
4px
none
Animation shimmer
ON/OFF
none
Default: shimmer OFF
Disabled : shimmer OFF
Product label : shimmer ON
Icon
removable
changeable
Color
all icon color token
none
Predefined by states
Disabled : icon alpha 30%
Icon
tds_ic_cross_big
none
Size
12x12
16x16
none
12x12 : small variants
16x16 : medium variants
Image source
TDS asset
URL
none
Body text
unremovable
changeable
Text style
body 3 - regular
small
none
Predefined by label size
- Medium: Body 3
- Small: Small
Color
all text color token
exposed
Disabled : text disabled
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Countdown
removable
changeable
Variants
small
none
Text color
text invert (default)
all text color token
exposed
Milisecond
ON/OFF
none
Vertical can choose the countdown to use mili second or without mili second
Overflow handling
truncation : none
none
Countdown shall not be truncated.
Dimension
Behavior
Variants
Sub variants of small sizes
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
N0 (default)
all solid color token
all gradient color token
exposed
N100 used for disabled state
Width
hug
none
Height
hug
none
Radius
4px
none
Animation shimmer
ON/OFF
none
Default: shimmer OFF
Disabled : shimmer OFF
Product label : shimmer ON
Icon
removable
changeable
Color
all icon color token
none
Predefined by states
Disabled : icon alpha 30%
Icon
tds_ic_cross_big
none
Size
12x12
16x16
none
12x12 : small variants
16x16 : medium variants
Image source
TDS asset
URL
none
Body text
unremovable
changeable
Text style
body 3 - regular
small
none
Predefined by label size
- Medium: Body 3
- Small: Small
Color
all text color token
exposed
Disabled : text disabled
Alignment
align-left
none
Overflow handling
truncation : none
none
Max line
no max line
none
It will be capped at 2 lines by the Copywriters. code wise, no max lines to ensure no issue with smaller devices.
Countdown
removable
changeable
Variants
small
none
Text color
text invert (default)
all text color token
exposed
Milisecond
ON/OFF
none
Vertical can choose the countdown to use mili second or without mili second
Overflow handling
truncation : none
none
Countdown shall not be truncated.
Dimension
Behavior
