diff --git a/.bitmap b/.bitmap
index 3ab6e70..7b43e11 100644
--- a/.bitmap
+++ b/.bitmap
@@ -1,27 +1,27 @@
 /* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
 
 {
-    "guya-ltd.gcss/atoms/button@0.0.1": {
+    "guya-ltd.gcss/atoms/button@0.0.7": {
         "files": [
             {
+                "name": "Button.js",
                 "relativePath": "src/components/atoms/Button/Button.js",
-                "test": false,
-                "name": "Button.js"
+                "test": false
             },
             {
+                "name": "ButtonLink.js",
                 "relativePath": "src/components/atoms/Button/_Link/ButtonLink.js",
-                "test": false,
-                "name": "ButtonLink.js"
+                "test": false
             },
             {
+                "name": "ButtonIcon.js",
                 "relativePath": "src/components/atoms/Button/__Icon/ButtonIcon.js",
-                "test": false,
-                "name": "ButtonIcon.js"
+                "test": false
             },
             {
+                "name": "index.js",
                 "relativePath": "src/components/atoms/Button/index.js",
-                "test": false,
-                "name": "index.js"
+                "test": false
             }
         ],
         "mainFile": "src/components/atoms/Button/index.js",
diff --git a/src/components/atoms/Button/Button.js b/src/components/atoms/Button/Button.js
index 42b7aba..55640ee 100644
--- a/src/components/atoms/Button/Button.js
+++ b/src/components/atoms/Button/Button.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNaming } from '@bem-react/classname'
+import { withNaming } from '@bem-react/classname';
+import { classnames } from '@bem-react/classnames';
 
 import ButtonLink from './_Link/ButtonLink';
 import ButtonIcon from './__Icon/ButtonIcon';
@@ -24,7 +25,7 @@ import ButtonIcon from './__Icon/ButtonIcon';
 class Button extends Component {
     render() {
         /* Props */
-        const {bsPrefix, children, size, type, href, icon} = this.props;
+        const {bsPrefix, children, size, type, href, icon, theme, variant, block, onClick} = this.props;
 
         /* Class name generator */
         const cn = withNaming({ e: '__', m: '', v: '--' })
@@ -32,11 +33,25 @@ class Button extends Component {
         /* Set base classname */
         let classname = cn(bsPrefix)
 
+        /* Theme name */
+        const themeName = theme ? 'theme-' + theme : null
+
+        /* Block name */
+        const blockName = block ? 'block' : null;
+
+        /* Classnames */
+        const classnametext = classnames(
+            classname({'': size}),
+            classname({'': variant}),
+            classname({'': blockName}),
+            themeName
+        );
+
         if(href && type === 'link')
-            return <ButtonLink cn={classname} children={children} href={href} />
+            return <ButtonLink cn={classname} size={size} variant={variant}  theme={themeName} children={children} href={href} />
         else
             return (
-                <button type={type} className={classname({'': size})}>
+                <button type={type} className={classnametext} onClick={onClick}>
                     {!!(icon)? <ButtonIcon cn={classname} icon={icon} /> : null}
                     {children}
                 </button>
@@ -80,7 +95,26 @@ Button.propTypes = {
      * @property {node}
      * @default null
      */
-    icon: PropTypes.node
+    icon: PropTypes.node,
+    /**
+     * @description Theme.
+     * @enum {('theme-red'|'theme-royal-blue')}
+     * @default null
+     */
+    theme: PropTypes.oneOf(['theme-red', 'theme-royal-blue']),
+    /**
+     * @description Variant colors.
+     * @enum {('primary'|'success'|'warning'|'danger')}
+     * @default null
+     */
+    variant: PropTypes.oneOf(['primary', 'success', 'warning', 'danger']),
+    block: PropTypes.bool,
+    /**
+     * @description On click function
+     * @property {element}
+     * @default null
+     */
+    onClick: PropTypes.element,
 }
 
 Button.defaultProps = {
@@ -90,6 +124,7 @@ Button.defaultProps = {
     type: 'button',
     href: null,
     icon: null,
+    theme: null,
 }
 
 /**
diff --git a/src/components/atoms/Button/_Link/ButtonLink.js b/src/components/atoms/Button/_Link/ButtonLink.js
index 3253842..0d0e199 100644
--- a/src/components/atoms/Button/_Link/ButtonLink.js
+++ b/src/components/atoms/Button/_Link/ButtonLink.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { classnames } from '@bem-react/classnames';
 
 /**
  * A Button Link component represents an object or entity.
@@ -16,9 +17,15 @@ import React from 'react';
  * @example 
  */
 
-const ButtonLink = ({cn, href, children}) => {
+const ButtonLink = ({cn, theme, href, children, size, variant}) => {
     /* Class names collection */
-    const classname = cn({'': 'link'})
+    const classname = classnames(
+        cn({'': 'link'}),
+        cn({'': size}),
+        cn({'': variant}),
+        theme
+    )
+    
 
     return <a href={href} className={classname}>{children}</a>
 }