diff --git a/.stories/Button/Button.svelte b/.stories/Button/Button.svelte
index 2c52fe0..eed94d9 100644
--- a/.stories/Button/Button.svelte
+++ b/.stories/Button/Button.svelte
@@ -1,9 +1,9 @@
 <script>
     import { Button } from 'svelte-admin'
 
-    function click() {
-        alert('hello from button')
-    }
+    const colors = ['primary', 'success', 'danger', 'warning']
 </script>
 
-<Button text="Click!" on:click={click} />
+{#each colors as color}
+    <Button {color}>{color}</Button>
+{/each}
diff --git a/.stories/Button/Disabled.svelte b/.stories/Button/Disabled.svelte
new file mode 100644
index 0000000..d37dfc2
--- /dev/null
+++ b/.stories/Button/Disabled.svelte
@@ -0,0 +1,5 @@
+<script>
+    import { Button } from 'svelte-admin'
+</script>
+
+<Button disabled color="primary">Disabled</Button>
diff --git a/.stories/Button/Icon.svelte b/.stories/Button/Icon.svelte
new file mode 100644
index 0000000..0b250f0
--- /dev/null
+++ b/.stories/Button/Icon.svelte
@@ -0,0 +1,34 @@
+<script>
+    import { Button } from 'svelte-admin'
+
+    const colors = ['primary', 'success', 'danger', 'warning']
+</script>
+
+{#each colors as color}
+    <Button {color}>
+        <svg
+            slot="icon"
+            fill="white"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="50"
+            height="50"
+            viewBox="0 0 16 17">
+            <defs>
+                <path
+                    id="prefix__a"
+                    d="M14.707
+                    6.707l-.045.043-.027.023c-.116.095-.254.165-.406.2l-.112.02c-.037.005-.074.007-.111.007H9c-.552
+                    0-1-.448-1-1s.448-1 1-1h3.155C11.073 3.735 9.603 3 8 3 4.686
+                    3 2 5.686 2 9s2.686 6 6 6 6-2.686 6-6c0-.552.448-1 1-1s1
+                    .448 1 1c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8c1.892
+                    0 3.632.734 5 1.999V1c0-.552.448-1 1-1s1 .448 1 1v4.994c0
+                    .033-.001.067-.004.1l-.009.066c-.003.02-.007.042-.012.062-.012.055-.03.109-.05.16l-.022.048c-.027.056-.058.109-.094.158l-.02.027-.02.024c-.015.019-.031.037-.048.054l-.014.014z" />
+            </defs>
+            <g>
+                <use fill="white" fill-rule="nonzero" xlink:href="#prefix__a" />
+            </g>
+        </svg>
+        {color}
+    </Button>
+{/each}
diff --git a/.stories/Button/Link.svelte b/.stories/Button/Link.svelte
new file mode 100644
index 0000000..c0c1ef4
--- /dev/null
+++ b/.stories/Button/Link.svelte
@@ -0,0 +1,10 @@
+<script>
+    import { Button } from 'svelte-admin'
+    const colors = ['primary', 'success', 'danger', 'warning']
+</script>
+
+{#each colors as color}
+    <Button href="/" target="__blank" rel="noreferrer noopener" {color}>
+        {color} link
+    </Button>
+{/each}
diff --git a/.stories/Button/Outline.svelte b/.stories/Button/Outline.svelte
index c3beb58..15982f7 100644
--- a/.stories/Button/Outline.svelte
+++ b/.stories/Button/Outline.svelte
@@ -1,9 +1,9 @@
 <script>
     import { Button } from 'svelte-admin'
 
-    function click() {
-        alert('hello from button')
-    }
+    const colors = ['primary', 'success', 'danger', 'warning']
 </script>
 
-<Button outline text="click" on:click={click} />
+{#each colors as color}
+    <Button outline {color}>{color}</Button>
+{/each}
diff --git a/.stories/Button/RTL.svelte b/.stories/Button/RTL.svelte
new file mode 100644
index 0000000..12ede35
--- /dev/null
+++ b/.stories/Button/RTL.svelte
@@ -0,0 +1,34 @@
+<script>
+    import { Button } from 'svelte-admin'
+
+    const colors = ['primary', 'success', 'danger', 'warning']
+</script>
+
+{#each colors as color}
+    <Button size="md" dir="rtl" {color}>
+        <svg
+            slot="icon"
+            fill="white"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="50"
+            height="50"
+            viewBox="0 0 16 17">
+            <defs>
+                <path
+                    id="prefix__a"
+                    d="M14.707
+                    6.707l-.045.043-.027.023c-.116.095-.254.165-.406.2l-.112.02c-.037.005-.074.007-.111.007H9c-.552
+                    0-1-.448-1-1s.448-1 1-1h3.155C11.073 3.735 9.603 3 8 3 4.686
+                    3 2 5.686 2 9s2.686 6 6 6 6-2.686 6-6c0-.552.448-1 1-1s1
+                    .448 1 1c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8c1.892
+                    0 3.632.734 5 1.999V1c0-.552.448-1 1-1s1 .448 1 1v4.994c0
+                    .033-.001.067-.004.1l-.009.066c-.003.02-.007.042-.012.062-.012.055-.03.109-.05.16l-.022.048c-.027.056-.058.109-.094.158l-.02.027-.02.024c-.015.019-.031.037-.048.054l-.014.014z" />
+            </defs>
+            <g>
+                <use fill="white" fill-rule="nonzero" xlink:href="#prefix__a" />
+            </g>
+        </svg>
+        {color}
+    </Button>
+{/each}
diff --git a/.stories/Button/Size.svelte b/.stories/Button/Size.svelte
new file mode 100644
index 0000000..cafa7a4
--- /dev/null
+++ b/.stories/Button/Size.svelte
@@ -0,0 +1,39 @@
+<script>
+    import { Button } from 'svelte-admin'
+
+    const colors = ['primary', 'success', 'danger', 'warning']
+</script>
+
+{#each colors as color}
+    <Button size="md" {color}>{color}</Button>
+{/each}
+<br />
+<br />
+{#each colors as color}
+    <Button size="md" {color} icon>
+        <svg
+            slot="icon"
+            fill="white"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="50"
+            height="50"
+            viewBox="0 0 16 17">
+            <defs>
+                <path
+                    id="prefix__a"
+                    d="M14.707
+                    6.707l-.045.043-.027.023c-.116.095-.254.165-.406.2l-.112.02c-.037.005-.074.007-.111.007H9c-.552
+                    0-1-.448-1-1s.448-1 1-1h3.155C11.073 3.735 9.603 3 8 3 4.686
+                    3 2 5.686 2 9s2.686 6 6 6 6-2.686 6-6c0-.552.448-1 1-1s1
+                    .448 1 1c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8c1.892
+                    0 3.632.734 5 1.999V1c0-.552.448-1 1-1s1 .448 1 1v4.994c0
+                    .033-.001.067-.004.1l-.009.066c-.003.02-.007.042-.012.062-.012.055-.03.109-.05.16l-.022.048c-.027.056-.058.109-.094.158l-.02.027-.02.024c-.015.019-.031.037-.048.054l-.014.014z" />
+            </defs>
+            <g>
+                <use fill="white" fill-rule="nonzero" xlink:href="#prefix__a" />
+            </g>
+        </svg>
+        {color}
+    </Button>
+{/each}
diff --git a/.stories/Button/index.svelte b/.stories/Button/index.svelte
index 89c685c..0ca1aef 100644
--- a/.stories/Button/index.svelte
+++ b/.stories/Button/index.svelte
@@ -1,12 +1,32 @@
 <script>
     import Button from './Button.svelte'
     import Outline from './Outline.svelte'
+    import Icon from './Icon.svelte'
+    import Size from './Size.svelte'
+    import Disabled from './Disabled.svelte'
+    import Link from './Link.svelte'
+    import RTL from './RTL.svelte'
 </script>
 
-<!-- We can add mutiple variations of components as a single component in storybook  -->
-
-<h3>Colored button!</h3>
+<h1>Buttons</h1>
+<br />
+<h2>Colors</h2>
 <Button />
 
-<h3>Simple button!</h3>
+<h2>Outline</h2>
 <Outline />
+
+<h2>Icon</h2>
+<Icon />
+
+<h2>Size</h2>
+<Size />
+
+<h2>Disabled</h2>
+<Disabled />
+
+<h2>Link</h2>
+<Link />
+
+<h2>RTL</h2>
+<RTL />
diff --git a/.stories/index.stories.js b/.stories/index.stories.js
index 2c1f2be..3f12abf 100644
--- a/.stories/index.stories.js
+++ b/.stories/index.stories.js
@@ -5,4 +5,4 @@ const story = Component => () => ({
     Component,
 })
 
-storiesOf('Components', module).add('Button Component', story(Button))
+storiesOf('Components', module).add('Button', story(Button))
diff --git a/Button/Button.scss b/Button/Button.scss
new file mode 100644
index 0000000..7bd3b17
--- /dev/null
+++ b/Button/Button.scss
@@ -0,0 +1,144 @@
+@import '../styles/variables.scss';
+@import '../styles/mixins.scss';
+
+.btn {
+    --bg-color: $primary;
+    @include btn();
+
+    &-primary {
+        background-color: $primary;
+        border: 1px solid $primary;
+        &:not([disabled]):hover {
+            background-color: $primary-hover;
+            border-color: $primary-hover-border-color;
+            color: $white;
+        }
+        &:not([disabled]):active,
+        &:not([disabled]):focus {
+            background-color: $primary-hover;
+            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+            color: $white;
+        }
+    }
+    &-success {
+        background-color: $success;
+        border: 1px solid $success;
+        &:not([disabled]):hover {
+            background-color: $success-hover;
+            border-color: $success-hover-border-color;
+            color: $white;
+        }
+        &:not([disabled]):active,
+        &:not([disabled]):focus {
+            background-color: $success-hover;
+            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+            color: $white;
+        }
+    }
+    &-danger {
+        background-color: $danger;
+        border: 1px solid $danger;
+        &:not([disabled]):hover {
+            background-color: $danger-hover;
+            border-color: $danger-hover-border-color;
+            color: $white;
+        }
+        &:not([disabled]):active,
+        &:not([disabled]):focus {
+            background-color: $danger-hover;
+            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+            color: $white;
+        }
+    }
+    &-warning {
+        background-color: $warning;
+        border: 1px solid $warning;
+        &:not([disabled]):hover {
+            background-color: $warning-hover;
+            border-color: $warning-hover-border-color;
+            color: $white;
+        }
+        &:not([disabled]):active,
+        &:not([disabled]):focus {
+            background-color: $warning-hover;
+            box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+            color: $white;
+        }
+    }
+    &-outline-primary {
+        background: none;
+        border: 1px solid $primary;
+        color: $primary;
+    }
+    &-outline-danger {
+        background: none;
+        border: 1px solid $danger;
+        color: $danger;
+    }
+    &-outline-success {
+        background: none;
+        border: 1px solid $success;
+        color: $success;
+    }
+    &-outline-warning {
+        background: none;
+        border: 1px solid $warning;
+        color: $warning;
+    }
+    &-block {
+        display: block;
+        width: 100%;
+    }
+    &-size-md {
+        min-width: 340px;
+    }
+    &-size-sm {
+        min-width: 164px;
+    }
+
+    &-size-lg {
+        min-width: 640px;
+    }
+    .icon {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: var(--bg-color);
+        margin-inline-end: 4px;
+        @include center-horizontally();
+    }
+    &.btn-size-md.ltr .icon,
+    &.btn-size-lg.ltr .icon {
+        position: absolute;
+        left: 5%;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    &.btn-size-md.rtl .icon,
+    &.btn-size-lg.rtl .icon {
+        position: absolute;
+        right: 5%;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+}
+a {
+    text-decoration: none;
+}
+button:disabled,
+a.disabled {
+    background-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.26);
+    pointer-events: none;
+    cursor: default;
+    border: none;
+    &:hover {
+        background-color: none;
+        color: none;
+        box-shadow: none;
+    }
+}
+span.icon :global(*) {
+    max-width: 16px;
+    max-height: 16px;
+}
diff --git a/Button/Button.svelte b/Button/Button.svelte
index d6d4adc..991b9eb 100644
--- a/Button/Button.svelte
+++ b/Button/Button.svelte
@@ -1,18 +1,59 @@
 <script>
-    export let text
-    export let outline
+    import { getProps } from '../utils'
+    let cls = ''
+    export let outline = false
+    export { cls as class }
+    export let block = false
+    export let color = 'primary'
+    export let style = ''
+    export let disabled = false
+    export let href = ''
+    export let size = ''
+
+    const iconSlot = $$props.$$slots && 'icon' in $$props.$$slots
+
+    function iconBgColor(color) {
+        if (color === 'primary') return ' #0069d9'
+        if (color === 'danger') return '#df2b1e'
+        if (color === 'warning') return '#fda624'
+        if (color === 'success') return '#218838'
+    }
+
+    const props = getProps($$props)
+
+    $: classNames = `${cls} btn btn-${color} 
+    ${outline ? 'btn-outline-' + color : ''} 
+    ${size ? 'btn-size-' + size : ''}
+    ${block ? 'btn-block' : ''}
+    ${href && disabled ? 'disabled' : ''}
+    ${props.dir === 'rtl' ? 'rtl' : 'ltr'}
+    `
 </script>
 
 <style type="text/scss" lang="scss">
-    @import '../styles/variables.scss';
-    button {
-        padding: 8px 12px;
-    }
-    .outline {
-        background: none;
-        border: 1px solid;
-        color: red;
-    }
+    @import './Button.scss';
 </style>
 
-<button class:outline on:click>{text}!</button>
+{#if href}
+    <a {...props} {href} {style} {disabled} class={classNames} on:click>
+        {#if iconSlot}
+            <span style="--bg-color: {iconBgColor(color)}" class="icon">
+                <slot name="icon" />
+            </span>
+        {/if}
+        <span class="btn-text">
+            <slot />
+        </span>
+    </a>
+{:else}
+    <button {...props} {style} {disabled} class={classNames} on:click>
+        {#if iconSlot}
+            <span style="--bg-color: {iconBgColor(color)}" class="icon">
+                <slot name="icon" />
+            </span>
+        {/if}
+        <span class="btn-text">
+            <slot />
+        </span>
+    </button>
+{/if}
diff --git a/package.json b/package.json
index e8c522b..39f6b33 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
         "build:storybook": "build-storybook",
         "lint": "eslint --ext .js,.svelte,.html --ignore-path .gitignore .",
         "lint:fix": "yarn lint --fix",
-        "format": "prettier --write  **/**/*.{svelte,js} **/*.{svelte,js}  --ignore-path .gitignore"
+        "format": "prettier --write  **/**/*.{svelte,js,scss} **/*.{svelte,js,scss} *.{svelte,js,scss}  --ignore-path .gitignore"
     },
     "files": [
         "src",
diff --git a/styles/_mixins.scss b/styles/_mixins.scss
index e69de29..c43b782 100644
--- a/styles/_mixins.scss
+++ b/styles/_mixins.scss
@@ -0,0 +1,27 @@
+@mixin btn {
+    background: none;
+    border: none;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    border-radius: 3px;
+    padding: 0.625rem 0.75rem;
+    color: white;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    text-align: center;
+    position: relative;
+    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    @include center-horizontally();
+}
+@mixin center-horizontally {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/styles/_variables.scss b/styles/_variables.scss
index e69de29..0ea9a4c 100644
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -0,0 +1,21 @@
+$primary: #2979ff;
+$success: #43a047;
+$danger: #f44336;
+$warning: #ff9800;
+$white: #ffffff;
+
+$primary-hover: #0069d9;
+$primary-hover-border-color: #0062cc;
+
+$success-hover: #218838;
+$success-hover-border-color: #1e7e34;
+
+$warning-hover: #fda624;
+$warning-hover-border-color: #f6bd13;
+
+$danger-hover: #df2b1e;
+$danger-hover-border-color: #ec554a;
+
+$primary-text: #526576;
+
+$focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
diff --git a/utils.js b/utils.js
new file mode 100644
index 0000000..8473310
--- /dev/null
+++ b/utils.js
@@ -0,0 +1,9 @@
+export function getProps($$props) {
+    const props = {}
+    Object.keys($$props).map(prop => {
+        if (prop !== 'children' && prop !== '$$scope' && prop !== '$$slots') {
+            props[prop] = $$props[prop]
+        }
+    })
+    return props
+}