diff --git a/components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx b/components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx
index c894ee5d2eed..aced378f6839 100644
--- a/components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx
+++ b/components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx
@@ -164,7 +164,7 @@ export default class UserLimitAnnouncementBar extends React.PureComponent<Props>
                 type={dismissable ? AnnouncementBarTypes.ADVISOR : AnnouncementBarTypes.CRITICAL_LIGHT}
                 showCloseButton={dismissable}
                 handleClose={this.handleClose}
-                showModal={this.showModal}
+                onButtonClick={this.showModal}
                 modalButtonText={t('admin.billing.subscription.upgradeMattermostCloud.upgradeButton')}
                 modalButtonDefaultText={'Upgrade Mattermost Cloud'}
                 message={dismissable ? t('upgrade.cloud_banner_reached') : t('upgrade.cloud_banner_over')}
diff --git a/components/announcement_bar/default_announcement_bar/announcement_bar.tsx b/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
index 0c8e88b110dc..5f1ea279e2ee 100644
--- a/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
+++ b/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
@@ -27,8 +27,9 @@ type Props = {
     type: string;
     message: React.ReactNode;
     handleClose?: (e?: any) => void;
+    showModal?: boolean;
     announcementBarCount?: number;
-    showModal?: (() => void) | boolean;
+    onButtonClick?: () => void;
     modalButtonText?: string;
     modalButtonDefaultText?: string;
     showLinkAsButton: boolean;
@@ -178,6 +179,7 @@ export default class AnnouncementBar extends React.PureComponent<Props> {
                             this.props.showLinkAsButton &&
                             <button
                                 className='upgrade-button'
+                                onClick={this.props.onButtonClick}
                             >
                                 <FormattedMessage
                                     id={this.props.modalButtonText}
diff --git a/components/announcement_bar/payment_announcement_bar/payment_announcement_bar.tsx b/components/announcement_bar/payment_announcement_bar/payment_announcement_bar.tsx
index 5dfa65d3b4a8..a4cc071ef602 100644
--- a/components/announcement_bar/payment_announcement_bar/payment_announcement_bar.tsx
+++ b/components/announcement_bar/payment_announcement_bar/payment_announcement_bar.tsx
@@ -83,7 +83,7 @@ export default class PaymentAnnouncementBar extends React.PureComponent<Props> {
             <AnnouncementBar
                 type={AnnouncementBarTypes.CRITICAL_LIGHT}
                 showCloseButton={false}
-                showModal={this.updatePaymentInfo}
+                onButtonClick={this.updatePaymentInfo}
                 modalButtonText={t('admin.billing.subscription.updatePaymentInfo')}
                 modalButtonDefaultText={'Update payment info'}
                 message={this.isMostRecentPaymentFailed() ? t('admin.billing.subscription.mostRecentPaymentFailed') : t('admin.billing.subscription.creditCardExpired')}