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%;
+}