Bouton

Bouton dans Storybook

Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.

Utilisation

Présentation

Le bouton est un composant qui permet aux utilisateurs d'effectuer des actions et de faire des choix en un seul clic. En d'autres termes, le bouton permet une conversation entre l'utilisateur et l'expérience. La plupart du temps, lorsque les utilisateurs sont confrontés à du texte, par exemple dans un état vide, une confirmation ou une erreur, c'est l'expérience qui s'adresse à l'utilisateur. Les boutons font partie des principaux composants avec lesquels les utilisateurs interagissent. Ils permettent aux utilisateurs de faire connaître leur objectif.

Quand l'utiliser

• Pour déclencher une action. Par exemple, Soumettre, Charger, Ajouter, Supprimer, Enregistrer ou Appliquer.

Quand ne pas l'utiliser

• Pour accéder à une nouvelle page. Utilisez plutôt le composant Lien.
• Pour le chargement de fichiers. Utilisez plutôt le composant de chargement de fichier.

Formatage

Structure

Les boutons comprennent les éléments suivants :

1. Les boutons principaux présentent des conteneurs (A) autour d'une étiquette textuelle (B) avec une icône facultative (C). Les boutons principaux ont une couleur d'arrière-plan unie.
2. Les boutons secondaires présentent des conteneurs (A) autour d'une étiquette textuelle (B) avec une icône facultative (C). Les boutons secondaires ont un contour visible et aucune couleur d'arrière-plan.
3. Les boutons tertiaires affichent une étiquette textuelle (B) avec une icône facultative (C).
4. Les boutons d'icône affichent des conteneurs (A) autour d'une icône obligatoire (C).

Alignement et placement

Lorsqu'un groupe de boutons apparaît dans le cadre d'un processus, par exemple dans un assistant ou dans une fenêtre modale, nous vous recommandons de le placer dans le coin inférieur droit de la page pour l'aligner sur le flux naturel des pages. À l'intérieur de ce groupe de boutons, les boutons principaux se trouvent à l'extrême droite.

Placez le bouton principal à l'extrême droite.

Ne placez pas le bouton secondaire à l'extrême droite.

Pour la configuration client, vous pouvez définir l'icône à gauche de l'étiquette du bouton ou à droite, mais pas les deux en même temps.

Pour les applications Guidewire internes, positionnez toujours l'icône à droite de sorte que l'utilisateur lise d'abord l'étiquette, puis voit l'icône.

Définissez l'icône à droite de l'étiquette du bouton.

Ne placez pas d'icônes simultanément sur les côtés gauche et droit de l'étiquette du bouton.

Types de boutons

Les boutons sont des rectangles aux angles arrondis, à ombre portée (à l'exception des boutons tertiaires), à couleur simple et dont les étiquettes textuelles commencent par une majuscule.

Type	Finalité
Bouton principal	Les boutons principaux sont les boutons dont la mise en évidence est la plus prononcée. Utilisez-les pour l'action la plus importante. Chaque page ne doit avoir qu'un seul bouton principal pour déclencher l'action (sans compter la fenêtre modale ou la vue rapide).
Bouton secondaire	Les boutons secondaires sont les boutons dont la mise en évidence est moyennement prononcée. Utilisez des boutons secondaires conjointement avec un bouton principal. Dans le cadre d'une paire, la fonction du bouton secondaire est d'effectuer l'action de rejet de l'ensemble. Ils permettent à l'utilisateur de faire marche arrière et de ne prendre aucune mesure. Par exemple, Annuler par rapport à l'action principale Envoyer. N'utilisez pas de bouton secondaire isolé et n'utilisez pas de bouton secondaire pour l'action principale.
Bouton tertiaire	Les boutons tertiaires sont légèrement mis en évidence. Utilisez-les pour des actions moins prononcées et parfois indépendantes. Vous pouvez utiliser des boutons tertiaires séparément ou les associer à un bouton principal en cas d'appels à l'action multiples. Lorsqu'un bouton principal pour l'action principale est présent, vous pouvez également utiliser des boutons tertiaires pour les sous-tâches d'une page.
Bouton Icône	Les boutons Icône sont destinés à des actions largement reconnues et doivent apparaître conjointement avec une infobulle.

Chaque page ne doit avoir qu'une seule action de déclenchement principale :

N'utilisez qu'un seul bouton principal par page.

N'utilisez pas plus d'un bouton principal par page.

Groupes de boutons

Les boutons peuvent être regroupés pour afficher la relation entre eux. Nous vous recommandons d'utiliser un espace de 16 pixels entre les boutons (verticalement et horizontalement).

Appliquez un intervalle de 16 pixels entre les boutons d'un groupe.

N'appliquez pas d'espacement incohérent entre les boutons.

Contenu

Directives générales relatives à la rédaction

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

Soyez concis

• Gardez les étiquettes de bouton courtes et simples : 1 ou 2 mots, pas plus de 4 mots.
• Supprimez les articles (« un/une », et « le/la ») pour faciliter la numérisation, la compréhension et l'exécution des tâches.

Référence : Nielsen Norman

Gardez le texte de commande court sans sacrifier la clarté.

Incluez 2 à 4 mots maximum dans un bouton.

Indiquez clairement l'action

• Pour les commandes qui lancent une action ou soumettent des informations, commencez les étiquettes de bouton par un verbe. Si l'action qui en résulte n'est pas claire par rapport au verbe seul, utilisez un nom après le verbe pour lever toute ambiguïté sur le contexte. Par exemple, Ajouter un véhicule au lieu de Ajouter ou Créer une planification au lieu de Créer.
• N'utilisez pas Oui et Non pour les étiquettes de bouton. Nommez l'action qui se produit lorsque l'utilisateur clique.
• Choisissez des mots qui s'alignent logiquement sur le contenu précédent : si votre titre demande Supprimer le type d'objet ##  ?, le texte de votre bouton doit également indiquer : Supprimer.
• Soyez prudent lorsque vous utilisez un bouton principal pour une action de suppression, en particulier lorsqu'elle peut être déclenchée par un retour clavier. Dans ces cas, soyez très explicite afin qu'il n'y ait aucune ambiguïté.

Pour plus de cohérence, reportez-vous aux instructions relatives au contenu de Jutro pour obtenir la liste des étiquettes d'action recommandées.

Commencez avec des verbes ou des phrases verbales.

Les mots du bouton doivent être précis, spécifiques et explicites, et non vagues.

Mettre la 1re lettre du 1er mot en majuscule

Le texte des boutons doit toujours commencer par une majuscule. Ne rédigez jamais le texte entier en majuscules pour mettre en évidence un bouton spécifique et ne mettez pas une majuscule à chaque mot.

Reportez-vous au Guide de style des textes d'interface utilisateur pour en savoir plus sur l'implémentation des majuscules en début de phrase.

Mettez une majuscule en début de phrase pour les étiquettes de bouton.

Mettre une majuscule au début de chaque mot nuit à la lisibilité. Ne le faites pas.

Être attentif au ton

• Les étiquettes de bouton doivent utiliser le vocabulaire des utilisateurs. Posez-vous la question suivante : « Est-ce un mot qu'une personne prononcerait dans une conversation ? ».
• N'utilisez pas d'émoticônes, de points d'exclamation ou d'autres formes de ponctuation dans les étiquettes de bouton.

N'utilisez que du texte dans les étiquettes de bouton.

Les émoticônes et les points d'exclamation ne sont pas appropriés à la nature utilitaire des boutons.

Comportements

États

Les boutons ont des statuts pour activé, survol, focus, actif, désactivé et chargement.

	État	Description
	Activé	Indique à l'utilisateur que l'élément est prêt à interagir (par défaut).
	Survol	Indique que l'utilisateur a positionné le curseur de la souris sur l'élément (uniquement sur la version pour ordinateur de bureau). L'état de survol peut être utilisé avec les états Activé et Chargement.
	Focus	Indique que l'utilisateur a mis l'élément en évidence, généralement en utilisant une méthode de saisie comme un clavier ou la voix. Le statut Focus peut être utilisé avec tous les autres statuts (y compris le statut Désactivé).
	Actif	Indique que l'utilisateur clique ou appuie sur l'élément. Le statut Actif peut être utilisé avec les statuts Activé et Survol.
	Désactivé	Indique à l'utilisateur que l'élément n'est pas interactif. Chaque bouton est accessible et désactivé par défaut. Cela signifie que le bouton désactivé peut être activé.
	Chargement	Indique à l'utilisateur que l'action est en cours. Utilisez l'état de chargement lorsqu'une action est censée prendre plus d'une seconde. Lorsqu'un bouton présente l'état de chargement, les événements suivants doivent se produire : Remplacez le texte par « Patientez... » Désactivez la possibilité d'interagir avec le bouton. Il s'agit d'une précaution permettant de s'assurer que les utilisateurs ne commettent pas d'erreur, comme le double envoi d'un élément dans un formulaire. Conservez la largeur du bouton. L'état de chargement peut être personnalisé. Si les clients ne veulent pas de l'état de chargement par défaut (3 points pulsatiles), ils peuvent encapsuler leur statut personnalisé.

Interactions

Souris

Le bouton peut être déclenché en cliquant n'importe où dans le conteneur du bouton.

Clavier

Lorsque le bouton est mis en évidence, la barre d'espace et la touche Entrée l'active.

Lecteur d'écran

Le composant de bouton utilise la balise HTML5 <button> dont la sémantique est implicite. Le texte compris entre les balises décrit clairement l'action correspondante.

Réactivité et adaptabilité

Les boutons de Jutro sont disponibles en 2 tailles différentes pour répondre aux besoins des applications professionnelles et grand public. Les applications professionnelles exigent une plus grande densité de données. Par conséquent, des boutons plus petits et plus réalistes leur conviennent parfaitement. À l'instar de la plupart des composants, les boutons peuvent être diffusés, dimensionnés et organisés par nos composants Grid et Flex dans le cadre de l'engagement de Jutro en faveur de la conception réactive.

Petit bouton	Bouton moyen

Dans les applications mobiles, nous vous recommandons de remplir la largeur du conteneur avec des boutons (le texte et l'icône à l'intérieur du bouton doivent être centrés).

Accessibilité

L'élément de bouton de Jutro représente un bouton HTML utilisé pour soumettre des informations. Le texte compris entre les balises d'ouverture et de fermeture est le texte du bouton.

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

• Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
• Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
• Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
• Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Suivez les instructions ci-dessous et reportez-vous également aux bonnes pratiques de création des boutons conformément à la spécification WAI-ARIA lorsque vous utilisez ce composant dans vos applications :

• Le texte d'un bouton doit décrire clairement son action.
• En cas d'application de thèmes de couleur personnalisés, vérifiez que le degré de contraste du texte par rapport à son arrière-plan est conforme au seuil requis.

Accessibilité d'un composant désactivé

Le composant Button reste accessible, même lorsqu'il est désactivé, à partir de la version 8.4.0 de Jutro. Cette fonctionnalité est activée par défaut pour chaque nouvelle application créée à l'aide de la version 8.4.0 de Jutro ou d'une version ultérieure. Les applications plus anciennes peuvent utiliser cette fonctionnalité en ajoutant l'objet accessibleDisabled à leur fichier config.json et en transmettant des propriétés, comme indiqué ci-dessous.

Les composants Button désactivés accessibles présentent les caractéristiques suivantes :

• L'attribut HTML disabled est supprimé.
• Une propriété supplémentaire appelée aria-disabled est définie.
• Toutes les fonctions de rappel, telles que onClick et onBlur, sont muettes et ne peuvent pas être appelées.
• La valeur de l'attribut type HTML de Button sera modifiée en button.
• Si le bouton a l'attribut href fourni, son rôle sera modifié en link et tabIndex passera à 0.

Le style des boutons désactivés accessibles et standard reste le même.

Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.

Code

<Button
  label="Click me!"
  onClick={handleClick}
/>

Instruction d'importation

import { Button } from '@jutro/components';

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

labelobligatoire

Type

IntlMessageShape

Description

Label text displayed on the button. This is also passed as a default value to the buttons aria-label.

className

Type

string

Description

CSS class name for this component.

disabled

Type

boolean

Description

If set to true, the button is disabled. IMPORTANT: this prop overrides the native HTML disabled attribute. In this case, the button is still tabbable, even when it's disabled.

fullWidth

Type

boolean

Description

If set to true, the button will take the full width of its parent container.

hideLabel

Type

boolean

Description

If set to true, the label is not displayed.

icon

Type

string | Icon

Description

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

iconPosition

Type

'left' | 'right'

Description

Sets where the icon is placed relative to the text.

Valeur par défaut

'left'

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

size

Type

'small' | 'medium'

Description

Sets the size of button (small, medium).

Valeur par défaut

'medium'

variant

Type

'primary' | 'secondary' | 'tertiary' | 'neutral' | 'inverse'

Description

Sets the variant of button to display (primary, secondary, tertiary, neutral, inverse) Note: neutral and inverse variants are applicable to buttons with icons only.

Valeur par défaut

'primary'

renderIconobsolète

Type

React.FC<{}>

Description

A function that renders a custom icon.

Crochets

Aucun crochet n'est disponible pour Button.

Clés de traduction

Il n'existe aucune traduction pour Button.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Transmission de propriétés HTML au composant

Vous pouvez utiliser des attributs de bouton HTML, à l'exception de tous ceux qui sont remplacés par Jutro.

<Button
  label="Click me"
  onClick={handleClick}
  id="my-button"
  variant="primary"
/>

Il résulte de la transmission de cette propriété id qu'elle fera partie du bouton HTML créé dans le DOM HTML.

Comportements personnalisés des boutons

Composant désactivé accessible

Le composant Button peut toujours être accessible, même lorsqu'il est désactivé.

Les composants Button désactivés accessibles présentent les caractéristiques suivantes :

• L'attribut HTML disabled est supprimé.
• Une propriété supplémentaire appelée aria-disabled est définie.
• Toutes les fonctions de rappel, telles que onClick et onBlur, sont muettes et ne peuvent pas être appelées.
• La valeur de l'attribut type HTML de Button sera modifiée en button.
• Si le bouton a l'attribut href fourni, son rôle sera modifié en link et tabIndex passera à 0.

Le style des boutons désactivés accessibles et standard reste le même.

Informations existantes

Utilisez-vous l'un des boutons existants ?

• Pour consulter la documentation des anciens composants, passez à une version de la documentation antérieure à 10.0.x.

• Ces composants existants sont également disponibles dans Storybook :

  • Bouton
  • IconButton
  • AsyncButtonLink
  • ButtonLink

Note: Il existe des versions obsolètes de ce composant. Passez à une version de la documentation antérieure à la version 10.0.x pour consulter cette documentation.

Exemples

Consultez la section Utilisation pour savoir comment concevoir un bouton correctement, ainsi que les différentes alternatives et variantes proposées. Les propriétés disponibles vous permettent de créer différentes variantes d'un bouton.

Bouton simple

Le composant Button est mis à disposition à partir du package @jutro/components. Il existe 4 propriétés de base lorsque vous utilisez le bouton : label, icon, variant et onClick. Dans la plupart des cas, il s'agit des seules propriétés que vous utiliserez.

import Button from '@jutro/components';

// ...

<Button
  label="Click me"
  icon="gw-bathtub"
  onClick={handleCLick}
/>;

Bouton Icône uniquement

À l'aide de la propriété hideLabel, vous pouvez créer un bouton Icône uniquement qui n'affiche pas d'étiquette, mais uniquement l'icône choisie. La propriété label sera utilisée pour le aria-label du bouton.

<Button
  icon="gw-bathtub"
  label="this will be the aria-label text"
  onClick={handleClick}
  hideLabel
/>

Dans ce cas, la valeur de la propriété iconPosition sera ignorée et l'icône sera toujours affichée au centre.

Bouton asynchrone

Lorsqu'un bouton déclenche une action et qu'il doit attendre qu'elle soit terminée ou qu'un événement spécifique se produise, il est possible de procéder comme suit :

import React, { useEffect, useState } from 'react';
import { InlineLoader } from '@jutro/components';
import { Button } from '@jutro/components';
import styles from './AsyncButton.module.css';

function getFromAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Done!');
    }, 2000);
  });
}

export function AsyncButtonExample() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function someAsyncFunction() {
      await getFromAPI();

      setLoading(false);
    }

    if (loading) {
      someAsyncFunction();
    }
  }, [loading]);

  return (
    <Button
      label={loading ? 'Saving' : 'Save'}
      renderIcon={() => <InlineLoader loading={loading} />}
      iconPosition="right"
      disabled={loading}
      onClick={() => setLoading(true)}
    />
  );
}

Bouton avec infobulle

Tooltip est ajouté via la composition : Tooltip + Button

<Tooltip content="This is a tooltip">
  <Button label="Click me" />
</Tooltip>

Journal des modifications

10.0.0

Le nouveau composant @jutro/components/Button a été introduit et remplace le précédent.

Les précédents composants liés au bouton sont obsolètes et déplacés vers le package @jutro/legacy. Pour afficher leur documentation, passez à une version antérieure.

Emplacements des composants d’origine :

• Button : @jutro/components/Button
• IconButton : @jutro/components/IconButton
• AsyncButtonLink : @jutro/router/AsyncButtonLink
• ButtonLink : @jutro/router/ButtonLink

Emplacements des nouveaux composants :

• Button : @jutro/legacy/components/Button
• IconButton : @jutro/legacy/components/IconButton
• AsyncButtonLink : @jutro/legacy/router/AsyncButton
• ButtonLink : @jutro/legacy/router/ButtonLink

Des codemods sont disponibles afin de renommer automatiquement les importations existantes.

10.9.0

Type de propriété icon étendu

Le type de la propriété icon a été étendu à string | React.ComponentType.

Obsolescences

• Le transfert de string en tant que valeur à la propriété icon est désormais obsolète.
• La propriété renderIcon est obsolète.

10.12.0

Modifications des jetons de conception

Le jeton d’arrière-plan qui contrôle la couleur d’arrière-plan lorsque certains types de boutons sont survolés a changé. Consultez le journal des modifications relatif aux jetons de conception pour en savoir plus.