
components
Badge
v.1.0.0 | SaturnUsage
The name of the tokens object to style the badge component is BADGE_STYLES.
You cannot change the name of the tokens object.
Badge component has two ways to modify the styles:
- Variant: modify the general styles of the Badge.
- Size: modify the general size styles of the Badge.
The structure of the BADGE_STYLES object is:
Variant and Status
Each variant can have two status. status can modify the styles of the badge. The status are:
1234
enum BadgeStatus { OPEN = 'OPEN', CLOSE = 'CLOSE', }
The tokens used are:
- container?: CommonStyleType;
- labelContainer?: CommonStyleType;
- label?: TypographyTypes;
- labelIcon?: IconTypes;
- iconColor?: string;
- labelIconColor?: string;
- labelFontColor?: string;
- icon?: IconTypes;
- customDotTranslate?: string;
- customDotNumberTranslate?: string;
12345678910
const BADGE_STYLES = { [SIZE]: { icon: { width: string, height: string, }, customDotTranslate: string, customDotNumberTranslate: string, }, [VARIANT]: {
Example
badge theme object example:
12345678910
const BADGE_STYLES = { [SIZE]: { icon: { width: 'icon-width', height: 'icon-height', }, customDotTranslate: 'translate(2px, 2px)', customDotNumberTranslate: 'translate(2px, 2px)', }, [VARIANT]: {