Nom : Button

Type : Molécule

Objectif :

• Modification css du composant [Button] : https://axafrance.github.io/design-system/slash/css/latest/?path=/docs/components-button--docs
• Ajout du variant : Button Ghost
• Utilisation de la librairie d'icone Materials de google
  ℹ Utilisation de l'atom [Icon]

Button Primary :

Version actuelle : https://axafrance.github.io/design-system/slash/css/latest/?path=/docs/components-button--docs
Version souhaitée : https://6ssje8.axshare.com/?code=6172ed7cc6f5e951da863b1b2d54378c&id=4we172&p=cta_principal&c=1

Default :
Height : 48px
Width : Auto
Padding : 16px 12px
Font-weight : semibold
Font-size : 16px
Color : #FFFFFF
Background-color : #3032C1
Box-shadow : none
border-bottom : 2px #00008F inside

Default - hover :
Background-color : #00008F
border-bottom : none

Variant :

Validation :
Background-color : #0C7D3B
border-bottom : 2px #084922 inside

Validation - hover :
Background-color : #084922
border-bottom : none

Error :
Background-color : #C7102E
border-bottom : 2px #6D0915 inside

Error - hover :
Background-color : #6D0915
border-bottom : none

Disabled :
Color : #CCCCCC
Background-color : #FFFFFF
border-bottom : 2px #CCCCCC inside

With Icon :

**Icon left : **
Utiliser la molécule [Icon]
Margin-right : 16px

**Icon right : **
Utiliser la molécule [Icon]
Margin-left : 16px

**Icon disabled : **
Color : #CCCCCC

Button Primary - Small :

Version actuelle : https://axafrance.github.io/design-system/slash/css/latest/?path=/docs/components-button--docs
Version souhaitée : https://6ssje8.axshare.com/?code=6172ed7cc6f5e951da863b1b2d54378c&id=4we172&p=cta_principal&c=1

Description :
Height : 40px

Button Secondary :

Version actuelle : https://axafrance.github.io/design-system/slash/css/latest/?path=/docs/components-button--docs
Version souhaitée : https://6ssje8.axshare.com/?code=6172ed7cc6f5e951da863b1b2d54378c&id=7esjv0&p=cta_secondaire&c=1

Description :

Secondary :
Height : 48px
Width : Auto
Padding : 16px 12px
Font-weight : semibold
Font-size : 16px
Color : #3032C1
Background-color : #FFFFFF
Box-shadow : none
border : 1px #3032C1 inside
border-bottom : 2px #3032C1 inside

Secondary - hover :
Background-color : #00008F
border : none

Secondary - disabled :
Color : #CCCCCC
border : 1px #CCCCCC inside
border-bottom : 2px #CCCCCC inside

With Icon :

**Icon left : **
Utiliser la molécule [Icon]
Margin-right : 16px

**Icon right : **
Utiliser la molécule [Icon]
Margin-left : 16px

**Icon disabled : **
Color : #CCCCCC

Button Ghost :

Version souhaitée :

Default :
Font-weight : regular
Font-size : 16px
Color : #3032C1
text-decoration : underline

Default - hover :
text-decoration : none

Default -disabled :
Font-weight : regular
Font-size : 16px
Color : #CCCCCC
text-decoration : underline

With Icon :

**Icon left : **
Utiliser la molécule [Icon]
Color : #3032C1
Margin-right : 8px

**Icon right : **
Utiliser la molécule [Icon]
Color : #3032C1
Margin-left : 8px

**Icon disabled : **
Color : #CCCCCC

Inverted / Colored Background :

**Inverted : **
Color : #FFFFFF
text-decoration : underline

**Inverted with icon : **
Color : #FFFFFF
icon-color : #FFFFFF
text-decoration : underline

Inverted - hover :
text-decoration : none