1 files changed, 13 insertions, 1 deletions
diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/button-group/button-group.component.js
index f99f710ce..17a281030 100644
--- a/ui/app/components/button-group/button-group.component.js
+++ b/ui/app/components/button-group/button-group.component.js
@@ -5,18 +5,30 @@ import classnames from 'classnames'
 export default class ButtonGroup extends PureComponent {
   static propTypes = {
     defaultActiveButtonIndex: PropTypes.number,
+    noButtonActiveByDefault: PropTypes.bool,
     disabled: PropTypes.bool,
     children: PropTypes.array,
     className: PropTypes.string,
     style: PropTypes.object,
+    newActiveButtonIndex: PropTypes.number,
   }
 
   static defaultProps = {
     className: 'button-group',
+    defaultActiveButtonIndex: 0,
   }
 
   state = {
-    activeButtonIndex: this.props.defaultActiveButtonIndex || 0,
+    activeButtonIndex: this.props.noButtonActiveByDefault
+      ? null
+      : this.props.defaultActiveButtonIndex,
+  }
+
+  componentDidUpdate (_, prevState) {
+    // Provides an API for dynamically updating the activeButtonIndex
+    if (typeof this.props.newActiveButtonIndex === 'number' && prevState.activeButtonIndex !== this.props.newActiveButtonIndex) {
+      this.setState({ activeButtonIndex: this.props.newActiveButtonIndex })
+    }
   }
 
   handleButtonClick (activeButtonIndex) {