added full-width option to button

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">
-    <ds-icon 
-      v-if="icon" 
+    <ds-icon
+      v-if="icon"
       :name="icon"/>
-    <span 
+    <span
       class="ds-button-text"
       v-if="$slots.default">
       <slot />
     </span>
-    <ds-icon 
-      v-if="iconRight" 
+    <ds-icon
+      v-if="iconRight"
       :name="iconRight"/>
   </component>
 </template>
@@ -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: {

styleguide/src/system/components/navigation/Button/demo.md

@@ -32,6 +32,12 @@ Use different sizes to create hierarchy.
 <ds-button size="large">Large</ds-button>
 ```
 
+## Button full width
+
+```
+<ds-button full-width>Full Width</ds-button>
+```
+
 ## 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
 ```
 <ds-button path="/navigation">Click me</ds-button>
 <ds-button :path="{ name: 'Navigation' }">Click me</ds-button>
-```
+```

styleguide/src/system/components/navigation/Button/style.scss

@@ -202,3 +202,7 @@
     margin-right: 0;
   }
 }
+
+.ds-button-full-width {
+  width: 100%;
+}