Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Modal

v.1.0.0 | Saturn

Usage

The name of the tokens object to style modal is MODAL_STYLES.

You can not change the name of the tokens object.

Modal component has one way to modify the styles:

  • Variant: modify the styles of the Modal.

The structure of the MODAL_STYLES object is:

Variants

Variants can modify the styles for the Modal.

The tokens used are:

12345678910
type const MODAL_STYLES = {
  [VARIANT]: {
    footerVariant?: string;
    popoverVariant: string;
    container?: CommonStyleType;
    headerContainer?: CommonStyleType;
    imageContainer?: CommonStyleType;
    imageIllustrationHeader?: IllustrationTypes;
    imageHeader?: IconTypes;
    title?: TypographyTypes;

Example

12345678910
type const MODAL_STYLES = {
  [VARIANT]: {
    footerVariant: 'DEAFULT',
    popoverVariant: 'MODAL',
    container: {
      background_color: 'background-color',
      border_radius: 'border-radius',
      box_shadow: 'box-shadow',
    },
    headerContainer: {
ModalCode API
ModalAccessibility