diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 30df103..1c549e5 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -616,3 +616,4 @@ - Documented `radio` and `checkbox` in the `input_control` doc page. - Tweaked all references of `$back-color` to now use `#fafafa` instead of the previous `#f5f5f5`. This will make contrast better and allow for better visibility of certain pieces of text. +- Full documentation for `button`s and `button-group`s. diff --git a/docs/v2/input_control.html b/docs/v2/input_control.html index 409dc34..2b95407 100644 --- a/docs/v2/input_control.html +++ b/docs/v2/input_control.html @@ -394,29 +394,76 @@
- + + + + + + + + +

Button group

+
+ + + +
-

+

All button types have been stylized by default, while maintaining accessiblity. Simply add any <button> or an <input> with a button type (i.e. "button", "submit" or "reset") and they will be styled accordingly. You can also use the .button class for links, labels and other elements of your choice to make them look like buttons.

+

Color variants are available in the form of the .primary, .secondary, .tertiary and .inverse classes. Size variants are available as well in the form of .small and .large classes.

+

Finally, you can create responsive groups of buttons by wrapping them inside a <div> with the .button-group class.

Sample code

- 

+                
<button>Default button</button>
+<input type="button" class="primary" value="Primary button">
+<input type="reset" class="secondary" value="Secondary button">
+<input type="submit" class="tertiary" value="Tertiary button">
+<button class="inverse">Inverse button</button>
+<button class="small">Small button</button>
+<button class="large">Large button</button>           
+<button disabled>Disabled button</button>
+<a href="#" class="button">Link button</a>
+<label class="button">Label button</label>
+
+<div class="button-group">
+  <button>Button</button>
+  <button>Button</button>
+  <button>Button</button>
+</div>

               

             

             

             
Notes

               
               

               

-                

-                  

-                  
Do: 

+                

+                  
<button class="inverse small">Small inverse button</button>

+                  
Do: You can mix and match button color and size variants to achieve the desired effect.

                 

-                

-                  

-                  
Don't: 

+                

+                  
<button class="secondary inverse">Problematic button</button>
+<!-- or -->
+<button class="small large">Problematic button</button>

+                  
Don't: Avoid mixing two or more button color or size variants, as these combinations might result in unexpected behavior.

+                

+                

+                  
<div class="button-group">
+  <button>Button</button>
+  <input type="reset" class="secondary" value="Secondary button">
+  <label class="button inverse">Label button</label>
+</div>

+                  
Do: You can use button color variants inside the same .button-group. You can also use any component styled like a button inside a .button-group.

+                

+                

+                  
<div class="button-group">
+  <button class="large">Button</button>
+  <button>Button</button>
+  <button class="small">Button</button>
+</div>

+                  
Don't: Avoid using button size variants inside a .button-group, as this might result in unexpected behavior.

                 

               

             

diff --git a/docs/v2/playground.html b/docs/v2/playground.html
index 64a9cc8..c1e9852 100644
--- a/docs/v2/playground.html
+++ b/docs/v2/playground.html
@@ -212,6 +212,22 @@
             
             
             
+            


+            
+
+
+
+
+
+           
+
+Link button
+
+

+  
+  
+  
+