diff --git a/styleguide/src/system/components/navigation/Button/Button.vue b/styleguide/src/system/components/navigation/Button/Button.vue index d689ba727..801055e54 100644 --- a/styleguide/src/system/components/navigation/Button/Button.vue +++ b/styleguide/src/system/components/navigation/Button/Button.vue @@ -9,20 +9,21 @@ danger && `ds-button-danger`, ghost && `ds-button-ghost`, iconOnly && `ds-button-icon-only`, - hover && `ds-button-hover` + hover && `ds-button-hover`, + fullWidth && `ds-button-full-width` ]" v-bind="bindings" :is="linkTag"> - - - @@ -122,6 +123,13 @@ export default { iconRight: { type: String, default: null + }, + /** + * Should the button spread to the full with of the parent? + */ + fullWidth: { + type: Boolean, + default: false } }, computed: { diff --git a/styleguide/src/system/components/navigation/Button/demo.md b/styleguide/src/system/components/navigation/Button/demo.md index 86e462171..a868979a6 100644 --- a/styleguide/src/system/components/navigation/Button/demo.md +++ b/styleguide/src/system/components/navigation/Button/demo.md @@ -32,6 +32,12 @@ Use different sizes to create hierarchy. Large ``` +## Button full width + +``` +Full Width +``` + ## Button states A button can take different states. @@ -60,4 +66,4 @@ Provide a path to the button. You can pass a url string or a Vue router path obj ``` Click me Click me -``` \ No newline at end of file +``` diff --git a/styleguide/src/system/components/navigation/Button/style.scss b/styleguide/src/system/components/navigation/Button/style.scss index 70e5ee4d4..05671258c 100644 --- a/styleguide/src/system/components/navigation/Button/style.scss +++ b/styleguide/src/system/components/navigation/Button/style.scss @@ -202,3 +202,7 @@ margin-right: 0; } } + +.ds-button-full-width { + width: 100%; +}