components
Chips
Allow users to make single & multiple selections, filter content, or trigger actions.
Variants
States
Partial highlighted text
Anatomy
Properties
1. Container
unremovable
changeable
Color
N0
B100
N100
none
Predefined by Variants & States.
Default:
- Inactivated, Error: N0
- Activated: B100
- Disabled: N100
Invert:
- Inactivated, Error: N0
- Activated: N0, alpha 40%
Width
hug
none
Height
fixed (32px)
none
Radius
4px
none
Outline
N200
B400
R400
none
Predefined by Variants & States.
Default:
Inactivated: N200
- Activated: B400
- Disabled: None
- Error: R400
Invert:
- Inactivated, Error, Disabled: None
- Activated: N200
2. Left icon
removable
changeable
Color
icon LE (default)
icon activity
icon disabled
icon invert
none
Default:
- Inactivated, Error: LE Icon
- Activated: Activity Icon
- Disabled: Disabled Icon
Invert:
- Inactivated, Error: Invert Icon
- Activated: Activity Icon
Source
TDS asset
URL
none
Chip text
unremovable
changeable
Text style
body 2 - regular
body 2 - bold
none
Enable combination of regular and bolds
Color
text HE
text activity
text disabled
text invert
none
Predefined by Variants & States.
Default:
- Inactivated, Error: HE Text
- Activated: Activity Text
- Disabled: Disabled Text
Invert:
- Inactivated, Error: Invert Text
- Activated: Activity Text
Enable combination of HE Text and Activity Text
Alignment
align-left
none
Overflow handling
truncation : none (default)
truncation : end
none
Max line
max 1 line
none
It will be capped max 20 char by Copywriters, code-wise use no max lines
4. Right icon
removable
changeable
Color
icon LE (default)
icon activity
icon disabled
icon invert
none
Default:
- Inactivated, Error : HE Icon
- Activated : Activity Icon
- Disabled : Disabled Icon
Invert:
- Inactivated, Error : Invert Icon
- Activated : Activity Icon
Source
TDS asset
URL
none
Badge
removable
changeable
Variant
general
activie indicator
none
All other specs will follow Badge specs
