Alert

Molecule

react storybookgithub readmenpm version

Source Code HTML / SASS

Vous trouverez ici les démos et le code source statiques du composant.

On expose les différentes déclinaisons du composant au format HTML et SASS.

Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.react storybook

Alert Info

Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office

Copied
<div class="af-alert af-alert--info">
    <button class="af-alert__icon-close">
        <svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
        </svg>
    </button>
    <h3 class="af-alert__title">
        <div class="af-alert__title-icon">
            <svg class="glyphicon glyphicon-info-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M50.382 0.736c-27.365 0-49.549 22.184-49.549 49.55 0 27.364 22.184 49.547 49.549 49.547 27.365 0 49.548-22.183 49.548-49.547 0-27.366-22.183-49.55-49.548-49.55zM58.151 68.517c-3.74 5.613-7.544 9.941-13.944 9.941-4.369-0.712-6.163-3.843-5.214-7.031l8.233-27.269c0.198-0.668-0.135-1.381-0.744-1.594-0.609-0.214-1.799 0.576-2.829 1.702l-4.975 5.988c-0.136-1.003-0.014-2.667-0.014-3.337 3.74-5.612 9.88-10.044 14.046-10.044 3.962 0.407 5.833 3.571 5.144 7.050l-8.29 27.402c-0.111 0.62 0.216 1.246 0.779 1.444 0.609 0.213 1.89-0.576 2.92-1.703l4.975-5.988c0.136 1.002-0.087 2.769-0.087 3.439zM57.043 32.901c-3.149 0-5.701-2.291-5.701-5.671 0-3.378 2.552-5.669 5.701-5.669 3.148 0 5.701 2.291 5.701 5.669-0.001 3.381-2.553 5.671-5.701 5.671z"></path>
            </svg>
        </div>
        <div class="af-alert__title-text">Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office</div>
    </h3>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

//selector leftBgColor bgColor colorBorder textColor
$typesLite: (success $color-alertSucces-leftBgColor $color-alertSucces-bgColor $color-alertSucces-colorBorder $color-alertSucces-textColor,
    info $color-alertInfo-leftBgColor $color-alertInfo-bgColor $color-alertInfo-colorBorder $color-alertInfo-textColor,
    danger $color-alertDanger-leftBgColor $color-alertDanger-bgColor $color-alertDanger-colorBorder $color-alertDanger-textColor,
    error $color-alertError-leftBgColor $color-alertError-bgColor $color-alertError-colorBorder $color-alertError-textColor);

.af-alert {
    border: 1px solid;
    margin-bottom: 2rem;
    position: relative;

    @each $typeLite in $typesLite {
        &--#{nth($typeLite, 1)} {
            background-color: nth($typeLite, 3);
            border-color: nth($typeLite, 4);
            color: nth($typeLite, 5);

            .af-alert__content {
                color: nth($typeLite, 5);

                .af-alert__content__left {
                    background: nth($typeLite, 2);
                    width: 4.2rem;
                }
            }

            .af-alert__title {
                &-icon {
                    background-color: nth($typeLite, 2);
                    color: $white;
                    width: 4rem;

                    &::after {
                        border-left-color: nth($typeLite, 2);
                    }
                }
            }
        }
    }

    &__title {
        display: flex;
        overflow: hidden;
        color: inherit;
        font-size: 1.1rem;
        margin: 0;

        &-icon {
            position: relative;
            padding: 0 1.3rem;

            &::after {
                content: '';
                position: absolute;
                right: -1rem;
                top: 50%;
                transform: translateY(-50%);
                height: 0;
                width: 0;
                border-top: 2rem solid transparent;
                border-bottom: 2rem solid transparent;
                border-left: 1rem solid transparent;
            }

            .glyphicon {
                top: 50%;
                transform: translateY(-50%);
            }

            &-close {
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.75rem;
                background: none;
                border: 0;
                color: inherit;
            }
        }

        &-text {
            line-height: 24px;
            padding: 0.9rem 1.5rem 0.9rem 2.75rem;
            font-weight: 600;
        }
    }

    &__content {
        display: flex;

        .af-alert__content__right {
            padding: 0 1.5rem;
        }
    }
}

Alert Danger

Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office

Copied
<div class="af-alert af-alert--danger">
    <button class="af-alert__icon-close">
        <svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
        </svg>
    </button>
    <h3 class="af-alert__title">
        <div class="af-alert__title-icon">
            <svg class="glyphicon glyphicon-alert" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M98.343,84.737L53.363,10.752C52.429,9.164,51.308,8.313,50,8.195c-1.308-0.118-2.428,0.571-3.363,2.067L1.657,84.946
	c-0.98,1.496-1.155,3.035-0.525,4.624c0.631,1.59,1.81,2.382,3.538,2.382h90.66c1.729,0,2.907-0.828,3.537-2.486
	C99.498,87.809,99.322,86.233,98.343,84.737z M53.764,27.389L52.666,65.12h-5.333l-1.1-37.731H53.764z M49.922,81.121
	c-2.669,0-4.551-2.117-4.551-4.863c0-2.823,1.962-4.865,4.706-4.865c2.746,0,4.551,2.04,4.551,4.865
	C54.628,79.004,52.823,81.121,49.922,81.121z"></path>
            </svg>
        </div>
        <div class="af-alert__title-text">Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office</div>
    </h3>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

//selector leftBgColor bgColor colorBorder textColor
$typesLite: (success $color-alertSucces-leftBgColor $color-alertSucces-bgColor $color-alertSucces-colorBorder $color-alertSucces-textColor,
    info $color-alertInfo-leftBgColor $color-alertInfo-bgColor $color-alertInfo-colorBorder $color-alertInfo-textColor,
    danger $color-alertDanger-leftBgColor $color-alertDanger-bgColor $color-alertDanger-colorBorder $color-alertDanger-textColor,
    error $color-alertError-leftBgColor $color-alertError-bgColor $color-alertError-colorBorder $color-alertError-textColor);

.af-alert {
    border: 1px solid;
    margin-bottom: 2rem;
    position: relative;

    @each $typeLite in $typesLite {
        &--#{nth($typeLite, 1)} {
            background-color: nth($typeLite, 3);
            border-color: nth($typeLite, 4);
            color: nth($typeLite, 5);

            .af-alert__content {
                color: nth($typeLite, 5);

                .af-alert__content__left {
                    background: nth($typeLite, 2);
                    width: 4.2rem;
                }
            }

            .af-alert__title {
                &-icon {
                    background-color: nth($typeLite, 2);
                    color: $white;
                    width: 4rem;

                    &::after {
                        border-left-color: nth($typeLite, 2);
                    }
                }
            }
        }
    }

    &__title {
        display: flex;
        overflow: hidden;
        color: inherit;
        font-size: 1.1rem;
        margin: 0;

        &-icon {
            position: relative;
            padding: 0 1.3rem;

            &::after {
                content: '';
                position: absolute;
                right: -1rem;
                top: 50%;
                transform: translateY(-50%);
                height: 0;
                width: 0;
                border-top: 2rem solid transparent;
                border-bottom: 2rem solid transparent;
                border-left: 1rem solid transparent;
            }

            .glyphicon {
                top: 50%;
                transform: translateY(-50%);
            }

            &-close {
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.75rem;
                background: none;
                border: 0;
                color: inherit;
            }
        }

        &-text {
            line-height: 24px;
            padding: 0.9rem 1.5rem 0.9rem 2.75rem;
            font-weight: 600;
        }
    }

    &__content {
        display: flex;

        .af-alert__content__right {
            padding: 0 1.5rem;
        }
    }
}

Alert Success

Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office

Copied
<div class="af-alert af-alert--success">
    <button class="af-alert__icon-close">
        <svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
        </svg>
    </button>
    <h3 class="af-alert__title">
        <div class="af-alert__title-icon">
            <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
            </svg>
        </div>
        <div class="af-alert__title-text">Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office</div>
    </h3>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

//selector leftBgColor bgColor colorBorder textColor
$typesLite: (success $color-alertSucces-leftBgColor $color-alertSucces-bgColor $color-alertSucces-colorBorder $color-alertSucces-textColor,
    info $color-alertInfo-leftBgColor $color-alertInfo-bgColor $color-alertInfo-colorBorder $color-alertInfo-textColor,
    danger $color-alertDanger-leftBgColor $color-alertDanger-bgColor $color-alertDanger-colorBorder $color-alertDanger-textColor,
    error $color-alertError-leftBgColor $color-alertError-bgColor $color-alertError-colorBorder $color-alertError-textColor);

.af-alert {
    border: 1px solid;
    margin-bottom: 2rem;
    position: relative;

    @each $typeLite in $typesLite {
        &--#{nth($typeLite, 1)} {
            background-color: nth($typeLite, 3);
            border-color: nth($typeLite, 4);
            color: nth($typeLite, 5);

            .af-alert__content {
                color: nth($typeLite, 5);

                .af-alert__content__left {
                    background: nth($typeLite, 2);
                    width: 4.2rem;
                }
            }

            .af-alert__title {
                &-icon {
                    background-color: nth($typeLite, 2);
                    color: $white;
                    width: 4rem;

                    &::after {
                        border-left-color: nth($typeLite, 2);
                    }
                }
            }
        }
    }

    &__title {
        display: flex;
        overflow: hidden;
        color: inherit;
        font-size: 1.1rem;
        margin: 0;

        &-icon {
            position: relative;
            padding: 0 1.3rem;

            &::after {
                content: '';
                position: absolute;
                right: -1rem;
                top: 50%;
                transform: translateY(-50%);
                height: 0;
                width: 0;
                border-top: 2rem solid transparent;
                border-bottom: 2rem solid transparent;
                border-left: 1rem solid transparent;
            }

            .glyphicon {
                top: 50%;
                transform: translateY(-50%);
            }

            &-close {
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.75rem;
                background: none;
                border: 0;
                color: inherit;
            }
        }

        &-text {
            line-height: 24px;
            padding: 0.9rem 1.5rem 0.9rem 2.75rem;
            font-weight: 600;
        }
    }

    &__content {
        display: flex;

        .af-alert__content__right {
            padding: 0 1.5rem;
        }
    }
}

Alert Info Complex

Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office

  • L'adresse du risque ou le capital total déclaré ont été modifiés.
  • Vous devez relancer la vérification des équipements de protection contre le vol.
  • Lorem ipsum
  • Lorem ipsum
Copied
<div class="af-alert af-alert--success">
    <button class="af-alert__icon-close">
        <svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
        </svg>
    </button>
    <h3 class="af-alert__title">
        <div class="af-alert__title-icon">
            <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
            </svg>
        </div>
        <div class="af-alert__title-text">Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office</div>
    </h3>
    <div class="af-alert__content">
        <div class="af-alert__content__left"></div>
        <div class="af-alert__content__right">
            <ul>
                <li>L'adresse du risque ou le capital total déclaré ont été modifiés.</li>
                <li>Vous devez relancer la vérification des équipements de protection contre le vol.</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
            </ul>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

//selector leftBgColor bgColor colorBorder textColor
$typesLite: (success $color-alertSucces-leftBgColor $color-alertSucces-bgColor $color-alertSucces-colorBorder $color-alertSucces-textColor,
    info $color-alertInfo-leftBgColor $color-alertInfo-bgColor $color-alertInfo-colorBorder $color-alertInfo-textColor,
    danger $color-alertDanger-leftBgColor $color-alertDanger-bgColor $color-alertDanger-colorBorder $color-alertDanger-textColor,
    error $color-alertError-leftBgColor $color-alertError-bgColor $color-alertError-colorBorder $color-alertError-textColor);

.af-alert {
    border: 1px solid;
    margin-bottom: 2rem;
    position: relative;

    @each $typeLite in $typesLite {
        &--#{nth($typeLite, 1)} {
            background-color: nth($typeLite, 3);
            border-color: nth($typeLite, 4);
            color: nth($typeLite, 5);

            .af-alert__content {
                color: nth($typeLite, 5);

                .af-alert__content__left {
                    background: nth($typeLite, 2);
                    width: 4.2rem;
                }
            }

            .af-alert__title {
                &-icon {
                    background-color: nth($typeLite, 2);
                    color: $white;
                    width: 4rem;

                    &::after {
                        border-left-color: nth($typeLite, 2);
                    }
                }
            }
        }
    }

    &__title {
        display: flex;
        overflow: hidden;
        color: inherit;
        font-size: 1.1rem;
        margin: 0;

        &-icon {
            position: relative;
            padding: 0 1.3rem;

            &::after {
                content: '';
                position: absolute;
                right: -1rem;
                top: 50%;
                transform: translateY(-50%);
                height: 0;
                width: 0;
                border-top: 2rem solid transparent;
                border-bottom: 2rem solid transparent;
                border-left: 1rem solid transparent;
            }

            .glyphicon {
                top: 50%;
                transform: translateY(-50%);
            }

            &-close {
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.75rem;
                background: none;
                border: 0;
                color: inherit;
            }
        }

        &-text {
            line-height: 24px;
            padding: 0.9rem 1.5rem 0.9rem 2.75rem;
            font-weight: 600;
        }
    }

    &__content {
        display: flex;

        .af-alert__content__right {
            padding: 0 1.5rem;
        }
    }
}

Alert Danger Complex

Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office

  • L'adresse du risque ou le capital total déclaré ont été modifiés.
  • Vous devez relancer la vérification des équipements de protection contre le vol.
  • Lorem ipsum
  • Lorem ipsum
Copied
<div class="af-alert af-alert--error">
    <button class="af-alert__icon-close">
        <svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
        </svg>
    </button>
    <h3 class="af-alert__title">
        <div class="af-alert__title-icon">
            <svg class="glyphicon glyphicon-exclamation-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M4.922 48.828q0-9.219 3.555-17.539t9.609-14.375 14.375-9.609 17.539-3.555 17.539 3.555 14.375 9.609 9.609 14.375 3.555 17.539-3.555 17.539-9.609 14.375-14.375 9.609-17.539 3.555-17.539-3.555-14.375-9.609-9.609-14.375-3.555-17.539zM38.75 29.219l4.531 23.594q0.313 1.563 1.68 2.695t2.93 1.133h4.219q1.563 0 2.93-1.133t1.68-2.695l4.531-23.594q0.313-1.563-0.625-2.695t-2.5-1.133h-16.172q-1.641 0-2.578 1.133t-0.625 2.695zM42.188 72.266h15.625v-7.813h-15.625v7.813z"></path>
            </svg>
        </div>
        <div class="af-alert__title-text">Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office</div>
    </h3>
    <div class="af-alert__content">
        <div class="af-alert__content__left"></div>
        <div class="af-alert__content__right">
            <ul>
                <li>L'adresse du risque ou le capital total déclaré ont été modifiés.</li>
                <li>Vous devez relancer la vérification des équipements de protection contre le vol.</li>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum</li>
            </ul>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

//selector leftBgColor bgColor colorBorder textColor
$typesLite: (success $color-alertSucces-leftBgColor $color-alertSucces-bgColor $color-alertSucces-colorBorder $color-alertSucces-textColor,
    info $color-alertInfo-leftBgColor $color-alertInfo-bgColor $color-alertInfo-colorBorder $color-alertInfo-textColor,
    danger $color-alertDanger-leftBgColor $color-alertDanger-bgColor $color-alertDanger-colorBorder $color-alertDanger-textColor,
    error $color-alertError-leftBgColor $color-alertError-bgColor $color-alertError-colorBorder $color-alertError-textColor);

.af-alert {
    border: 1px solid;
    margin-bottom: 2rem;
    position: relative;

    @each $typeLite in $typesLite {
        &--#{nth($typeLite, 1)} {
            background-color: nth($typeLite, 3);
            border-color: nth($typeLite, 4);
            color: nth($typeLite, 5);

            .af-alert__content {
                color: nth($typeLite, 5);

                .af-alert__content__left {
                    background: nth($typeLite, 2);
                    width: 4.2rem;
                }
            }

            .af-alert__title {
                &-icon {
                    background-color: nth($typeLite, 2);
                    color: $white;
                    width: 4rem;

                    &::after {
                        border-left-color: nth($typeLite, 2);
                    }
                }
            }
        }
    }

    &__title {
        display: flex;
        overflow: hidden;
        color: inherit;
        font-size: 1.1rem;
        margin: 0;

        &-icon {
            position: relative;
            padding: 0 1.3rem;

            &::after {
                content: '';
                position: absolute;
                right: -1rem;
                top: 50%;
                transform: translateY(-50%);
                height: 0;
                width: 0;
                border-top: 2rem solid transparent;
                border-bottom: 2rem solid transparent;
                border-left: 1rem solid transparent;
            }

            .glyphicon {
                top: 50%;
                transform: translateY(-50%);
            }

            &-close {
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.75rem;
                background: none;
                border: 0;
                color: inherit;
            }
        }

        &-text {
            line-height: 24px;
            padding: 0.9rem 1.5rem 0.9rem 2.75rem;
            font-weight: 600;
        }
    }

    &__content {
        display: flex;

        .af-alert__content__right {
            padding: 0 1.5rem;
        }
    }
}

React interactions

Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.

Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.react storybook

Generales Guidelines

Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.

Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.

1) Définition

Une notification permet de communiquer une information ou un résultat d’action dans un bloc flottant, superposé à la page. D’une durée d’affichage déterminée, elle permet à l’utilisateur de comprendre les processus en cours ou achevés sans sortir de son parcours.

alert

2) Use case

a) Une notification doit être utilisée lorsqu’une action menée par l’utilisateur obtient un résultat : validation, erreur, avertissement.

b) Une notification « information » peut être utilisée pour informer l’utilisateur d’une modification de données, de fonctionnement ou indiquer un conseil.

c) Une notification toast se distingue d’une fenêtre modale par sa durée limitée d’affichage.

d) Une notification inline se distingue d’une fenêtre modale par son utilisation au sein d’un bloc parent.

3) DO / DONT

Une variation de notification ne peut pas être utilisé pour un autre type d’information.

3) Avancé

Une notification est composée d’un titre et optionnellement d’un texte.

  • Titre: Doit expliquer succinctement le contexte, qui pourra être complété par un texte.
  • Texte: Doit contenir un minimum d’information précisant le titre.
alert

4) Utilisation

a) Position

Une notification devra être positionnée à [48 px] en dessous du header de la page.

alert

b) Alignement

Une notification doit prendre la largeur d’affichage maximale disponible (jusqu’à 12 colonnes).

c) Contenu

Les titres et textes sont ferrés à gauche.

alert

d) Rédaction

  • Les titres et contenus doivent être le plus clair et concis possible.
  • Le titre doit rentrer sur une seule ligne.

e) Pictogrammes

Aucun pictogramme ne doit être utilisé dans les textes ou les boutons CTA.

f) Variations

  • Information
  • Avertissement
  • Succès
  • Erreur

Chaque notification existe en plusieurs variation:

  • 1 ligne
  • 2 lignes
  • 2 lignes + CTA
alert

Style

Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.

On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System

Imports SASS

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '@axa-fr/react-toolkit-alert/dist/alert.scss';

Typography

Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

Class Font-size (px/rem) Font-weight Font-family
af-alert 16 / 1 400 Source Sans Pro Regular

Colors

BLEU AXA#00008f$color-axa
BLEU Action#3032c1$color-azur
BLEU Action focus#aaabf9$color-azur-focused
Mercury#e5e5e5$color-mercury
Silver#cccccc $color-silver
Button Disabled#c9c9c9 $color-btn-disabled
Button success #1cc578 $color-btn-success
Button success dark #0d844e $color-btn-success-dark
Button success focuced #bdffe1 $color-btn-success-focused
Button danger #f02849 $color-btn-danger
Button danger dark #8f182c $color-btn-danger-dark
Button danger focuced #ffa0af $color-btn-danger-focused
Policy Privacy © 2020 AXA All Rights Reserved