diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index d253f22c15..978061ac5f 100644
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@@ -15,7 +15,8 @@ export class ButtonComponent extends Component {
         badgeClassName: null,
         tooltip: null,
         tooltipOptions: null,
-        forwardRef: null
+        forwardRef: null,
+        loading: false
     }
 
     static propTypes = {
@@ -26,7 +27,8 @@ export class ButtonComponent extends Component {
         badgeClassName: PropTypes.string,
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
-        forwardRef: PropTypes.any
+        forwardRef: PropTypes.any,
+        loading: PropTypes.bool
     };
 
     getElementRef(el) {
@@ -109,6 +111,23 @@ export class ButtonComponent extends Component {
         return null;
     }
 
+    renderLoading() {
+        if (this.props.loading) {
+            let className = classNames('pi pi-spin pi-spinner', 'p-c', {
+                'p-button-icon-left': this.props.iconPos === 'left' && this.props.label,
+                'p-button-icon-right': this.props.iconPos === 'right' && this.props.label,
+                'p-button-icon-top': this.props.iconPos === 'top' && this.props.label,
+                'p-button-icon-bottom': this.props.iconPos === 'bottom' && this.props.label
+            });
+
+            return (
+                <span className={className}></span>
+            );
+        }
+
+        return null;
+    }
+
     render() {
         let className = classNames('p-button p-component', this.props.className, {
             'p-button-icon-only': this.props.icon && !this.props.label,
@@ -118,11 +137,13 @@ export class ButtonComponent extends Component {
         let icon = this.renderIcon();
         let label = this.renderLabel();
         let badge = this.renderBadge();
+        let loading = this.renderLoading();
 
         let buttonProps = ObjectUtils.findDiffKeys(this.props, ButtonComponent.defaultProps);
 
         return (
             <button ref={(el) => this.getElementRef(el)} {...buttonProps} className={className}>
+                {loading}
                 {icon}
                 {label}
                 {this.props.children}
diff --git a/src/showcase/button/ButtonDemo.js b/src/showcase/button/ButtonDemo.js
index fcabfff2c9..4d111447dc 100644
--- a/src/showcase/button/ButtonDemo.js
+++ b/src/showcase/button/ButtonDemo.js
@@ -7,6 +7,23 @@ import './ButtonDemo.scss';
 
 export class ButtonDemo extends Component {
 
+    constructor(props) {
+        super(props)
+        this.state = {
+            loading: false,
+            check: false,
+            disabled: false
+        }
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick() {
+        this.setState({ check: false, loading: true, disabled: true })
+        setTimeout(() => {
+            this.setState({ loading: false, check: true, disabled: false })
+        }, 2000)
+    }
+
     render() {
         return (
             <div>
@@ -30,6 +47,9 @@ export class ButtonDemo extends Component {
                         <Button label="Submit" icon="pi pi-check" />
                         <Button label="Submit" icon="pi pi-check" iconPos="right" />
 
+                        <h5>Loading</h5>
+                        <Button label="Submit" disabled={this.state.disabled} onClick={this.onClick} loading={this.state.loading} icon={this.state.check ? 'pi pi-check' : null} iconPos="right" />
+
                         <h5>Severities</h5>
                         <Button label="Primary" />
                         <Button label="Secondary" className="p-button-secondary" />
diff --git a/src/showcase/button/ButtonDoc.js b/src/showcase/button/ButtonDoc.js
index 017d4c64c6..1074fbc4b4 100644
--- a/src/showcase/button/ButtonDoc.js
+++ b/src/showcase/button/ButtonDoc.js
@@ -19,6 +19,24 @@ import './ButtonDemo.css';
 
 export class ButtonDemo extends Component {
 
+    constructor(props) {
+        super(props)
+        this.state = {
+            loading: false,
+            check: false,
+            disabled: false
+        }
+
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick = () => {
+        this.setState({ check: false, loading: true, disabled: true })
+        setTimeout(() => {
+            this.setState({ loading: false, check: true, disabled: false })
+        }, 2000)
+    }
+
     render() {
         return (
             <div className="button-demo">
@@ -33,6 +51,9 @@ export class ButtonDemo extends Component {
                     <Button label="Submit" icon="pi pi-check" />
                     <Button label="Submit" icon="pi pi-check" iconPos="right" />
 
+                    <h5>Loading</h5>
+                    <Button label="Submit" disabled={this.state.disabled} onClick={this.onClick} loading={this.state.loading} icon={this.state.check ? 'pi pi-check' : null} iconPos="right" />
+
                     <h5>Severities</h5>
                     <Button label="Primary" />
                     <Button label="Secondary" className="p-button-secondary" />
@@ -144,11 +165,28 @@ export class ButtonDemo extends Component {
             'hooks': {
                 tabName: 'Hooks Source',
                 content: `
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from 'primereact/button';
 import './ButtonDemo.css';
 
 const ButtonDemo = () => {
+
+    const [loading, setLoading] = useState(false);
+    const [check, setCheck] = useState(false);
+    const [disabled, setDisabled] = useState(false);
+
+    const onClick = () => {
+        setLoading(true);
+        setCheck(false);
+        setDisabled(true);
+
+        setTimeout(() => {
+            setLoading(false);
+            setCheck(true);
+            setDisabled(false);
+        }, 2000)
+    }
+
     return (
         <div className="button-demo">
             <div className="card">
@@ -162,6 +200,10 @@ const ButtonDemo = () => {
                 <Button label="Submit" icon="pi pi-check" />
                 <Button label="Submit" icon="pi pi-check" iconPos="right" />
 
+
+                <h5>Loading</h5>
+                <Button label="Submit" disabled={disabled} onClick={onClick} loading={loading} icon={check ? 'pi pi-check' : null} iconPos="right" />
+
                 <h5>Severities</h5>
                 <Button label="Primary" />
                 <Button label="Secondary" className="p-button-secondary" />
@@ -272,12 +314,28 @@ const ButtonDemo = () => {
             'ts': {
                 tabName: 'TS Source',
                 content: `
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from 'primereact/button';
 import './ButtonDemo.css';
 
 const ButtonDemo = () => {
 
+    const [loading, setLoading] = useState(false);
+    const [check, setCheck] = useState(false);
+    const [disabled, setDisabled] = useState(false);
+
+    const onClick = () => {
+        setLoading(true);
+        setCheck(false);
+        setDisabled(true);
+
+        setTimeout(() => {
+            setLoading(false);
+            setCheck(true);
+            setDisabled(false);
+        }, 2000)
+    }
+
     return (
         <div className="button-demo">
             <div className="card">
@@ -291,6 +349,9 @@ const ButtonDemo = () => {
                 <Button label="Submit" icon="pi pi-check" />
                 <Button label="Submit" icon="pi pi-check" iconPos="right" />
 
+                <h5>Loading</h5>
+                <Button label="Submit" disabled={disabled} onClick={onClick} loading={loading} icon={check ? 'pi pi-check' : null} iconPos="right" />
+
                 <h5>Severities</h5>
                 <Button label="Primary" />
                 <Button label="Secondary" className="p-button-secondary" />
@@ -482,6 +543,14 @@ import { Button } from 'primereact/button';
 <Button label="Click" icon="pi pi-check" iconPos="right" />
 <Button icon="pi pi-check" iconPos="right" />
 `}
+</CodeHighlight>
+                        <h5>Loading</h5>
+                        <p>Loading on a button is specified with <i>loading</i> property and position is configured using <i>iconPos</i> attribute. Default
+                        loading position is "left" and alternative is "right". To display only a loading, leave label as undefined.</p>
+<CodeHighlight>
+{`
+<Button label="Submit" loading iconPos="right" />
+`}
 </CodeHighlight>
 
                         <h5>Events</h5>