From 3fb36afa8320bec178f091dde6bd3e3f3515f3c8 Mon Sep 17 00:00:00 2001
From: Nicolas Coden <nicolas@ncoden.fr>
Date: Sun, 7 Jan 2018 17:54:27 +0100
Subject: [PATCH] docs: update button-group docs

---
 docs/pages/button-group.md | 47 ++++++++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/docs/pages/button-group.md b/docs/pages/button-group.md
index 14294c027..5752f9e60 100644
--- a/docs/pages/button-group.md
+++ b/docs/pages/button-group.md
@@ -84,9 +84,11 @@ The entire group can also be colored using the same classes.
 </div>
 ```
 
-## Hollow
+---
+
+## Hollow and clear
 
-Buttons within a button group can be given hollow style individually by adding a class `.hollow` respectively.
+Buttons within a button group can be given hollow and clear styles individually by adding a class `.hollow` or `.clear` respectively.
 
 ```html_example
 <div class="button-group">
@@ -95,19 +97,35 @@ Buttons within a button group can be given hollow style individually by adding a
   <a class="warning button hollow">Share</a>
   <a class="alert button hollow">Delete</a>
 </div>
+
+<div class="button-group">
+  <a class="secondary button clear">View</a>
+  <a class="success button clear">Edit</a>
+  <a class="warning button clear">Share</a>
+  <a class="alert button clear">Delete</a>
+</div>
 ```
 
-The entire group can also be given hollow style using the same class.
+The entire group can also be given hollow or clear styles using the same class.
 
 ```html_example
-<div class="primary button-group hollow">
-  <a class="button">Harder</a>
-  <a class="button">Better</a>
-  <a class="button">Faster</a>
-  <a class="button">Stronger</a>
+<div class="button-group hollow">
+  <a class="secondary button">View</a>
+  <a class="success button">Edit</a>
+  <a class="warning button">Share</a>
+  <a class="alert button">Delete</a>
+</div>
+
+<div class="button-group clear">
+  <a class="secondary button">View</a>
+  <a class="success button">Edit</a>
+  <a class="warning button">Share</a>
+  <a class="alert button">Delete</a>
 </div>
 ```
 
+---
+
 ## No Gaps
 
 When using a single color for the button-group, you might want to remove the `1px` spacing between the buttons. You can use `no-gaps` to just the same.
@@ -121,7 +139,7 @@ When using a single color for the button-group, you might want to remove the `1p
 </div>
 ```
 
-The class `no-gaps` also works for hollow style.
+You can use `no-gaps` on `hollow` styles.
 
 ```html_example
 <div class="primary button-group hollow no-gaps">
@@ -132,6 +150,17 @@ The class `no-gaps` also works for hollow style.
 </div>
 ```
 
+You can use `no-gaps` with all grouped/individual styles.
+
+```html_example
+<div class="button-group no-gaps">
+  <a class="secondary button">View</a>
+  <a class="success button">Share</a>
+  <a class="warning button hollow">Edit</a>
+  <a class="alert button clear">Delete</a>
+</div>
+```
+
 ---
 
 ## Even-width Group
-- 
2.47.2