From a9de9148bab7a1b76cfc76f9891dd6a4b3adeb2a Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Wed, 24 Feb 2021 16:43:49 +0530
Subject: Update button documentation for icon only button

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I93aa1082880985fef316424a9cf400a9d0a8c2b3
---
 docs/guide/components/buttons/index.md | 39 +++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 10 deletions(-)

(limited to 'docs/guide/components/buttons')

diff --git a/docs/guide/components/buttons/index.md b/docs/guide/components/buttons/index.md
index ca78201b..da569a15 100644
--- a/docs/guide/components/buttons/index.md
+++ b/docs/guide/components/buttons/index.md
@@ -4,15 +4,13 @@ Buttons are used to perform an action. The main buttons in the application are t
 
 [Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button)
 
+### Icon only buttons
+Add `btn-icon-only` class to the button and add `title` attribute to get helper text on hover over the button.
+
 ### Enabled buttons
 
 ![Button examples](./button.png)
 
-### Disabled buttons
-
-![Disabled button examples](./button-disabled.png)
-
-
 ```vue
 // Enabled Buttons
 <b-button variant="primary">Primary</b-button>
@@ -20,11 +18,6 @@ Buttons are used to perform an action. The main buttons in the application are t
   <icon-add />
   <span>Primary with icon</span>
 </b-button>
-<b-button variant="link">
-  <icon-trashcan />
-  <span class="sr-only">Delete</span>
-</b-button>
-
 <b-button variant="secondary">Secondary</b-button>
 <b-button variant="danger">Danger</b-button>
 <b-button variant="link">Link Button</b-button>
@@ -32,4 +25,30 @@ Buttons are used to perform an action. The main buttons in the application are t
   <icon-add />
   <span>Link Button</span>
 </b-button>
+<b-button variant="link" title="Delete" class="btn-icon-only">
+  <icon-trashcan />
+</b-button>
+```
+
+### Disabled buttons
+
+![Disabled button examples](./button-disabled.png)
+
+```vue
+// Disabled Buttons
+<b-button disabled variant="primary">Primary</b-button>
+<b-button disabled variant="primary">
+  <icon-add />
+  <span>Primary with icon</span>
+</b-button>
+<b-button disabled variant="secondary">Secondary</b-button>
+<b-button disabled variant="danger">Danger</b-button>
+<b-button disabled variant="link">Link Button</b-button>
+<b-button disabled variant="link">
+  <icon-add />
+  <span>Link Button</span>
+</b-button>
+<b-button disabled variant="link" title="Delete" class="btn-icon-only">
+  <icon-trashcan />
+</b-button>
 ```
\ No newline at end of file
-- 
cgit v1.2.3