Added more button examples on doc page

Author: romanslonov

docs/components/button.md

@@ -20,13 +20,57 @@
 <v-button appearance="danger">Danger</v-button>
 ```
 
+<div class="p-3 border rounded-2 my-3">
+  <v-button loading appearance="default">Default</v-button>
+  <v-button loading appearance="primary">Primary</v-button>
+  <v-button loading appearance="alternative">Alternative</v-button>
+  <v-button loading appearance="subtle">Alternative</v-button>
+  <v-button loading appearance="success">Success</v-button>
+  <v-button loading appearance="danger">Danger</v-button>
+</div>
+
+``` html
+<v-button loading appearance="default">Default</v-button>
+```
+
+<div class="p-3 border rounded-2 my-3">
+  <v-button disabled appearance="default">Default</v-button>
+  <v-button disabled appearance="primary">Primary</v-button>
+  <v-button disabled appearance="alternative">Alternative</v-button>
+  <v-button disabled appearance="subtle">Alternative</v-button>
+  <v-button disabled appearance="success">Success</v-button>
+  <v-button disabled appearance="danger">Danger</v-button>
+</div>
+
+``` html
+<v-button disabled appearance="default">Default</v-button>
+```
+
+<div class="p-3 border rounded-2 my-3">
+  <v-button icon-first appearance="default">
+    <svg slot="icon" viewBox="0 0 24 24" width="20" height="20"><g fill="currentColor" fill-rule="nonzero"><path d="M7.723 4.552A1 1 0 0 1 8.617 4h6.764a1 1 0 0 1 .895.554L16.997 6H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.997l.726-1.448zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM6 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path><path d="M12 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g>
+    </svg>
+    Default
+  </v-button>
+  <v-button appearance="primary">
+    Primary
+    <svg slot="icon" viewBox="0 0 24 24" width="20" height="20"><g fill="currentColor" fill-rule="nonzero"><path d="M7.723 4.552A1 1 0 0 1 8.617 4h6.764a1 1 0 0 1 .895.554L16.997 6H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.997l.726-1.448zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM6 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path><path d="M12 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g>
+        </svg>
+  </v-button>
+</div>
+
+``` html
+<v-button disabled appearance="default">Default</v-button>
+```
+
 ## Props
 Name       | Type     | Description | Default
 ---------- | -------- | ----------- | -----
 type       | String   | Button type, 'button' or 'submit' | button
 appearance | String   | There are 6 options: ['default', 'primary', 'alternative', 'subtle', 'success', 'danger'] | <code>default</code>
 disabled   | Boolean  | Whether button disabled or not | false
-loading   | Boolean  | Whether button in loading state or not | false
+loading    | Boolean  | Whether button in loading state or not | false
+icon-first | Boolean  | Set to `true` if you want to render icon before text
 
 ## Slots
 Name     | Slot props       | Description

docs/components/checkbox-group.md

@@ -1,4 +1,4 @@
-# Checkbox Group
+# Checkbox Group <badge text="stable" />
 Set of checkbox's components
 
 ## Example

docs/components/radio-group.md

@@ -1,4 +1,4 @@
-# Radio Group
+# Radio Group <badge text="stable" />
 Set of radio's components
 
 ## Example

docs/components/radio.md

@@ -1,4 +1,4 @@
-# Radio
+# Radio <badge text="stable" />
 The custom radio and it's states.
 
 ## Example

package-lock.json

@@ -18,7 +18,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "devDependencies": {
-    "@modulist/css": "0.0.4",
+    "@modulist/css": "0.0.5",
     "@vue/cli-plugin-babel": "^3.5.0",
     "@vue/cli-plugin-eslint": "^3.5.0",
     "@vue/cli-plugin-unit-jest": "^3.5.0",

package.json

@@ -1,7 +1,9 @@
 <template>
   <button class="button" :class="classes" :disabled="disabled" :type="type">
-    <slot name="icon"></slot>
     <slot></slot>
+    <div class="button__icon" v-if="$slots.icon">
+      <slot name="icon"></slot>
+    </div>
   </button>
 </template>
 
@@ -28,12 +30,17 @@ export default {
       type: Boolean,
       default: false,
     },
+    iconFirst: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     classes() {
       return [
         `button--${this.appearance}`,
         { 'button--loading': this.loading },
+        { 'button--icon-first': this.iconFirst },
       ];
     },
   },