added loading state to button and tried to fix form item

styleguide/src/system/components/data-input/FormItem/FormItem.vue

@@ -1,9 +1,10 @@
 <template>
-  <div 
+  <div
     class="ds-form-item"
-    :class="$parentInput.stateClasses">
-    <ds-input-label 
-      :label="$parentInput.label" 
+    :class="$parentInput ? $parentInput.stateClasses : ''">
+    <ds-input-label
+      v-if="$parentInput"
+      :label="$parentInput.label"
       :for="$parentInput.id" />
     <slot/>
     <ds-input-error :error="$parentInput.error" />

styleguide/src/system/components/navigation/Button/Button.vue

@@ -10,12 +10,16 @@
       ghost && `ds-button-ghost`,
       iconOnly && `ds-button-icon-only`,
       hover && `ds-button-hover`,
-      fullWidth && `ds-button-full-width`
+      fullWidth && `ds-button-full-width`,
+      loading && `ds-button-loading`
     ]"
     v-bind="bindings"
     :is="linkTag">
     <ds-icon
-      v-if="icon"
+      v-if="loading"
+      name="spinner" />
+    <ds-icon
+      v-if="icon && !loading"
       :name="icon"/>
     <span
       class="ds-button-text"
@@ -130,6 +134,13 @@ export default {
     fullWidth: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Show loading state
+     */
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -141,6 +152,9 @@ export default {
       if (this.path && this.linkTag === 'a') {
         bindings.href = this.path
       }
+      if (this.loading) {
+        bindings.disabled = true
+      }
       return bindings
     },
     iconOnly() {

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

@@ -45,6 +45,7 @@ A button can take different states.
 ```
 <ds-button>Default state</ds-button>
 <ds-button disabled>Disabled state</ds-button>
+<ds-button :loading="true">Loading state</ds-button>
 <ds-button hover>Hover state</ds-button>
 ```