Button
Les boutons sont des éléments cliquables qui sont utilisés pour déclencher des actions.
Description
Les boutons sont des éléments cliquables qui sont utilisés pour déclencher des actions. Ils ont plusieurs styles pour répondre à différents besoins, et sont idéaux pour attirer l’attention sur des actions qui permettent à l’utilisateur d’interagir avec les pages de diverses manières afin de progresser dans un flux.
Le label d’un bouton exprime de manière claire l’action qui se produira lorsque l’utilisateur interagira avec celui-ci.
Plateformes
Anatomie
- Label : décrit de manière claire l’action produite au clic.
- Icône : les icônes peuvent être utilisées dans les boutons lorsqu’une clareté supplémentaire est requise. Par défaut, on utilisera l’icône chevron-right lorsque le bouton amène vers une autre page et aucune icône si le bouton agit sur la page actuelle.
- Number pill : indique le nombre de filtres actifs lorsque le bouton permet de filtrer des données.
Usage
Quand l'utiliser ?
Lorsque vous souhaitez communiquer les actions que les utilisateurs peuvent entreprendre et pour permettre aux utilisateurs d’interagir avec la page.
Quel type de bouton utiliser ?
Bouton primaire : Le bouton primaire est très visible (affordant) et réservé aux actions qui sont essentielles à l’expérience.
Bouton secondaire : Le bouton secondaire a pour vocation d’être moins visible que le primaire. Il est destiné à être associé à un bouton primaire pour faire ressortir l’action secondaire, moins importante.
Bouton tertiaire : Le bouton tertiaire est le moins mis en avant des trois. Il est utilisé pour des actions complémentaires ou peu fréquentes.
Avec ou sans icone ?
Si l’action produite par le bouton :
- Redirige l’utilisateur vers une autre page : Icon After - Chevron-right
- Agit sur la page actuelle (modale, paramètre, configuration…) : No icon
Les versions Icon Only et Icon Before s’utilisent dans des cas particuliers selon le choix du designer.
Comment aligner mes boutons ?
Aligné à gauche : de manière générale vos boutons sont aligné au contenu, et dès lors, sur la gauche. Dans l’ordre suivant : primary, secondary
Aligné au centre : lorsque le contenu est centré, les boutons aussi. Dans l’ordre suivant : primary, secondary
Aligné à droite : dans les modales et les tunnels, les boutons sont alignés sur la droite. Dans l’orde suivant : secondary, primary
Do's and don'ts
-
Do
Il est conseillé de n’utiliser qu’un seul bouton principal (primary) et secondaire (secondary) par section.
-
Don't
Il est interdit d'utiliser deux boutons primaires (primary) ou secondaires (secondary) l’un à côté de l’autre dans une section.
Anatomie
- Label : décrit de manière claire l’action produite au clic.
- Icône : les icônes peuvent être utilisées dans les boutons lorsqu’une clareté supplémentaire est requise. Par défaut, on utilisera l’icône chevron-right lorsque le bouton amène vers une autre page et aucune icône si le bouton agit sur la page actuelle.
- Number pill : indique le nombre de filtres actifs lorsque le bouton permet de filtrer des données.
Usage
Quand l'utiliser ?
Lorsque vous souhaitez communiquer les actions que les utilisateurs peuvent entreprendre et pour permettre aux utilisateurs d'interagir avec la page.
Si l'utilisateur peut réaliser plusieurs actions sur un seul élément il sera nécessaire d'utiliser les Button Action.
Quel type de bouton utiliser ?
Bouton primaire : Le bouton primaire est très visible (affordant) et réservé aux actions qui sont essentielles à l’expérience.
Bouton secondaire : Le bouton secondaire a pour vocation d’être moins visible que le primaire. Il est destiné à être associé à un bouton primaire pour faire ressortir l’action secondaire, moins importante.
Bouton tertiaire : Le bouton tertiaire est le moins mis en avant des trois. Il est utilisé pour des actions complémentaires ou peu fréquentes.
Avec ou sans icone ?
Si l’action produite par le bouton :
- Redirige l’utilisateur vers une autre page : Icon After - Chevron-right
- Agit sur la page actuelle (modale, paramètre, configuration…) : No icon
Les versions Icon Only et Icon Before s’utilisent dans des cas particuliers selon le choix du designer.
Comment aligner les boutons ?
Largeur du contenu : dans la majorité des cas vos boutons prendrons la largeur de la page et seront empilés. Dans l'ordre : primary, secondary
Aligné à gauche: au besoin, lorsque le contenu est aligné à gauche, les boutons aussi. Dans l’ordre suivant : primary, secondary
Aligné au centre : lorsque le contenu est centré, les boutons aussi. Dans l’ordre suivant : primary, secondary
Do's and don'ts
-
Do
Il est conseillé de n’utiliser qu’un seul bouton principal (primary) et secondaire (secondary) par section.
-
Don't
Il est interdit d'utiliser deux boutons primaires (primary) ou secondaires (secondary) l’un à côté de l’autre dans une section.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.