components
Message
v.1.0.0 | SaturnUsage
The name of the tokens object to style the message component is MESSAGE_STYLES.
You cannot change the name of the tokens object.
Message component has one way to modify the styles:
- Variant: modify the styles of the Message.
The structure of the MESSAGE_STYLES object is:
Variants
Variants can modify the component styles.
- container?: CommonStyleType;
- headerContainer?: CommonStyleType
- headerContainerLargeMessage?: CommonStyleType
- title?: TypographyTypes;
- contentContainer?: CommonStyleType
- contentContainerLargeMessage?: CommonStyleType
- description?: TypographyTypes;
- infoIcon?: IconTypes;
- closeIcon?: IconTypes;
- closeIconContainer?: CommonStyleType
- buttonSectionContainer?: CommonStyleType
- actionButtonContainer?: CommonStyleType
- buttonSectionContainer?: CommonStyleType
- actionButton?: { size?: string; };
- extraActionButtonContainer?: CommonStyleType
- extraActionButton?: { size?: string; };
- illustration?: IllustrationTypes;
12345678910
const MESSAGE_STYLES = { [VARIANT]: { container?: CommonStyleType; headerContainer?: CommonStyleType headerContainerLargeMessage?: CommonStyleType title?: TypographyTypes; contentContainer?: CommonStyleType contentContainerLargeMessage?: CommonStyleType description?: TypographyTypes; infoIcon?: IconTypes;
Example
message theme object example:
12345678910
const MESSAGE_STYLES = { [VARIANT]: { container: { display: 'display', flex_direction: 'flex-direction', align_items: 'align-items', border_color: 'color', background_color: 'color', }, title: {