diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb2f6888d83..05f13f118a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
- Added `EuiDescribedFormGroup` component, a wrapper around `EuiFormRow`(s) ([#707](https://github.com/elastic/eui/pull/707))
- Added `describedByIds` prop to `EuiFormRow` to help with accessibility ([#707](https://github.com/elastic/eui/pull/707))
+- Added `isLoading` prop to `EuiButtonEmpty` ([#768](https://github.com/elastic/eui/pull/768))
## [`0.0.45`](https://github.com/elastic/eui/tree/v0.0.45)
diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js
index 84d45f6c1ff..f1bc6818cea 100644
--- a/src-docs/src/views/button/button_empty.js
+++ b/src-docs/src/views/button/button_empty.js
@@ -266,6 +266,27 @@ export default () => (
+
+
+ window.alert('Button clicked')}
+ isLoading
+ >
+ Loading
+
+
+
+
+ window.alert('Button clicked')}
+ isLoading
+ iconSide="right"
+ >
+ Loading
+
+
+
+
{
+ // If in the loading state, force disabled to true
+ isDisabled = isLoading ? true : isDisabled;
+
const classes = classNames(
'euiButtonEmpty',
colorToClassNameMap[color],
@@ -70,7 +78,14 @@ export const EuiButtonEmpty = ({
// Add an icon to the button if one exists.
let buttonIcon;
- if (iconType) {
+ if (isLoading) {
+ buttonIcon = (
+
+ );
+ } else if (iconType) {
buttonIcon = (