diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/.vuepress/components/BmcButtons.vue | 12 | ||||
| -rw-r--r-- | docs/guide/components/button.md | 5 |
2 files changed, 15 insertions, 2 deletions
diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue index 2035e4db..795c837a 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 aeb93edc..6916d438 100644 --- a/docs/guide/components/button.md +++ b/docs/guide/components/button.md @@ -13,6 +13,11 @@ 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> |