diff --git a/public/pages/Channels/components/details/ChannelDetails.tsx b/public/pages/Channels/components/details/ChannelDetails.tsx
index 26a98565..233f50f1 100644
--- a/public/pages/Channels/components/details/ChannelDetails.tsx
+++ b/public/pages/Channels/components/details/ChannelDetails.tsx
@@ -32,6 +32,7 @@ import { ChannelDetailItems } from './ChannelDetailItems';
 import { ChannelDetailsActions } from './ChannelDetailsActions';
 import { ChannelSettingsDetails } from './ChannelSettingsDetails';
 import PageHeader from "../../../../components/PageHeader/PageHeader";
+import { TopNavControlButtonData } from '../../../../../../../src/plugins/navigation/public';
 
 interface ChannelDetailsProps extends RouteComponentProps<{
   id: string
@@ -190,19 +191,12 @@ export function ChannelDetails(props: ChannelDetailsProps) {
       ),
     },
     {
-      renderComponent: (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <EuiSmallButton
-            data-test-subj="send-test-message-button"
-            onClick={sendTestMessage}
-            style={{ marginLeft: '10px' }}
-            disabled={!channel?.is_enabled}
-          >
-            Send test message
-          </EuiSmallButton>
-        </div>
-      ),
-    },
+      controlType: 'button',
+      testId: 'send-test-message-button',
+      isDisabled: !channel?.is_enabled,
+      run: sendTestMessage,
+      label: 'Send test message',
+    } as TopNavControlButtonData,
   ];
 
   const badgeComponent = <EuiFlexItem grow={false} style={{ paddingBottom: 5 }}>