components
Tag
v.1.0.0 | SaturnUsage
The name of the tokens object to style tag is TAG_STYLES.
You cannot change the name of the tokens object.
Tag component style can be configured through the variant and option prop:
Variants and Status
Each variant can have several status. status can modify the styles of the tag.
The tokens used are:
- wrapper?: CommonStyleType;
- text?: TypographyTypes;
- icon?: IconTypes;
- truncateText?: TypographyTypes;
12345678
const TAG_VARIANT = { [STATUS]: { wrapper?: CommonStyleType, text?: TypographyTypes, truncateText?: TypographyTypes, icon?: IconTypes, } }
Option
OptionTypes can modify the styles of the tag.
The tokens used are:
- wrapper?: CommonStyleType;
- text?: TypographyTypes;
1234
const TAG_OPTION = { wrapper?: wrapper, text?: TypographyTypes, }
Example
tag theme object example:
12345678910
const TAG_STYLES = { [VARIANT]: { [STATUS]: { wrapper: { border_style: 'border-style', border_width: 'border-width', padding: 'padding', }, text: { font_variant: 'font-variant',