components
Tabs
For navigate between different, but related content. Tabs are commonly used on tool landing pages and on item detail pages.
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
none (transparent)
none
Width
full
none
Height
fixed 52px
none
Radius
0px
none
Icon
removable
changeable
Color
icon LE
icon activity
icon invert
none
Predefined by Variants & States
Variants: Light Mode
- Inactivated: LE Icon
- Activated: Activity Icon
Variants: Dark Mode
- Inactivated: Invert Icon Alpha 40%
- Activated: Invert Icon
Icon
tds_ic_umbrella
exposed
Size
20x20
none
Image source
TDS asset
none
Tab text
unremovable
changeable
Text style
body 2 - bold
none
Color
text LE
text activity
text invert
none
Predefined by Variants & States
Variants: Light Mode
- Inactivated: LE Text
- Activated: Activity Text
Variants: Dark Mode
- Inactivated: Invert Text Alpha 40%
- Activated: Invert Text
Alignment
align-left
none
Overflow handling
truncation : end
none
Max line
max 1 line
none
Badge
removable
changeable
Color variants
red
green
none
All other spec follow badge specs
Horizontal divider
removable
changeable
Variant
light divider
none
Height
fixed 1px
none
Widht
full
none
Active indicator
removable
changeable
Variant
B400
N0
none
Predefined by Variants
- Light Mode: B400
- Dark Mode: N0
Height
fixed 3px
none
Widht
full
none
Radius
3px
none
Top & Right: 3px
Dimension
Tap area
Behavior
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
none (transparent)
none
Width
full
none
Height
fixed 52px
none
Radius
0px
none
Icon
removable
changeable
Color
icon LE
icon activity
icon invert
none
Predefined by Variants & States
Variants: Light Mode
- Inactivated: LE Icon
- Activated: Activity Icon
Variants: Dark Mode
- Inactivated: Invert Icon Alpha 40%
- Activated: Invert Icon
Icon
tds_ic_umbrella
exposed
Size
20x20
none
Image source
TDS asset
none
Tab text
unremovable
changeable
Text style
body 2 - bold
none
Color
text LE
text activity
text invert
none
Predefined by Variants & States
Variants: Light Mode
- Inactivated: LE Text
- Activated: Activity Text
Variants: Dark Mode
- Inactivated: Invert Text Alpha 40%
- Activated: Invert Text
Alignment
align-left
none
Overflow handling
truncation : end
none
Max line
max 1 line
none
Badge
removable
changeable
Color variants
red
green
none
All other spec follow badge specs
Horizontal divider
removable
changeable
Variant
light divider
none
Height
fixed 1px
none
Widht
full
none
Active indicator
removable
changeable
Variant
B400
N0
none
Predefined by Variants
- Light Mode: B400
- Dark Mode: N0
Height
fixed 3px
none
Widht
full
none
Radius
3px
none
Top & Right: 3px
Dimension
Tap area
Behavior
Variants & states
Anatomy
Properties
Properties
Vertical Exposure
Description
1. Container
unremovable
unchangeable
Color
none (transparent)
none
Width
full
none
Height
fixed 52px
none
Radius
0px
none
Icon
removable
changeable
Color
icon LE
icon activity
icon invert
none
Predefined by Variants & States
Variants: Light Mode
- Inactivated: LE Icon
- Activated: Activity Icon
Variants: Dark Mode
- Inactivated: Invert Icon Alpha 40%
- Activated: Invert Icon
Icon
tds_ic_umbrella
exposed
Size
20x20
none
Image source
TDS asset
none
Tab text
unremovable
changeable
Text style
body 2 - bold
none
Color
text LE
text activity
text invert
none
Predefined by Variants & States
Variants: Light Mode
- Inactivated: LE Text
- Activated: Activity Text
Variants: Dark Mode
- Inactivated: Invert Text Alpha 40%
- Activated: Invert Text
Alignment
align-left
none
Overflow handling
truncation : end
none
Max line
max 1 line
none
Badge
removable
changeable
Color variants
red
green
none
All other spec follow badge specs
Horizontal divider
removable
changeable
Variant
light divider
none
Height
fixed 1px
none
Widht
full
none
Active indicator
removable
changeable
Variant
B400
N0
none
Predefined by Variants
- Light Mode: B400
- Dark Mode: N0
Height
fixed 3px
none
Widht
full
none
Radius
3px
none
Top & Right: 3px
Dimension
Tap area
Behavior
