diff --git a/common/button/button-en.html b/common/button/button-en.html new file mode 100644 index 000000000..e1555c460 --- /dev/null +++ b/common/button/button-en.html @@ -0,0 +1,426 @@ +--- +{ + "title": "Buttons", + "language": "en", + "altLangPage": "button-fr.html", + "description": "Buttons page including working examples to test how various button styles appear and function", + "dateModified": "2023-09-01" +} +--- + +

On this page:

+ + + + +
+
Button
+
A button will perform an action on the current page without moving the focus or without navigating the user away
+
Link
+
A link will send the user at a location, in the same page via an anchor (`#`) link or to an another page without sending any data over.
+
+

Do not use the role button on an anchor, use a button element instead.

+ +

Basic use (Default)

+ +

Working example

+

Scaffolding (Default):

+ + + +Link + +

With the default style:

+ + + +Link + +

Code Sample

+

+	// Default button:
+	<button type="submit">
+	Button
+	</button>
+	<input type="button" value="Input"/>
+	<input type="submit" value="Submit"/>
+	<a href="#">
+	Link
+	</a>
+
+	// Styled button:
+	<button class="btn btn-default" type="submit">
+	Button
+	</button>
+	<input class="btn btn-default" type="button" value="Input"/>
+	<input class="btn btn-default" type="submit" value="Submit"/>
+	<a class="btn btn-default" href="#">
+	Link
+	</a>
+
+ +

Colours/Styles

+

Colours signify various things such as a link to warning information (caution styled button). The text of that styled button will also contains word describing the state like "Warning notice".

+

Working example

+ + + + + + + +Anchor <a> styled as a button + +

Code sample

+

+	// Default:
+	<button type="button" class="btn btn-default">
+	Default
+	</button>
+
+	// Primary:
+	<button type="button" class="btn btn-primary">
+	Primary
+	</button>
+
+	// Success:
+	<button type="button" class="btn btn-success">
+	Success
+	</button>
+
+	// Info:
+	<button type="button" class="btn btn-info">
+	Info
+	</button>
+
+	// Warning:
+	<button type="button" class="btn btn-warning">
+	Warning
+	</button>
+
+	// Danger:
+	<button type="button" class="btn btn-danger">
+	Danger
+	</button>
+
+	// Link:
+	<button type="button" class="btn btn-link">
+	Link
+	</button>
+
+	//Link styled as a button
+	<a class="btn btn-default" href="#">
+	Link styled as a button
+	</a>
+
+ +

Supertask (Call to Action)

+

Working example

+ + +

Code sample

+

+// Supertask (Call to Action) button:
+<button type="button" class="btn btn-call-to-action">Supertask (Call to Action)</button>
+
+ + +

Sizing

+

Use to increase or decrease the size of a button.

+

Working example

+ + + + + +

Code sample

+

+	// Extra small button:
+	<button type="button" class="btn btn-default btn-xs">
+	Extra small button
+	</button>
+
+	// Small button:
+	<button type="button" class="btn btn-default btn-sm">
+	Small button
+	</button>
+
+	// Default button:
+	<button type="button" class="btn btn-default">
+	Default button
+	</button>
+
+	// Large button:
+	<button type="button" class="btn btn-default btn-lg">
+	Large button
+	</button>
+ +

Full Width

+

Use to create block level buttons (those that span the full width of a parent).

+

Working example

+ + +

Code sample

+

+// Block level button:
+<button type="button" class="btn btn-default btn-block">Button</button>
+
+ +

Active state

+

Use .active with button and a elements if you need to have a button look active at all times (usually for display or instructional purposes on fake buttons or links). When a user presses a button it appears in the active state (with an inset shadow, and darker background and border). For button and a elements, this is auto-styled in CSS via :active.

+

Working example

+ +Link + +

Code sample

+

+// Active button:
+<button type="button" class="btn btn-default active">Button</button>
+
+// Active link:
+<a class="btn btn-default active" href="#" role="button">
+Link
+</a>
+
+ +

Disabled state

+

Use to disable buttons and links (not clickable), and give them a faded appearance.

+

Working example

+ +Link + +

Code sample

+

+// Disabled button:
+<button type="button" class="btn btn-default disabled">Button</button>
+
+// Disabled link:
+<a class="btn btn-default disabled" href="#" role="button">
+Link
+</a>
+
+ +

Button groups (Horizontal)

+

Group a series of buttons together on a single line with the btn-group class.

+

Working Example

+

Default:

+
+ + + +
+ +

Large:

+
+ + + +
+ +

Small:

+
+ + + +
+ +

Extra small:

+
+ + + +
+ +

Justified (links):

+
+ Left + Middle + Right +
+ +

Justified (buttons):

+
+
+ +
+
+ +
+
+ +
+
+ +

Code sample

+
// Default:
+<div class="btn-group">
+	<button type="button" class="btn btn-default">...</button>
+</div>
+
+// Large button group:
+<div class="btn-group btn-group-lg">...
+</div>
+
+// Small button group:
+<div class="btn-group btn-group-sm">...
+</div>
+
+// Extra small button group:
+<div class="btn-group btn-group-xs">...
+</div>
+
+// Justified links:
+<div class="btn-group btn-group-justified">
+<a class="btn btn-default" href="#" role="button">...
+</a>
+</div>
+
+// Justified button group:
+<div class="btn-group btn-group-justified">
+<div class="btn-group">
+	<button type="button" class=" btn btn-default">...
+	</button>
+</div>...
+</div>
+
+ +

Button groups (Vertical)

+

Make a set of buttons appear vertically stacked rather than horizontally with the btn-group-vertical class.

+

Working Example

+
+ + + +
+ +

Code sample

+
// Vertical button group:
+<div class="btn-group-vertical">
+	<button type="button" class="btn btn-default">
+	Top
+	</button>
+	<button type="button" class="btn btn-default">
+	Middle
+	</button>
+	<button type="button" class="btn btn-default">
+	Bottom
+	</button>
+</div>
+ +

Button toolbar

+

Use to display multiple groups of buttons together on a single line with the btn-toolbar class. Note the use of this feature requires some additional requirements in order to comform to WCAG.

+

Working Example

+ + +

Code sample

+
// Button toolbar:
+<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+	<div class="btn-group" role="group" aria-label="First group">
+		<button type="button" class="btn btn-default">
+		1
+		</button>
+		<button type="button" class="btn btn-default">
+		2
+		</button>
+		<button type="button" class="btn btn-default">
+		3
+		</button>
+		<button type="button" class="btn btn-default">
+		4
+		</button>
+	</div>
+
+	<div class="btn-group" role="group" aria-label="Second group">
+		<button type="button" class="btn btn-default">
+		5
+		</button>
+		<button type="button" class="btn btn-default">
+		6
+		</button>
+		<button type="button" class="btn btn-default">
+		7
+		</button>
+	</div>
+
+	<div class="btn-group" role="group" aria-label="Third group">
+		<button type="button" class="btn btn-default">
+		8
+		</button>
+	</div>
+</div>
+ +

Input Groups

+

Easily extend form controls by adding buttons, or button groups on either side of textual inputs with the input-group and input-group-btn classes.

+

Working Example

+
+ + + + +
+ +
+ + + + +
+ +

Code Sample

+
// Input groups:
+<div class="input-group">
+	<span class="input-group-btn">
+		<button class="btn btn-default" type="button">Button</button>
+	</span>
+	<input type="text" class="form-control">
+</div>
+
+<div class="input-group">
+	<input type="text" class="form-control">
+	<span class="input-group-btn">
+		<button class="btn btn-default" type="button">Button</button>
+	</span>
+</div>
+ +

Data-toggle buttons

+ +
+

Currently, this feature is not functional as we do not implement Bootstrap's JavaScript.

+
+ +

Bootstrap’s .button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the inputs within your buttons. More info can be found here: Bootstrap components

+ +

We are currently working on adding similiar functionality in the future. More info can be found in this pull request on GitHub.

+ +

Resource

+

Design system guidance on buttons

diff --git a/common/button/button-fr.html b/common/button/button-fr.html new file mode 100644 index 000000000..ce12cc920 --- /dev/null +++ b/common/button/button-fr.html @@ -0,0 +1,426 @@ +--- +{ + "title": "Boutons", + "language": "fr", + "altLangPage": "button-en.html", + "description": "Page des boutons comprenant des exemples de travail pour tester l'apparence et le fonctionnement de divers styles de boutons.", + "dateModified": "2023-09-01" +} +--- + +

Sur cette page:

+ + + + +
+
Bouton
+
Un bouton effectuera une action sur la page actuelle sans déplacer le focus ou sans éloigner l'utilisateur
+
Lien
+
Un lien enverra l'utilisateur à un emplacement, dans la même page via un lien d'ancrage (`#`) ou vers une autre page sans envoyer de données.
+
+

N'utilisez pas le bouton de rôle sur une ancre, utilisez plutôt un élément de bouton.

+ +

Utilisation de base (Par défaut)

+ +

Exemple de travail

+

Échafaudage (par défaut):

+ + + +Lien + +

Avec le style par défaut:

+ + + +Lien + +

Code

+

+	// Bouton par défaut:
+	<button type="submit">
+	Bouton
+	</button>
+	<input type="button" value="Entrer"/>
+	<input type="submit" value="Soumettre"/>
+	<a href="#">
+	Link
+	</a>
+
+	// Bouton stylisé:
+	<button class="btn btn-default" type="submit">
+	Bouton
+	</button>
+	<input class="btn btn-default" type="button" value="Entrer"/>
+	<input class="btn btn-default" type="submit" value="Soumettre"/>
+	<a class="btn btn-default" href="#">
+	Lien
+	</a>
+
+ +

Couleurs/Styles

+

Les couleurs signifient diverses choses telles qu'un lien vers des informations d'avertissement (bouton de style attention). Le texte de ce bouton stylisé contiendra également un mot décrivant l'état comme "Avis d'avertissement".

+

Exemple de travail

+ + + + + + + +Ancre <a> sous forme de bouton + +

Code sample

+

+	// Défaut:
+	<button type="button" class="btn btn-default">
+	Défaut
+	</button>
+
+	// Primaire:
+	<button type="button" class="btn btn-primary">
+	Primaire
+	</button>
+
+	// Succès:
+	<button type="button" class="btn btn-success">
+	Succès
+	</button>
+
+	// Info:
+	<button type="button" class="btn btn-info">
+	Info
+	</button>
+
+	// Avertissement:
+	<button type="button" class="btn btn-warning">
+	Avertissement
+	</button>
+
+	// Danger:
+	<button type="button" class="btn btn-danger">
+	Danger
+	</button>
+
+	// Lien:
+	<button type="button" class="btn btn-link">
+	Lien
+	</button>
+
+	//Lien sous forme de bouton
+	<a class="btn btn-default" href="#">
+	Lien sous forme de bouton
+	</a>
+
+ +

Supertâche (Appel à l'action)

+

Exemple de travail

+ + +

Code

+

+// Bouton Supertâche (Appel à l'action):
+<button type="button" class="btn btn-call-to-action">Supertâche (Appel à l'action)</button>
+
+ + +

Taille

+

Utilisez pour augmenter ou diminuer la taille d'un bouton.

+

Exemple de travail

+ + + + + +

Code

+

+	// Très petit bouton:
+	<button type="button" class="btn btn-default btn-xs">
+	Très petit bouton
+	</button>
+
+	// Petit bouton:
+	<button type="button" class="btn btn-default btn-sm">
+	Petit bouton
+	</button>
+
+	// Bouton par défaut:
+	<button type="button" class="btn btn-default">
+	Bouton par défaut
+	</button>
+
+	// Gros bouton:
+	<button type="button" class="btn btn-default btn-lg">
+	Gros bouton
+	</button>
+ +

Largeur maximale

+

Utilisez pour créer des boutons de blocage de niveau (ceux qui s'étend sur toute la largeur d'un contenant apparenté).

+

Exemple de travail

+ + +

Code

+

+// Bouton de blocage de niveau:
+<button type="button" class="btn btn-default btn-block">Button</button>
+
+ +

État d'activation

+

Utilisez .active avec les éléments button et a si vous avez besoin qu'un bouton semble actif en tout temps (habituellement aux fins d'affichage et d'enseignement sur des boutons ou liens factices). Lorsqu'un utilisateur appuie sur un bouton, il semble être actif (avec une ombre interne, ainsi qu'un arrière-plan et une bordure plus foncés). Pour les éléments button et a, ils sont stylisés automatiquement dans CSS au moyen de :active.

+

Exemple de travail

+ +Lien + +

Code

+

+// Bouton actif:
+<button type="button" class="btn btn-default active">Bouton</button>
+
+// Lien actif:
+<a class="btn btn-default active" href="#" role="button">
+Lien
+</a>
+
+ +

État de désactivation

+

Utilisez pour désactiver des boutons et des liens (non cliquable) et donne une apparence décolorée.

+

Exemple de travail

+ +Lien + +

Code

+

+// Bouton désactivé:
+<button type="button" class="btn btn-default disabled">Bouton</button>
+
+// Lien désactivé:
+<a class="btn btn-default disabled" href="#" role="button">
+Lien
+</a>
+
+ +

Groupes de Bouton (Horizontale)

+

Regroupez une série de boutons sur une seule ligne avec la classe btn-group.

+

Exemple de travail

+

Par défaut:

+
+ + + +
+ +

Gros:

+
+ + + +
+ +

Petit:

+
+ + + +
+ +

Très petit:

+
+ + + +
+ +

Justifié (lien):

+
+ Gauche + Centré + Droite +
+ +

Justifié (boutons):

+
+
+ +
+
+ +
+
+ +
+
+ +

Code

+
// Par défaut:
+<div class="btn-group">
+	<button type="button" class="btn btn-default">...</button>
+</div>
+
+// Gros:
+<div class="btn-group btn-group-lg">...
+</div>
+
+// Petit:
+<div class="btn-group btn-group-sm">...
+</div>
+
+// Très petit:
+<div class="btn-group btn-group-xs">...
+</div>
+
+// Justifié (lien):
+<div class="btn-group btn-group-justified">
+<a class="btn btn-default" href="#" role="button">...
+</a>
+</div>
+
+// Justifié (boutons):
+<div class="btn-group btn-group-justified">
+<div class="btn-group">
+	<button type="button" class=" btn btn-default">...
+	</button>
+</div>...
+</div>
+
+ +

Groupes de Bouton (Verticale)

+

Faites apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement avec la classe btn-group-vertical.

+

Exemple de travail

+
+ + + +
+ +

Code

+
// Groupes de Bouton (Verticale):
+<div class="btn-group-vertical">
+	<button type="button" class="btn btn-default">
+	Haut
+	</button>
+	<button type="button" class="btn btn-default">
+	Milieu
+	</button>
+	<button type="button" class="btn btn-default">
+	Bas
+	</button>
+</div>
+ +

Barres à outils

+

Utilisez pour afficher plusieurs groupes de boutons ensemble sur une seule ligne. Notez que l'utilisation de cette fonctionnalité nécessite certaines exigences supplémentaires afin de se conformer aux WCAG.

+

Example de Travail

+ + +

Code sample

+
// Barres à outils:
+<div class="btn-toolbar" role="toolbar" aria-label="Barres à outils avec groupes de boutons">
+	<div class="btn-group" role="group" aria-label="Premier groupe">
+		<button type="button" class="btn btn-default">
+		1
+		</button>
+		<button type="button" class="btn btn-default">
+		2
+		</button>
+		<button type="button" class="btn btn-default">
+		3
+		</button>
+		<button type="button" class="btn btn-default">
+		4
+		</button>
+	</div>
+
+	<div class="btn-group" role="group" aria-label="Deuxieme groupe">
+		<button type="button" class="btn btn-default">
+		5
+		</button>
+		<button type="button" class="btn btn-default">
+		6
+		</button>
+		<button type="button" class="btn btn-default">
+		7
+		</button>
+	</div>
+
+	<div class="btn-group" role="group" aria-label="Deuxieme groupe">
+		<button type="button" class="btn btn-default">
+		8
+		</button>
+	</div>
+</div>
+ +

Groupes d'entrée

+

Étendez facilement les contrôles de formulaire en ajoutant des boutons ou des groupes de boutons de chaque côté des entrées textuelles avec les classes input-group et input-group-btn.

+

Exemple de travail

+
+
+ +
+ +
+ +
+ +
+ +
+
+ +

Code

+
// Groupes d'entrée:
+<div class="input-group mb-3">
+	<div class="input-group-btn">
+		<button class="btn btn-default" type="button">Button</button>
+	</div>
+	<input type="text" class="form-control">
+</div>
+
+<div class="input-group mb-3">
+	<input type="text" class="form-control">
+	<div class="input-group-btn">
+		<button class="btn btn-default" type="button">Bouton</button>
+	</div>
+</div>
+ +

Boutons de basculement de données

+ +
+

Actuellement, cette fonctionnalité n'est pas fonctionnelle car nous n'implémentons pas le JavaScript de Bootstrap.

+
+ +

Les styles .button de Bootstrap peuvent être appliqués à d'autres éléments, tels que les label, pour fournir un basculement de case à cocher ou de bouton radio. Ajoutez data-toggle="buttons" à un .btn-group contenant ces boutons modifiés pour activer leur comportement de basculement via JavaScript et ajoutez .btn-group-toggle pour styliser les input dans vos boutons. Plus d’informations peuvent être trouvées ici : Composants d'amorçage

+ +

Nous travaillons actuellement à l'ajout de fonctionnalités similaires à l'avenir. Plus d'informations peuvent être trouvées dans cette pull request sur GitHub.

+ +

Ressource

+

Guidage du système de conception sur les boutons

diff --git a/common/button/index.json-ld b/common/button/index.json-ld new file mode 100644 index 000000000..984d44484 --- /dev/null +++ b/common/button/index.json-ld @@ -0,0 +1,34 @@ +{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Buttons", + "fr": "Boutons" + }, + "description": { + "en": "Buttons page including working examples to test how various button styles appear and function", + "fr": "Page des boutons comprenant des exemples de travail pour tester l'apparence et le fonctionnement de divers styles de boutons." + }, + "modified": "2023-06-09", + "componentName": "button", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Buttons", + "language": "en", + "path": "button-en.html" + }, + { + "title": "Boutons", + "language": "fr", + "path": "button-fr.html" + } + ] + } +}