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 = (