From c13d93685e1ac98c7d33a3e8aa8faf4481aa75bc Mon Sep 17 00:00:00 2001 From: Brahim Mahadi Wachilli Date: Tue, 22 Aug 2023 14:26:39 -0400 Subject: [PATCH] Addressed Requested Changes --- common/button/button-en.html | 105 ++++++++++++++++++----------------- common/button/button-fr.html | 8 +-- 2 files changed, 58 insertions(+), 55 deletions(-) diff --git a/common/button/button-en.html b/common/button/button-en.html index 348d32c4a..9e6c769e7 100644 --- a/common/button/button-en.html +++ b/common/button/button-en.html @@ -4,18 +4,18 @@ "language": "en", "altLangPage": "button-fr.html", "description": "Buttons page including working examples to test how various button styles appear and function", - "dateModified": "2023-06-14" + "dateModified": "2023-08-24" } ---

On this page:

-

Button vs links

+
Button
A button will perform an action on the current page without moving the focus or without navigating the user away
@@ -49,7 +50,7 @@

With the default style:

-Link +Link

Code Sample


@@ -59,7 +60,7 @@ 
Code Sample

 	</button>
 	<input type="button" value="Input"/>
 	<input type="submit" value="Submit"/>
-	<a href="#" role="button">
+	<a href="#">
 	Link
 	</a>
 
@@ -69,16 +70,16 @@ 
Code Sample

 	</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="#" role="button">
+	<a class="btn btn-default" href="#">
 	Link
 	</a>
-

Enhanced use

+ -

Colours/Styles

+

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

+

Working example

@@ -131,8 +132,8 @@

Code sample

</a> -

Supertask (Call to Action)

-

Working example

+

Supertask (Call to Action)

+

Working example

Code sample

@@ -142,9 +143,9 @@

Code sample

-

Sizing

+

Sizing

Use to increase or decrease the size of a button.

-

Working example

+

Working example

@@ -172,9 +173,9 @@

Code sample

Large button </button> -

Full Width

+

Full Width

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

-

Working example

+

Working example

Code sample

@@ -183,9 +184,9 @@

Code sample

<button type="button" class="btn btn-default btn-block">Button</button> -

Active state

+

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

+

Working example

Link @@ -200,9 +201,9 @@

Code sample

</a> -

Disabled state

+

Disabled state

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

-

Working example

+

Working example

Link @@ -217,45 +218,45 @@

Code sample

</a> -

Button groups (Horizontal)

+

Button groups (Horizontal)

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

-

Working Example

-
Default:
+

Working Example

+

Default:

-
Large:
+

Large:

-
Small:
+

Small:

-
Extra small:
+

Extra small:

-
Justified (links):
+

Justified (links):

Left Middle Right
-
Justified (buttons):
+

Justified (buttons):

@@ -301,9 +302,9 @@

Code sample

</div> -

Button groups (Vertical)

+

Button groups (Vertical)

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

-

Working Example

+

Working Example

@@ -324,9 +325,9 @@

Code sample

</button> </div> -

Button toolbar

+

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

+

Working Example