Button

Atom

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

Classic Button

Copied
<button class="af-btn">Button AF</button>
<button class="af-btn af-btn--disabled">Button AF Disabled</button>
<button class="af-btn af-btn--success">Button AF success</button>
<button class="af-btn af-btn--danger">Button AF danger</button>
<button class="af-btn af-btn--small">OK</button>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$active-sort-table-th: $color-table-sorting !default;

@mixin hasIcon($direction) {
    @if $direction=='left' {
        padding-left: 3rem;

        .glyphicon {
            left: 1rem;
        }
    }

    @else {
        padding-right: 3rem;

        .glyphicon {
            right: 1rem;
        }
    }
}

.af-btn {
    font-family: $font-family-base;
    background-color: $color-azur;
    color: $table-inverse-color;
    border: 0;
    border-radius: 0;
    min-width: 10rem;
    cursor: pointer;
    font-weight: 400;
    position: relative;
    font-size: 1em;
    padding: 0.8rem 1.2rem 0.8rem 1.2rem;
    box-shadow: inset 0 -3px $color-axa;
    transition: all 0.2s linear;

    &:hover,
    &:focus {
        color: $white;
        background-color: $color-axa;
    }

    &:focus {
        box-shadow: 0 0 3px 3px $color-azur-focused;
    }

    @include generate-universes() {
        background-color: $color;
        color: $white;
        border-radius: 0;
        min-width: 10rem;
        cursor: pointer;
        font-size: 1em;
        box-shadow: inset 0 -3px darken($color, 20%);
        transition: all 0.2s linear;

        &:hover {
            box-shadow: inset 0 -3px darken($color, 20%);
            background-color: darken($color, 20%);
        }
    }

    &--hasiconLeft,
    &--hasIconLeft {
        @include hasIcon('left');
    }

    &--hasiconRight,
    &--hasIconRight {
        @include hasIcon('right');
    }

    &--disabled {
        cursor: not-allowed;
        background-color: $color-mercury;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;

        &:hover,
        &:focus {
            background-color: $color-mercury;
            box-shadow: inset 0 -3px $color-silver;
            color: $color-btn-disabled;
            border-color: transparent;
        }
    }

    &--success {
        background-color: $color-btn-success;
        box-shadow: inset 0 -3px $color-btn-success-dark;

        &:hover {
            background-color: $color-btn-success;
            box-shadow: inset 0 -3px $color-btn-success;
        }

        &:focus {
            background-color: $color-btn-success;
            box-shadow: 0 0 3px 3px $color-btn-success-focused;
        }
    }

    &--danger {
        background-color: $color-btn-danger;
        box-shadow: inset 0 -3px $color-btn-danger-dark;

        &:hover {
            background-color: $color-btn-danger;
            box-shadow: inset 0 -3px $color-btn-danger;
        }

        &:focus {
            background-color: $color-btn-danger;
            box-shadow: 0 0 3px 3px $color-btn-danger-focused;
        }
    }

    &--reverse {
        color: $color-azur;
        background-color: $table-inverse-color;
        box-shadow: inset 0 -3px $color-azur;
        border: 2px solid $color-azur;
        border-bottom: none;
        padding: 0.625rem 0.3125rem 0.8125rem 0.3125rem;

        &:hover,
        &:focus {
            color: $white;
            background-color: $color-axa;
            box-shadow: inset 0 -3px $color-axa;
            border-color: $color-axa;
        }

        &:focus {
            box-shadow: 0 0 3px 3px $color-azur-focused;
        }
    }

    &--reverse.af-btn--disabled {
        cursor: not-allowed;
        background-color: $white;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;
        border-color: $color-silver;
        border-bottom: none;
    }

    &--reverse.af-btn--hasiconLeft,
    &--reverse.af-btn--hasIconLeft {
        @include hasIcon('left');

        padding-right: 1.2rem;
    }

    &--reverse.af-btn--hasiconRight,
    &--reverse.af-btn--hasIconRight {
        @include hasIcon('right');

        padding-left: 1.2rem;
    }

    &--small {
        padding: 0.625rem 0.3125rem;
        min-width: 3rem;
    }

    &--circle {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid $white;
        background: $color-azur;
        border-radius: 50%;
        text-align: center;
        color: $white;
        box-sizing: border-box;
        position: relative;

        &:hover {
            background-color: $white;
            color: $brand-primary;
            border-color: $brand-primary;
        }

        &:focus {
            color: $white;
            outline: none;

            &:hover {
                color: $brand-primary;
            }
        }

        .glyphicon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 17px;
        }
    }

    &--circle-small {
        @extend .af-btn--circle;

        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
        cursor: pointer;

        .glyphicon {
            width: 10px;
        }

        .af-more-help {
            font-weight: 900;
        }
    }

    &__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    &--circle-reverse {
        background: $white;
        border-color: $brand-primary;
        color: $brand-primary;

        &:focus {
            color: $brand-primary;
            box-shadow: $btn-focus-box-shadow;
            outline: none;

            &:hover {
                color: $white;
            }
        }

        &:hover {
            background: $brand-primary;
            color: $white;
        }
    }

    &--circle-menu {
        @include media-breakpoint-down(sm) {
            height: $menu-button-size;
            width: $menu-button-size;
            line-height: $menu-button-size;
            color: $white;
            border-color: $white;
            background: transparent;

            &:hover {
                color: $brand-primary;
                background: $white;
            }
        }
    }

    &--table-sorting {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-weight: 200;
        text-align: inherit;
        justify-content: space-between;
        cursor: pointer;
        color: white;
        padding: 0.881em 1rem 0.881em 1rem;
        box-shadow: inherit;

        &:focus,
        &:hover {
            box-shadow: none;
        }

        &:hover {
            background-color: $color-table-sorting;
        }

        &--active {
            background: $active-sort-table-th;

            &:focus {
                background-color: $active-sort-table-th;
            }
        }
    }

    .glyphicon {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 17px;
    }

    .af-badge {
        margin-left: 2rem;
    }
}

.af-more-help {
    font-weight: bold;
    font-family: $font-family-serif;
    font-style: italic;
    font-size: 1.2rem;
    vertical-align: middle;
}

Button with icon

Copied
<button class="btn af-btn af-btn--hasiconLeft"><span class="af-btn__text">Button with left icon</span>
    <svg class="glyphicon glyphicon-arrowthin-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M94.4,42.2l0.2,0H27.6l21-21.1c1-1,1.6-2.4,1.6-3.9s-0.6-2.8-1.6-3.9l-3.3-3.3c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6
		L1.6,46.1c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.9l36.1,36.1c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6l3.3-3.3c1-1,1.6-2.4,1.6-3.9
		c0-1.5-0.6-2.8-1.6-3.8L27.4,57.8h67.1c3,0,5.5-2.6,5.5-5.6v-4.6C100,44.6,97.4,42.2,94.4,42.2z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--hasiconLeft af-btn--disabled"><span class="af-btn__text">Button disabled with left icon</span>
    <svg class="glyphicon glyphicon-arrowthin-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M94.4,42.2l0.2,0H27.6l21-21.1c1-1,1.6-2.4,1.6-3.9s-0.6-2.8-1.6-3.9l-3.3-3.3c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6
		L1.6,46.1c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.9l36.1,36.1c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6l3.3-3.3c1-1,1.6-2.4,1.6-3.9
		c0-1.5-0.6-2.8-1.6-3.8L27.4,57.8h67.1c3,0,5.5-2.6,5.5-5.6v-4.6C100,44.6,97.4,42.2,94.4,42.2z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--hasiconLeft af-btn--success"><span class="af-btn__text">Button success with left icon</span>
    <svg class="glyphicon glyphicon-arrowthin-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M94.4,42.2l0.2,0H27.6l21-21.1c1-1,1.6-2.4,1.6-3.9s-0.6-2.8-1.6-3.9l-3.3-3.3c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6
		L1.6,46.1c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.9l36.1,36.1c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6l3.3-3.3c1-1,1.6-2.4,1.6-3.9
		c0-1.5-0.6-2.8-1.6-3.8L27.4,57.8h67.1c3,0,5.5-2.6,5.5-5.6v-4.6C100,44.6,97.4,42.2,94.4,42.2z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--hasiconLeft af-btn--danger"><span class="af-btn__text">Button danger with left icon</span>
    <svg class="glyphicon glyphicon-arrowthin-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M94.4,42.2l0.2,0H27.6l21-21.1c1-1,1.6-2.4,1.6-3.9s-0.6-2.8-1.6-3.9l-3.3-3.3c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6
		L1.6,46.1c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.9l36.1,36.1c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6l3.3-3.3c1-1,1.6-2.4,1.6-3.9
		c0-1.5-0.6-2.8-1.6-3.8L27.4,57.8h67.1c3,0,5.5-2.6,5.5-5.6v-4.6C100,44.6,97.4,42.2,94.4,42.2z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--hasiconRight"><span class="af-btn__text">Button with right icon</span>
    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--hasiconRight af-btn--disabled"><span class="af-btn__text">Button disabled with right icon</span>
    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--hasiconRight af-btn--success"><span class="af-btn__text">Button success with right icon</span>
    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--hasiconRight af-btn--danger"><span class="af-btn__text">Button danger with right icon</span>
    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
    </svg>
</button>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$active-sort-table-th: $color-table-sorting !default;

@mixin hasIcon($direction) {
    @if $direction=='left' {
        padding-left: 3rem;

        .glyphicon {
            left: 1rem;
        }
    }

    @else {
        padding-right: 3rem;

        .glyphicon {
            right: 1rem;
        }
    }
}

.af-btn {
    font-family: $font-family-base;
    background-color: $color-azur;
    color: $table-inverse-color;
    border: 0;
    border-radius: 0;
    min-width: 10rem;
    cursor: pointer;
    font-weight: 400;
    position: relative;
    font-size: 1em;
    padding: 0.8rem 1.2rem 0.8rem 1.2rem;
    box-shadow: inset 0 -3px $color-axa;
    transition: all 0.2s linear;

    &:hover,
    &:focus {
        color: $white;
        background-color: $color-axa;
    }

    &:focus {
        box-shadow: 0 0 3px 3px $color-azur-focused;
    }

    @include generate-universes() {
        background-color: $color;
        color: $white;
        border-radius: 0;
        min-width: 10rem;
        cursor: pointer;
        font-size: 1em;
        box-shadow: inset 0 -3px darken($color, 20%);
        transition: all 0.2s linear;

        &:hover {
            box-shadow: inset 0 -3px darken($color, 20%);
            background-color: darken($color, 20%);
        }
    }

    &--hasiconLeft,
    &--hasIconLeft {
        @include hasIcon('left');
    }

    &--hasiconRight,
    &--hasIconRight {
        @include hasIcon('right');
    }

    &--disabled {
        cursor: not-allowed;
        background-color: $color-mercury;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;

        &:hover,
        &:focus {
            background-color: $color-mercury;
            box-shadow: inset 0 -3px $color-silver;
            color: $color-btn-disabled;
            border-color: transparent;
        }
    }

    &--success {
        background-color: $color-btn-success;
        box-shadow: inset 0 -3px $color-btn-success-dark;

        &:hover {
            background-color: $color-btn-success;
            box-shadow: inset 0 -3px $color-btn-success;
        }

        &:focus {
            background-color: $color-btn-success;
            box-shadow: 0 0 3px 3px $color-btn-success-focused;
        }
    }

    &--danger {
        background-color: $color-btn-danger;
        box-shadow: inset 0 -3px $color-btn-danger-dark;

        &:hover {
            background-color: $color-btn-danger;
            box-shadow: inset 0 -3px $color-btn-danger;
        }

        &:focus {
            background-color: $color-btn-danger;
            box-shadow: 0 0 3px 3px $color-btn-danger-focused;
        }
    }

    &--reverse {
        color: $color-azur;
        background-color: $table-inverse-color;
        box-shadow: inset 0 -3px $color-azur;
        border: 2px solid $color-azur;
        border-bottom: none;
        padding: 0.625rem 0.3125rem 0.8125rem 0.3125rem;

        &:hover,
        &:focus {
            color: $white;
            background-color: $color-axa;
            box-shadow: inset 0 -3px $color-axa;
            border-color: $color-axa;
        }

        &:focus {
            box-shadow: 0 0 3px 3px $color-azur-focused;
        }
    }

    &--reverse.af-btn--disabled {
        cursor: not-allowed;
        background-color: $white;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;
        border-color: $color-silver;
        border-bottom: none;
    }

    &--reverse.af-btn--hasiconLeft,
    &--reverse.af-btn--hasIconLeft {
        @include hasIcon('left');

        padding-right: 1.2rem;
    }

    &--reverse.af-btn--hasiconRight,
    &--reverse.af-btn--hasIconRight {
        @include hasIcon('right');

        padding-left: 1.2rem;
    }

    &--small {
        padding: 0.625rem 0.3125rem;
        min-width: 3rem;
    }

    &--circle {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid $white;
        background: $color-azur;
        border-radius: 50%;
        text-align: center;
        color: $white;
        box-sizing: border-box;
        position: relative;

        &:hover {
            background-color: $white;
            color: $brand-primary;
            border-color: $brand-primary;
        }

        &:focus {
            color: $white;
            outline: none;

            &:hover {
                color: $brand-primary;
            }
        }

        .glyphicon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 17px;
        }
    }

    &--circle-small {
        @extend .af-btn--circle;

        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
        cursor: pointer;

        .glyphicon {
            width: 10px;
        }

        .af-more-help {
            font-weight: 900;
        }
    }

    &__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    &--circle-reverse {
        background: $white;
        border-color: $brand-primary;
        color: $brand-primary;

        &:focus {
            color: $brand-primary;
            box-shadow: $btn-focus-box-shadow;
            outline: none;

            &:hover {
                color: $white;
            }
        }

        &:hover {
            background: $brand-primary;
            color: $white;
        }
    }

    &--circle-menu {
        @include media-breakpoint-down(sm) {
            height: $menu-button-size;
            width: $menu-button-size;
            line-height: $menu-button-size;
            color: $white;
            border-color: $white;
            background: transparent;

            &:hover {
                color: $brand-primary;
                background: $white;
            }
        }
    }

    &--table-sorting {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-weight: 200;
        text-align: inherit;
        justify-content: space-between;
        cursor: pointer;
        color: white;
        padding: 0.881em 1rem 0.881em 1rem;
        box-shadow: inherit;

        &:focus,
        &:hover {
            box-shadow: none;
        }

        &:hover {
            background-color: $color-table-sorting;
        }

        &--active {
            background: $active-sort-table-th;

            &:focus {
                background-color: $active-sort-table-th;
            }
        }
    }

    .glyphicon {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 17px;
    }

    .af-badge {
        margin-left: 2rem;
    }
}

.af-more-help {
    font-weight: bold;
    font-family: $font-family-serif;
    font-style: italic;
    font-size: 1.2rem;
    vertical-align: middle;
}

Button reverse

Copied
<button class="btn af-btn af-btn--reverse" tabindex="-1">Button AF reverse</button>
<button class="btn af-btn af-btn--reverse af-btn--disabled" tabindex="-1">Button AF disabled reverse</button>
<button class="btn af-btn af-btn--reverse af-btn--hasiconLeft" tabindex="-1"><span class="af-btn__text">Button with left icon</span>
    <svg class="glyphicon glyphicon-arrowthin-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M94.4,42.2l0.2,0H27.6l21-21.1c1-1,1.6-2.4,1.6-3.9s-0.6-2.8-1.6-3.9l-3.3-3.3c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6
		L1.6,46.1c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.9l36.1,36.1c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6l3.3-3.3c1-1,1.6-2.4,1.6-3.9
		c0-1.5-0.6-2.8-1.6-3.8L27.4,57.8h67.1c3,0,5.5-2.6,5.5-5.6v-4.6C100,44.6,97.4,42.2,94.4,42.2z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--reverse af-btn--hasiconRight" tabindex="-1"><span class="af-btn__text">Button with right icon</span>
    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--reverse af-btn--hasiconLeft" tabindex="-1"><span class="af-btn__text">Button with left icon</span>
    <svg class="glyphicon glyphicon-globe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M3.516 50.234q0-9.531 3.711-18.164t9.961-14.883 14.883-9.961 18.164-3.711q9.453 0 18.086 3.711t14.883 9.961 9.961 14.883 3.711 18.164q0 12.656-6.25 23.398t-16.992 16.992-23.398 6.25-23.438-6.25-17.031-16.992-6.25-23.398zM22.969 35.938q-0.625 2.578 0.43 7.227t0.586 6.836q0 0.703 1.328 3.438t1.25 4.688q0.938 0 1.797 0.43t1.797 1.172 1.563 1.055q1.875 0.938 8.437 3.281 1.719 0.625 4.141 2.461t4.648 3.008 4.492 0.859q0.625 1.406-1.172 4.297t-1.563 4.453q3.281 5.547 6.797 6.25 0 0.469-0.234 1.211t-0.273 1.133 0.352 1.328q8.125 0.234 17.266-8.75 2.344-2.266 3.672-3.672t2.695-3.828 1.602-4.844q-1.094-0.703-2.891-0.742t-2.813-0.586q-1.094-0.547-3.828-1.172t-4.063-1.484q-0.703 0-3.086 0.039t-3.633 0.117-3.047 0.508-3.047 1.289q-3.906 2.734-5.156 0.938-0.313-0.156-0.273-1.992t0.039-1.992q-0.469-1.016-2.070-1.328t-1.914-0.547q0.156-1.719-0.156-3.203t-1.289-2.188-3.008 1.563q-1.797 1.953-3.281-0.313-1.484-2.188-0.625-4.531 0.469-1.25 1.719-1.719 0.469 0.078 2.031 0.117t2.617 0.313 1.523 1.055q0.938 1.484 2.5 2.93t2.656 2.148l1.094 0.625q0-0.234 0.742-3.086t0.43-4.492q-0.313-1.797 1.133-3.477t1.758-2.461q0.391-1.094 0.781-2.734t0.664-2.422 1.211-1.758 2.656-1.68q-0.469-1.406 0.781-2.891 0.625 0 1.836 0.117t1.914 0.117 1.602-0.352 1.602-1.211q-0.781-1.797-2.383-3.32t-2.969-2.344-3.828-2.070-3.398-1.797q0.859-3.047 0.156-3.438 2.422 1.016 4.531 1.133t3.047-0.273l0.859-0.313q0.547-2.813-1.289-4.18t-5.039-2.227-4.375-1.797q-1.484 0.234-2.891 0-1.172 0.937-2.852 1.641t-2.695 0.938-3.438 0.625-3.047 0.469q-1.172 0.234-3.555-0.039t-3.555 0.195q-1.641 0.547-4.063 2.070t-2.656 2.695q-0.234 0.859 0.508 1.758t0.664 1.445q-0.234 2.656-2.148 7.070t-2.305 6.211zM43.594 25.313q0.234-0.938 1.25-2.344t1.25-1.953q0.781 0.781 1.445 0.781t1.094-0.469 1.133-1.133 1.25-0.977q0 1.875 1.328 5.195t1.328 3.398q-0.703-0.156-2.422-0.391t-2.813-0.391-2.5-0.625-2.344-1.094zM57.188 18.516v0z"></path>
    </svg>
</button>
<button class="btn af-btn af-btn--reverse af-btn--disabled af-btn--hasiconRight" tabindex="-1"><span class="af-btn__text">Button disabled with right icon</span>
    <svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
		l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
		c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
    </svg>
</button>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$active-sort-table-th: $color-table-sorting !default;

@mixin hasIcon($direction) {
    @if $direction=='left' {
        padding-left: 3rem;

        .glyphicon {
            left: 1rem;
        }
    }

    @else {
        padding-right: 3rem;

        .glyphicon {
            right: 1rem;
        }
    }
}

.af-btn {
    font-family: $font-family-base;
    background-color: $color-azur;
    color: $table-inverse-color;
    border: 0;
    border-radius: 0;
    min-width: 10rem;
    cursor: pointer;
    font-weight: 400;
    position: relative;
    font-size: 1em;
    padding: 0.8rem 1.2rem 0.8rem 1.2rem;
    box-shadow: inset 0 -3px $color-axa;
    transition: all 0.2s linear;

    &:hover,
    &:focus {
        color: $white;
        background-color: $color-axa;
    }

    &:focus {
        box-shadow: 0 0 3px 3px $color-azur-focused;
    }

    @include generate-universes() {
        background-color: $color;
        color: $white;
        border-radius: 0;
        min-width: 10rem;
        cursor: pointer;
        font-size: 1em;
        box-shadow: inset 0 -3px darken($color, 20%);
        transition: all 0.2s linear;

        &:hover {
            box-shadow: inset 0 -3px darken($color, 20%);
            background-color: darken($color, 20%);
        }
    }

    &--hasiconLeft,
    &--hasIconLeft {
        @include hasIcon('left');
    }

    &--hasiconRight,
    &--hasIconRight {
        @include hasIcon('right');
    }

    &--disabled {
        cursor: not-allowed;
        background-color: $color-mercury;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;

        &:hover,
        &:focus {
            background-color: $color-mercury;
            box-shadow: inset 0 -3px $color-silver;
            color: $color-btn-disabled;
            border-color: transparent;
        }
    }

    &--success {
        background-color: $color-btn-success;
        box-shadow: inset 0 -3px $color-btn-success-dark;

        &:hover {
            background-color: $color-btn-success;
            box-shadow: inset 0 -3px $color-btn-success;
        }

        &:focus {
            background-color: $color-btn-success;
            box-shadow: 0 0 3px 3px $color-btn-success-focused;
        }
    }

    &--danger {
        background-color: $color-btn-danger;
        box-shadow: inset 0 -3px $color-btn-danger-dark;

        &:hover {
            background-color: $color-btn-danger;
            box-shadow: inset 0 -3px $color-btn-danger;
        }

        &:focus {
            background-color: $color-btn-danger;
            box-shadow: 0 0 3px 3px $color-btn-danger-focused;
        }
    }

    &--reverse {
        color: $color-azur;
        background-color: $table-inverse-color;
        box-shadow: inset 0 -3px $color-azur;
        border: 2px solid $color-azur;
        border-bottom: none;
        padding: 0.625rem 0.3125rem 0.8125rem 0.3125rem;

        &:hover,
        &:focus {
            color: $white;
            background-color: $color-axa;
            box-shadow: inset 0 -3px $color-axa;
            border-color: $color-axa;
        }

        &:focus {
            box-shadow: 0 0 3px 3px $color-azur-focused;
        }
    }

    &--reverse.af-btn--disabled {
        cursor: not-allowed;
        background-color: $white;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;
        border-color: $color-silver;
        border-bottom: none;
    }

    &--reverse.af-btn--hasiconLeft,
    &--reverse.af-btn--hasIconLeft {
        @include hasIcon('left');

        padding-right: 1.2rem;
    }

    &--reverse.af-btn--hasiconRight,
    &--reverse.af-btn--hasIconRight {
        @include hasIcon('right');

        padding-left: 1.2rem;
    }

    &--small {
        padding: 0.625rem 0.3125rem;
        min-width: 3rem;
    }

    &--circle {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid $white;
        background: $color-azur;
        border-radius: 50%;
        text-align: center;
        color: $white;
        box-sizing: border-box;
        position: relative;

        &:hover {
            background-color: $white;
            color: $brand-primary;
            border-color: $brand-primary;
        }

        &:focus {
            color: $white;
            outline: none;

            &:hover {
                color: $brand-primary;
            }
        }

        .glyphicon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 17px;
        }
    }

    &--circle-small {
        @extend .af-btn--circle;

        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
        cursor: pointer;

        .glyphicon {
            width: 10px;
        }

        .af-more-help {
            font-weight: 900;
        }
    }

    &__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    &--circle-reverse {
        background: $white;
        border-color: $brand-primary;
        color: $brand-primary;

        &:focus {
            color: $brand-primary;
            box-shadow: $btn-focus-box-shadow;
            outline: none;

            &:hover {
                color: $white;
            }
        }

        &:hover {
            background: $brand-primary;
            color: $white;
        }
    }

    &--circle-menu {
        @include media-breakpoint-down(sm) {
            height: $menu-button-size;
            width: $menu-button-size;
            line-height: $menu-button-size;
            color: $white;
            border-color: $white;
            background: transparent;

            &:hover {
                color: $brand-primary;
                background: $white;
            }
        }
    }

    &--table-sorting {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-weight: 200;
        text-align: inherit;
        justify-content: space-between;
        cursor: pointer;
        color: white;
        padding: 0.881em 1rem 0.881em 1rem;
        box-shadow: inherit;

        &:focus,
        &:hover {
            box-shadow: none;
        }

        &:hover {
            background-color: $color-table-sorting;
        }

        &--active {
            background: $active-sort-table-th;

            &:focus {
                background-color: $active-sort-table-th;
            }
        }
    }

    .glyphicon {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 17px;
    }

    .af-badge {
        margin-left: 2rem;
    }
}

.af-more-help {
    font-weight: bold;
    font-family: $font-family-serif;
    font-style: italic;
    font-size: 1.2rem;
    vertical-align: middle;
}

Button circle

Copied
<div class="tk-block-demo">
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-pushpin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M3.125 95.703l23.672-29.688 16.172-16.25-16.406-16.563h23.438l20.859-21.797-2.734-2.813q-1.172-1.094-1.172-2.734t1.172-2.734q1.094-1.172 2.734-1.172t2.734 1.172l22.109 22.031q1.172 1.172 1.172 2.813t-1.172 2.734q-1.094 1.172-2.734 1.172t-2.734-1.172l-2.813-2.734-21.797 20.859v23.438l-16.563-16.406-16.25 16.172z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M1.563 90.667v-56.51h16.146l8.073 16.146h48.438l8.073-16.146h16.146v56.51h-16.146v-16.146h-64.583v16.146h-16.146zM21.987 31.816l3.229 10.010h47.792l5.005-10.010-7.588-27.932q-0.162-0.888-0.807-1.453t-1.453-0.565h-36.328q-0.807 0-1.453 0.565t-0.807 1.453zM24.247 96.803l3.068-12.271q0.162-0.807 0.928-1.372t1.574-0.565h40.365q0.807 0 1.574 0.565t0.928 1.372l3.068 12.271q0.162 0.807-0.283 1.372t-1.251 0.565h-48.438q-0.807 0-1.251-0.565t-0.283-1.372z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-arrow-xs-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M86.799 36.75h-73.299l36.654 35.636 36.645-35.636z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M8.333 34.979q0-5.333 2.333-10.25t6.083-8.375 8.708-5.333 9.917-1.708 10 3.208 8.708 8.708q4-5.75 9.125-8.75t10.125-3.167 9.875 1.708 8.542 5.333 5.917 8.375 2.25 10.25q0 4.75-2.792 9.792t-7.833 10.375-10.542 10.625-12.5 12.708-12.167 14.5q-5.167-7.083-12.125-14.5t-12.458-12.708-10.542-10.625-7.833-10.375-2.792-9.792z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
                <path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-menu-hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M3.649,1.21h92.701c0.65,0,1.222,0.243,1.708,0.73c0.487,0.49,0.732,1.057,0.732,1.71v14.638
	c0,0.65-0.245,1.221-0.732,1.707c-0.486,0.488-1.058,0.732-1.708,0.732H3.649c-0.653,0-1.219-0.244-1.708-0.732
	c-0.489-0.486-0.732-1.057-0.732-1.707V3.65c0-0.653,0.243-1.22,0.732-1.71C2.431,1.453,2.996,1.21,3.649,1.21L3.649,1.21z
	 M3.649,40.241h92.701c0.65,0,1.222,0.244,1.708,0.729c0.487,0.486,0.732,1.059,0.732,1.709v14.638c0,0.65-0.245,1.222-0.732,1.708
	c-0.486,0.488-1.058,0.736-1.708,0.736H3.649c-0.653,0-1.219-0.248-1.708-0.736c-0.489-0.486-0.732-1.058-0.732-1.708V42.679
	c0-0.65,0.243-1.223,0.732-1.709C2.431,40.485,2.996,40.241,3.649,40.241L3.649,40.241z M3.649,79.272h92.701
	c0.65,0,1.222,0.241,1.708,0.731c0.487,0.49,0.732,1.058,0.732,1.712v14.638c0,0.65-0.245,1.219-0.732,1.708
	c-0.486,0.485-1.058,0.729-1.708,0.729H3.649c-0.653,0-1.219-0.243-1.708-0.729c-0.489-0.489-0.732-1.058-0.732-1.708V81.716
	c0-0.654,0.243-1.222,0.732-1.712S2.996,79.272,3.649,79.272L3.649,79.272z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-remove" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M8.833 73.813l23.5-23.5-23.5-23.5 17.667-17.667 23.5 23.5 23.5-23.5 17.667 17.667-23.5 23.5 23.5 23.5-17.667 17.667-23.5-23.5-23.5 23.5z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-filter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M8.333 7.083v-8.333h83.333v8.333h-83.333zM12.5 15.417h75l-29.167 41.667v25l-16.667 16.667v-41.667z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-floppy-disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M3.125 92.5v-83.333q0-1.667 1.208-2.917t2.958-1.25h20.833v25h41.667v-25h8.333l16.667 16.667v70.833q0 1.75-1.25 2.958t-2.917 1.208h-12.5v-33.333h-58.333v33.333h-12.5q-1.75 0-2.958-1.208t-1.208-2.958zM53.125 21.667h8.333v-16.667h-8.333v16.667z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle" href="#" role="button">
            <svg class="glyphicon glyphicon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M3.125 101.875v-22.917q0-0.917 0.583-1.5t1.5-0.583h87.333q0.917 0 1.583 0.625t0.667 1.458v22.917h-91.667zM11.458 43.542h25v25h25v-25h24.583l-37.083-41.667zM78.125 89.375h8.333v-4.167h-8.333v4.167z"></path>
            </svg></a></div>
</div>
<div class="tk-block-demo">
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-pushpin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M3.125 95.703l23.672-29.688 16.172-16.25-16.406-16.563h23.438l20.859-21.797-2.734-2.813q-1.172-1.094-1.172-2.734t1.172-2.734q1.094-1.172 2.734-1.172t2.734 1.172l22.109 22.031q1.172 1.172 1.172 2.813t-1.172 2.734q-1.094 1.172-2.734 1.172t-2.734-1.172l-2.813-2.734-21.797 20.859v23.438l-16.563-16.406-16.25 16.172z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M1.563 90.667v-56.51h16.146l8.073 16.146h48.438l8.073-16.146h16.146v56.51h-16.146v-16.146h-64.583v16.146h-16.146zM21.987 31.816l3.229 10.010h47.792l5.005-10.010-7.588-27.932q-0.162-0.888-0.807-1.453t-1.453-0.565h-36.328q-0.807 0-1.453 0.565t-0.807 1.453zM24.247 96.803l3.068-12.271q0.162-0.807 0.928-1.372t1.574-0.565h40.365q0.807 0 1.574 0.565t0.928 1.372l3.068 12.271q0.162 0.807-0.283 1.372t-1.251 0.565h-48.438q-0.807 0-1.251-0.565t-0.283-1.372z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-arrow-xs-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M86.799 36.75h-73.299l36.654 35.636 36.645-35.636z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M8.333 34.979q0-5.333 2.333-10.25t6.083-8.375 8.708-5.333 9.917-1.708 10 3.208 8.708 8.708q4-5.75 9.125-8.75t10.125-3.167 9.875 1.708 8.542 5.333 5.917 8.375 2.25 10.25q0 4.75-2.792 9.792t-7.833 10.375-10.542 10.625-12.5 12.708-12.167 14.5q-5.167-7.083-12.125-14.5t-12.458-12.708-10.542-10.625-7.833-10.375-2.792-9.792z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-eye-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 100">
                <path d="M1.167 48.75l2.167-3.333q0.5-0.833 1.667-2.5t4.083-5.292 6.208-7.125 8.083-7.5 9.708-6.958 11.042-4.917 12.125-1.958 12.125 1.958 11.042 4.917 9.708 6.958 8.083 7.5 6.208 7.125 4.083 5.292 1.667 2.5l2.167 3.333-2.167 3.333q-0.5 0.833-1.667 2.5t-4.083 5.292-6.208 7.125-8.083 7.5-9.708 6.958-11.042 4.917-12.125 1.958-12.125-1.958-11.042-4.917-9.708-6.958-8.083-7.5-6.208-7.125-4.083-5.292-1.667-2.5zM16.25 48.75q0.583 0.833 3.375 4.833t4.667 6.542 5.667 6.458 7.292 6.25 8.583 4.125 10.417 1.792 10.292-1.667 8.375-3.792 7.125-5.958 5.542-6.292 4.833-6.792 3.917-5.5q-0.083-0.083-2.375-3.125t-3.5-4.583-3.625-4.417-4.792-5.292-4.875-4.5q4.083 6.167 4.083 13.583 0 10.333-7.333 17.667t-17.667 7.333-17.667-7.333-7.333-17.667q0-7.083 3.833-13.167-8.5 7.25-18.833 21.5zM37.667 44.083q4.083 10.333 12.833 15.917l8.75-8.75q-3.083-2-6.25-6t-4.75-7l-1.667-3z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-menu-hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M3.649,1.21h92.701c0.65,0,1.222,0.243,1.708,0.73c0.487,0.49,0.732,1.057,0.732,1.71v14.638
	c0,0.65-0.245,1.221-0.732,1.707c-0.486,0.488-1.058,0.732-1.708,0.732H3.649c-0.653,0-1.219-0.244-1.708-0.732
	c-0.489-0.486-0.732-1.057-0.732-1.707V3.65c0-0.653,0.243-1.22,0.732-1.71C2.431,1.453,2.996,1.21,3.649,1.21L3.649,1.21z
	 M3.649,40.241h92.701c0.65,0,1.222,0.244,1.708,0.729c0.487,0.486,0.732,1.059,0.732,1.709v14.638c0,0.65-0.245,1.222-0.732,1.708
	c-0.486,0.488-1.058,0.736-1.708,0.736H3.649c-0.653,0-1.219-0.248-1.708-0.736c-0.489-0.486-0.732-1.058-0.732-1.708V42.679
	c0-0.65,0.243-1.223,0.732-1.709C2.431,40.485,2.996,40.241,3.649,40.241L3.649,40.241z M3.649,79.272h92.701
	c0.65,0,1.222,0.241,1.708,0.731c0.487,0.49,0.732,1.058,0.732,1.712v14.638c0,0.65-0.245,1.219-0.732,1.708
	c-0.486,0.485-1.058,0.729-1.708,0.729H3.649c-0.653,0-1.219-0.243-1.708-0.729c-0.489-0.489-0.732-1.058-0.732-1.708V81.716
	c0-0.654,0.243-1.222,0.732-1.712S2.996,79.272,3.649,79.272L3.649,79.272z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-remove" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M8.833 73.813l23.5-23.5-23.5-23.5 17.667-17.667 23.5 23.5 23.5-23.5 17.667 17.667-23.5 23.5 23.5 23.5-17.667 17.667-23.5-23.5-23.5 23.5z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-filter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M8.333 7.083v-8.333h83.333v8.333h-83.333zM12.5 15.417h75l-29.167 41.667v25l-16.667 16.667v-41.667z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-floppy-disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M3.125 92.5v-83.333q0-1.667 1.208-2.917t2.958-1.25h20.833v25h41.667v-25h8.333l16.667 16.667v70.833q0 1.75-1.25 2.958t-2.917 1.208h-12.5v-33.333h-58.333v33.333h-12.5q-1.75 0-2.958-1.208t-1.208-2.958zM53.125 21.667h8.333v-16.667h-8.333v16.667z"></path>
            </svg></a></div>
    <div class="fordemo"><a class="af-btn--circle-small" href="#" role="button">
            <svg class="glyphicon glyphicon-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path d="M3.125 101.875v-22.917q0-0.917 0.583-1.5t1.5-0.583h87.333q0.917 0 1.583 0.625t0.667 1.458v22.917h-91.667zM11.458 43.542h25v25h25v-25h24.583l-37.083-41.667zM78.125 89.375h8.333v-4.167h-8.333v4.167z"></path>
            </svg></a></div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$active-sort-table-th: $color-table-sorting !default;

@mixin hasIcon($direction) {
    @if $direction=='left' {
        padding-left: 3rem;

        .glyphicon {
            left: 1rem;
        }
    }

    @else {
        padding-right: 3rem;

        .glyphicon {
            right: 1rem;
        }
    }
}

.af-btn {
    font-family: $font-family-base;
    background-color: $color-azur;
    color: $table-inverse-color;
    border: 0;
    border-radius: 0;
    min-width: 10rem;
    cursor: pointer;
    font-weight: 400;
    position: relative;
    font-size: 1em;
    padding: 0.8rem 1.2rem 0.8rem 1.2rem;
    box-shadow: inset 0 -3px $color-axa;
    transition: all 0.2s linear;

    &:hover,
    &:focus {
        color: $white;
        background-color: $color-axa;
    }

    &:focus {
        box-shadow: 0 0 3px 3px $color-azur-focused;
    }

    @include generate-universes() {
        background-color: $color;
        color: $white;
        border-radius: 0;
        min-width: 10rem;
        cursor: pointer;
        font-size: 1em;
        box-shadow: inset 0 -3px darken($color, 20%);
        transition: all 0.2s linear;

        &:hover {
            box-shadow: inset 0 -3px darken($color, 20%);
            background-color: darken($color, 20%);
        }
    }

    &--hasiconLeft,
    &--hasIconLeft {
        @include hasIcon('left');
    }

    &--hasiconRight,
    &--hasIconRight {
        @include hasIcon('right');
    }

    &--disabled {
        cursor: not-allowed;
        background-color: $color-mercury;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;

        &:hover,
        &:focus {
            background-color: $color-mercury;
            box-shadow: inset 0 -3px $color-silver;
            color: $color-btn-disabled;
            border-color: transparent;
        }
    }

    &--success {
        background-color: $color-btn-success;
        box-shadow: inset 0 -3px $color-btn-success-dark;

        &:hover {
            background-color: $color-btn-success;
            box-shadow: inset 0 -3px $color-btn-success;
        }

        &:focus {
            background-color: $color-btn-success;
            box-shadow: 0 0 3px 3px $color-btn-success-focused;
        }
    }

    &--danger {
        background-color: $color-btn-danger;
        box-shadow: inset 0 -3px $color-btn-danger-dark;

        &:hover {
            background-color: $color-btn-danger;
            box-shadow: inset 0 -3px $color-btn-danger;
        }

        &:focus {
            background-color: $color-btn-danger;
            box-shadow: 0 0 3px 3px $color-btn-danger-focused;
        }
    }

    &--reverse {
        color: $color-azur;
        background-color: $table-inverse-color;
        box-shadow: inset 0 -3px $color-azur;
        border: 2px solid $color-azur;
        border-bottom: none;
        padding: 0.625rem 0.3125rem 0.8125rem 0.3125rem;

        &:hover,
        &:focus {
            color: $white;
            background-color: $color-axa;
            box-shadow: inset 0 -3px $color-axa;
            border-color: $color-axa;
        }

        &:focus {
            box-shadow: 0 0 3px 3px $color-azur-focused;
        }
    }

    &--reverse.af-btn--disabled {
        cursor: not-allowed;
        background-color: $white;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;
        border-color: $color-silver;
        border-bottom: none;
    }

    &--reverse.af-btn--hasiconLeft,
    &--reverse.af-btn--hasIconLeft {
        @include hasIcon('left');

        padding-right: 1.2rem;
    }

    &--reverse.af-btn--hasiconRight,
    &--reverse.af-btn--hasIconRight {
        @include hasIcon('right');

        padding-left: 1.2rem;
    }

    &--small {
        padding: 0.625rem 0.3125rem;
        min-width: 3rem;
    }

    &--circle {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid $white;
        background: $color-azur;
        border-radius: 50%;
        text-align: center;
        color: $white;
        box-sizing: border-box;
        position: relative;

        &:hover {
            background-color: $white;
            color: $brand-primary;
            border-color: $brand-primary;
        }

        &:focus {
            color: $white;
            outline: none;

            &:hover {
                color: $brand-primary;
            }
        }

        .glyphicon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 17px;
        }
    }

    &--circle-small {
        @extend .af-btn--circle;

        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
        cursor: pointer;

        .glyphicon {
            width: 10px;
        }

        .af-more-help {
            font-weight: 900;
        }
    }

    &__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    &--circle-reverse {
        background: $white;
        border-color: $brand-primary;
        color: $brand-primary;

        &:focus {
            color: $brand-primary;
            box-shadow: $btn-focus-box-shadow;
            outline: none;

            &:hover {
                color: $white;
            }
        }

        &:hover {
            background: $brand-primary;
            color: $white;
        }
    }

    &--circle-menu {
        @include media-breakpoint-down(sm) {
            height: $menu-button-size;
            width: $menu-button-size;
            line-height: $menu-button-size;
            color: $white;
            border-color: $white;
            background: transparent;

            &:hover {
                color: $brand-primary;
                background: $white;
            }
        }
    }

    &--table-sorting {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-weight: 200;
        text-align: inherit;
        justify-content: space-between;
        cursor: pointer;
        color: white;
        padding: 0.881em 1rem 0.881em 1rem;
        box-shadow: inherit;

        &:focus,
        &:hover {
            box-shadow: none;
        }

        &:hover {
            background-color: $color-table-sorting;
        }

        &--active {
            background: $active-sort-table-th;

            &:focus {
                background-color: $active-sort-table-th;
            }
        }
    }

    .glyphicon {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 17px;
    }

    .af-badge {
        margin-left: 2rem;
    }
}

.af-more-help {
    font-weight: bold;
    font-family: $font-family-serif;
    font-style: italic;
    font-size: 1.2rem;
    vertical-align: middle;
}

Button ghost

Simple link
Link with icon
Back Link
Link plus
Link edition
Link print
Link question
Link new window
Copied
<div class="tk-block-demo"><a class="af-link" href="#">Simple link</a></div>
<div class="tk-block-demo"><a class="af-link af-link--hasIconLeft" href="#">
        <svg class="glyphicon glyphicon-plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M0 62.292v-25h33.333v-33.333h25v33.333h33.333v25h-33.333v33.333h-25v-33.333h-33.333z"></path>
        </svg><span class="af-link__text">Link with icon</span></a></div>
<div class="tk-block-demo"><a class="af-link af-link--hasIconLeft" href="#">
        <svg class="glyphicon glyphicon-arrowthin-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M94.4,42.2l0.2,0H27.6l21-21.1c1-1,1.6-2.4,1.6-3.9s-0.6-2.8-1.6-3.9l-3.3-3.3c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6
		L1.6,46.1c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.9l36.1,36.1c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6l3.3-3.3c1-1,1.6-2.4,1.6-3.9
		c0-1.5-0.6-2.8-1.6-3.8L27.4,57.8h67.1c3,0,5.5-2.6,5.5-5.6v-4.6C100,44.6,97.4,42.2,94.4,42.2z"></path>
        </svg><span class="af-link__text">Back Link</span></a></div>
<div class="tk-block-demo"><a class="af-link af-link--hasIconLeft" href="#">
        <svg class="glyphicon glyphicon-plus-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M16.461,18.546C-1.883,36.89-1.883,66.627,16.46,84.97s48.08,18.343,66.423-0.001c18.342-18.342,18.342-48.079-0.001-66.422
	C64.54,0.204,34.803,0.204,16.461,18.546z M75.712,47.392c2.658,0.001,4.814,1.953,4.817,4.364c0.002,2.411-2.157,4.364-4.813,4.363
	l-21.68,0.001l0.001,21.678c-0.005,2.652-1.956,4.81-4.365,4.814c-2.409-0.001-4.361-2.16-4.364-4.817V56.12H23.635
	c-2.658-0.003-4.814-1.953-4.817-4.363c-0.001-2.413,2.157-4.365,4.813-4.366l21.678,0.001l0.001-21.68
	c0.003-2.651,1.954-4.807,4.364-4.812c2.408,0,4.361,2.158,4.363,4.817v21.675H75.712z"></path>
        </svg><span class="af-link__text">Link plus</span></a></div>
<div class="tk-block-demo"><a class="af-link af-link--hasIconLeft" href="#">
        <svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
            <path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
        </svg><span class="af-link__text">Link edition</span></a></div>
<div class="tk-block-demo"><a class="af-link af-link--hasIconLeft" href="#">
        <svg class="glyphicon glyphicon-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M1.563 90.667v-56.51h16.146l8.073 16.146h48.438l8.073-16.146h16.146v56.51h-16.146v-16.146h-64.583v16.146h-16.146zM21.987 31.816l3.229 10.010h47.792l5.005-10.010-7.588-27.932q-0.162-0.888-0.807-1.453t-1.453-0.565h-36.328q-0.807 0-1.453 0.565t-0.807 1.453zM24.247 96.803l3.068-12.271q0.162-0.807 0.928-1.372t1.574-0.565h40.365q0.807 0 1.574 0.565t0.928 1.372l3.068 12.271q0.162 0.807-0.283 1.372t-1.251 0.565h-48.438q-0.807 0-1.251-0.565t-0.283-1.372z"></path>
        </svg><span class="af-link__text">Link print</span></a></div>
<div class="tk-block-demo"><a class="af-link af-link--hasIconLeft" href="#">
        <svg class="glyphicon glyphicon-question-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M50,0.708c-27.222,0-49.289,22.063-49.289,49.289c0,27.229,22.067,49.295,49.289,49.295
	c27.222,0,49.289-22.069,49.289-49.295C99.289,22.778,77.223,0.708,50,0.708z M56,79.273h-9.93V68.717H56V79.273z M68.146,44.188
	c-0.969,2.129-2.184,3.667-3.313,4.941c-1.256,1.414-2.363,2.753-6.168,5.996c-1.059,0.903-1.846,1.613-2.154,2.388
	c-0.313,0.775-0.484,2.46-0.512,5.046l-9.93,0.154v-5.706c0-1.91,0.389-3.419,1.161-4.519c0.774-1.101,2.47-2.663,5.089-4.687
	c4.002-3.071,6-6.323,6-9.759c0-2.59-0.783-4.648-2.344-6.168c-1.559-1.517-3.598-2.283-6.108-2.283
	c-5.805,0-9.225,4.009-10.266,12.039l-9.207-1.645c0.562-6.001,2.775-10.711,6.65-14.135c3.875-3.422,8.512-5.137,13.924-5.137
	c5.377,0,9.831,1.602,13.352,4.802c3.52,3.197,5.283,7.169,5.283,11.932c0.006,2.364-0.484,4.61-1.453,6.736L68.146,44.188z"></path>
        </svg><span class="af-link__text">Link question</span></a></div>
<div class="tk-block-demo"><a class="af-link af-link--hasIconRight" href="#"><span class="af-link__text">Link new window</span>
        <svg class="glyphicon glyphicon-new-window" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 100">
            <path d="M0 65.417q0 13.75 9.792 23.542t23.542 9.792h25q13.583 0 23.458-9.792t9.875-23.542v-8.167l-6.5-6.083-10.167 10.25v12.333q0 3.417-2.458 5.875t-5.875 2.458h-41.667q-3.417 0-5.875-2.458t-2.458-5.875v-41.667q0-3.417 2.458-5.875t5.875-2.458h13l9.833-10.167-6.167-6.5h-8.333q-13.75 0-23.542 9.792t-9.792 23.542v25zM41.333 39.667l29.417-28.5-12.417-12.417h41.667v41.667l-12.417-12.417-28.5 29.417z"></path>
        </svg></a></div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$active-sort-table-th: $color-table-sorting !default;

@mixin hasIcon($direction) {
    @if $direction=='left' {
        padding-left: 3rem;

        .glyphicon {
            left: 1rem;
        }
    }

    @else {
        padding-right: 3rem;

        .glyphicon {
            right: 1rem;
        }
    }
}

.af-btn {
    font-family: $font-family-base;
    background-color: $color-azur;
    color: $table-inverse-color;
    border: 0;
    border-radius: 0;
    min-width: 10rem;
    cursor: pointer;
    font-weight: 400;
    position: relative;
    font-size: 1em;
    padding: 0.8rem 1.2rem 0.8rem 1.2rem;
    box-shadow: inset 0 -3px $color-axa;
    transition: all 0.2s linear;

    &:hover,
    &:focus {
        color: $white;
        background-color: $color-axa;
    }

    &:focus {
        box-shadow: 0 0 3px 3px $color-azur-focused;
    }

    @include generate-universes() {
        background-color: $color;
        color: $white;
        border-radius: 0;
        min-width: 10rem;
        cursor: pointer;
        font-size: 1em;
        box-shadow: inset 0 -3px darken($color, 20%);
        transition: all 0.2s linear;

        &:hover {
            box-shadow: inset 0 -3px darken($color, 20%);
            background-color: darken($color, 20%);
        }
    }

    &--hasiconLeft,
    &--hasIconLeft {
        @include hasIcon('left');
    }

    &--hasiconRight,
    &--hasIconRight {
        @include hasIcon('right');
    }

    &--disabled {
        cursor: not-allowed;
        background-color: $color-mercury;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;

        &:hover,
        &:focus {
            background-color: $color-mercury;
            box-shadow: inset 0 -3px $color-silver;
            color: $color-btn-disabled;
            border-color: transparent;
        }
    }

    &--success {
        background-color: $color-btn-success;
        box-shadow: inset 0 -3px $color-btn-success-dark;

        &:hover {
            background-color: $color-btn-success;
            box-shadow: inset 0 -3px $color-btn-success;
        }

        &:focus {
            background-color: $color-btn-success;
            box-shadow: 0 0 3px 3px $color-btn-success-focused;
        }
    }

    &--danger {
        background-color: $color-btn-danger;
        box-shadow: inset 0 -3px $color-btn-danger-dark;

        &:hover {
            background-color: $color-btn-danger;
            box-shadow: inset 0 -3px $color-btn-danger;
        }

        &:focus {
            background-color: $color-btn-danger;
            box-shadow: 0 0 3px 3px $color-btn-danger-focused;
        }
    }

    &--reverse {
        color: $color-azur;
        background-color: $table-inverse-color;
        box-shadow: inset 0 -3px $color-azur;
        border: 2px solid $color-azur;
        border-bottom: none;
        padding: 0.625rem 0.3125rem 0.8125rem 0.3125rem;

        &:hover,
        &:focus {
            color: $white;
            background-color: $color-axa;
            box-shadow: inset 0 -3px $color-axa;
            border-color: $color-axa;
        }

        &:focus {
            box-shadow: 0 0 3px 3px $color-azur-focused;
        }
    }

    &--reverse.af-btn--disabled {
        cursor: not-allowed;
        background-color: $white;
        box-shadow: inset 0 -3px $color-silver;
        color: $color-btn-disabled;
        border-color: $color-silver;
        border-bottom: none;
    }

    &--reverse.af-btn--hasiconLeft,
    &--reverse.af-btn--hasIconLeft {
        @include hasIcon('left');

        padding-right: 1.2rem;
    }

    &--reverse.af-btn--hasiconRight,
    &--reverse.af-btn--hasIconRight {
        @include hasIcon('right');

        padding-left: 1.2rem;
    }

    &--small {
        padding: 0.625rem 0.3125rem;
        min-width: 3rem;
    }

    &--circle {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 1px solid $white;
        background: $color-azur;
        border-radius: 50%;
        text-align: center;
        color: $white;
        box-sizing: border-box;
        position: relative;

        &:hover {
            background-color: $white;
            color: $brand-primary;
            border-color: $brand-primary;
        }

        &:focus {
            color: $white;
            outline: none;

            &:hover {
                color: $brand-primary;
            }
        }

        .glyphicon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 17px;
        }
    }

    &--circle-small {
        @extend .af-btn--circle;

        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
        cursor: pointer;

        .glyphicon {
            width: 10px;
        }

        .af-more-help {
            font-weight: 900;
        }
    }

    &__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    &--circle-reverse {
        background: $white;
        border-color: $brand-primary;
        color: $brand-primary;

        &:focus {
            color: $brand-primary;
            box-shadow: $btn-focus-box-shadow;
            outline: none;

            &:hover {
                color: $white;
            }
        }

        &:hover {
            background: $brand-primary;
            color: $white;
        }
    }

    &--circle-menu {
        @include media-breakpoint-down(sm) {
            height: $menu-button-size;
            width: $menu-button-size;
            line-height: $menu-button-size;
            color: $white;
            border-color: $white;
            background: transparent;

            &:hover {
                color: $brand-primary;
                background: $white;
            }
        }
    }

    &--table-sorting {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        font-weight: 200;
        text-align: inherit;
        justify-content: space-between;
        cursor: pointer;
        color: white;
        padding: 0.881em 1rem 0.881em 1rem;
        box-shadow: inherit;

        &:focus,
        &:hover {
            box-shadow: none;
        }

        &:hover {
            background-color: $color-table-sorting;
        }

        &--active {
            background: $active-sort-table-th;

            &:focus {
                background-color: $active-sort-table-th;
            }
        }
    }

    .glyphicon {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        width: 17px;
    }

    .af-badge {
        margin-left: 2rem;
    }
}

.af-more-help {
    font-weight: bold;
    font-family: $font-family-serif;
    font-style: italic;
    font-size: 1.2rem;
    vertical-align: middle;
}

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

Les boutons CTA (Call To Action) ont pour but d’initier une action. Leur texte indique l’action à mener, leur aspect signifie leur niveau d’importance et d’influence.

2) Use case

  • Les boutons sont principalement utilisés pour des actions, comme Ajouter, Supprimer, Valider, Se connecter. Chaque page devrait avoir un seul bouton d’action primaire, tout autre CTA devrait être représenté comme bouton secondaire.
  • Dans le cas de l’utilisation d’un bouton dans un composant — une barre de recherche par exemple — la variation « Small » sera utilisée obligatoirement.
button

3) DO/DONT

Les boutons ne doivent pas être utilisés comme élément de navigation vers une page spécifique (URL unique). On utilisera à la place un lien, qui amènera l’utilisateur sur la page désirée.

button button

4) Avancé

  • L’ordre des boutons est du plus important à droite au moins important à gauche.
  • On ne peut utiliser un bouton d’un rang inférieur que si l’on a déjà utilisé un bouton d’un rang supérieur sur la page. On ne peut pas utiliser un bouton secondaire s’il n’y a pas de primaire sur la page, de lien si il n’y a pas de secondaire

5) Utilisation

a) Position

Le bouton primaire sera toujours le plus à droite, le bouton secondaire à gauche de celui-ci. Cela permet à l’utilisateur de savoir où se situe l’action principale avant d’avoir lu le label. Le positionnement devra rester cohérent dans l’ensemble de l’interface afin de faciliter le parcours utilisateur.

b) Alignement

  • Bouton primaire seul dans une modale : Ferré à droite et largeur ajustée au label
  • Bouton primaire et secondaire dans une modale : ferré à droite, espace de 8 px entre les boutons.
  • Lors de groupement de boutons, utiliser un espacement de 8px entre les éléments
button

c) Contenu

  • Texte aligné à gauche dans le cas d’un bouton avec pictogramme « flèche » à droite.
  • Texte aligné à droite dans le cas d’un bouton avec pictogramme « flèche » à gauche.
  • Texte centré si label seul
  • Texte aligné à gauche dans le cas d’un bouton avec pictogramme à gauche

d) Rédaction

  • Le label d’un bouton doit clairement indiquer l’action qu’il opère avec une forme verbale ; comme « Sauvegarder » ou « Annuler ». Les labels « OK » ou « Oui » devront être remplacé par des formes verbales équivalentes.
  • Dans le cas de l’utilisation d’un pictogramme pour compléter le label, celui-ci doit être universel, suffisamment pour être compris sans contexte, comme un checkmark ou un plus par exemple.

e) Pictogrammes

button

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-button/dist/button.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-btn 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