Add icon only button to documentation
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ia00d714b0d33b849a6e9dde8d25e9e9c78d36002
diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue
index 2035e4d..795c837 100644
--- a/docs/.vuepress/components/BmcButtons.vue
+++ b/docs/.vuepress/components/BmcButtons.vue
@@ -13,6 +13,10 @@
<icon-add />
<span>Link Button</span>
</b-button>
+ <b-button variant="link">
+ <icon-trashcan />
+ <span class="sr-only">Delete</span>
+ </b-button>
<h3 class="h4">Disabled</h3>
<b-button disabled variant="primary">Primary</b-button>
@@ -27,21 +31,25 @@
<icon-add />
<span>Link Button</span>
</b-button>
+ <b-button disabled variant="link">
+ <icon-trashcan />
+ <span class="sr-only">Delete</span>
+ </b-button>
</div>
</template>
<script>
import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
import IconArrowRight from '@carbon/icons-vue/es/arrow--right/16';
export default {
name: 'BmcButtons',
- components: { IconAdd, IconArrowRight }
+ components: { IconAdd, IconArrowRight, IconTrashcan }
}
</script>
<style scoped>
button {
margin-bottom: 1rem;
- margin-right: .5rem;
}
h3 {
diff --git a/docs/guide/components/button.md b/docs/guide/components/button.md
index aeb93ed..6916d43 100644
--- a/docs/guide/components/button.md
+++ b/docs/guide/components/button.md
@@ -13,6 +13,11 @@
<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>