code · pull · May 7, 2026 · May 6, 2026
diff --git a/...pp/channels/src/components/admin_console/access_control/policy_details/policy_details.tsx b/...pp/channels/src/components/admin_console/access_control/policy_details/policy_details.tsx
@@ -6,6 +6,7 @@ import React, {useState, useEffect, useMemo} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import {GenericModal} from '@mattermost/components';
+import {buttonClassNames} from '@mattermost/shared/components/button';
 import type {AccessControlPolicy, AccessControlPolicyActiveUpdate, AccessControlPolicyRule} from '@mattermost/types/access_control';
 import {getMembershipRule, buildRulesWithMembership} from '@mattermost/types/access_control';
 import type {ChannelSearchOpts, ChannelWithTeamData} from '@mattermost/types/channels';
@@ -705,7 +706,7 @@ function PolicyDetails({
                     }
                 />
                 <BlockableLink
-                    className='btn btn-quaternary'
+                    className={buttonClassNames({emphasis: 'quaternary'})}
                     to='/admin_console/system_attributes/membership_policies'
                 >
                     <FormattedMessage

diff --git a/...annels/src/components/admin_console/billing/billing_subscriptions/cancel_subscription.tsx b/...annels/src/components/admin_console/billing/billing_subscriptions/cancel_subscription.tsx
@@ -4,6 +4,8 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {buttonClassNames} from '@mattermost/shared/components/button';
+
 import {useOpenCloudZendeskSupportForm} from 'components/common/hooks/useOpenZendeskForm';
 import ExternalLink from 'components/external_link';
 
@@ -29,7 +31,7 @@ const CancelSubscription = () => {
                 <ExternalLink
                     location='cancel_subscription'
                     href={contactSupportURL}
-                    className='btn btn-secondary btn-sm btn-danger cancelSubscriptionSection__contactUs'
+                    className={buttonClassNames({emphasis: 'secondary', size: 'sm', variant: 'destructive'}, 'cancelSubscriptionSection__contactUs')}
                 >
                     <FormattedMessage
                         id='admin.billing.subscription.cancelSubscriptionSection.contactUs'

diff --git a/...hannels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx b/...hannels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button, buttonClassNames} from '@mattermost/shared/components/button';
 
 import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink';
 import CloudTrialSvg from 'components/common/svg_images_components/cloud_trial_svg';
@@ -143,7 +143,7 @@ const ContactSalesCard = (props: Props) => {
                     <ExternalLink
                         location='contact_sales_card'
                         href={contactSalesLink}
-                        className='btn btn-tertiary PrivateCloudCard__actionButton'
+                        className={buttonClassNames({emphasis: 'tertiary'}, 'PrivateCloudCard__actionButton')}
                     >
                         <FormattedMessage
                             id='admin.billing.subscription.privateCloudCard.contactSales'

diff --git a/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx b/webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx
@@ -6,6 +6,7 @@ import {FormattedDate, FormattedMessage, FormattedNumber, defineMessages} from '
 import {useDispatch} from 'react-redux';
 
 import {CheckCircleOutlineIcon} from '@mattermost/compass-icons/components';
+import {buttonClassNames} from '@mattermost/shared/components/button';
 import {WithTooltip} from '@mattermost/shared/components/tooltip';
 import type {Invoice, InvoiceLineItem, Product} from '@mattermost/types/cloud';
 
@@ -54,7 +55,7 @@ export const noBillingHistory = (
         <ExternalLink
             location='billing_summary'
             href={CloudLinks.BILLING_DOCS}
-            className='btn btn-primary BillingSummary__noBillingHistory-link'
+            className={buttonClassNames({emphasis: 'primary'}, 'BillingSummary__noBillingHistory-link')}
         >
             <FormattedMessage
                 id='admin.billing.subscriptions.billing_summary.noBillingHistory.link'
@@ -117,7 +118,7 @@ export const FreeTrial = ({daysLeftOnTrial}: FreeTrialProps) => {
             <button
                 type='button'
                 onClick={() => openSalesLink()}
-                className='UpgradeMattermostCloud__upgradeButton btn btn-primary'
+                className={buttonClassNames({emphasis: 'primary'}, 'UpgradeMattermostCloud__upgradeButton')}
             >
                 <FormattedMessage
                     id='admin.billing.subscription.privateCloudCard.contactSales'
@@ -338,7 +339,7 @@ export const InvoiceInfo = ({invoice, product, fullCharges, partialCharges, hasM
             <div className='BillingSummary__lastInvoice-download'>
                 <button
                     onClick={openInvoicePreview}
-                    className='BillingSummary__lastInvoice-downloadButton btn btn-primary'
+                    className={buttonClassNames({emphasis: 'primary'}, 'BillingSummary__lastInvoice-downloadButton')}
                 >
                     <i className='icon icon-file-pdf-outline'/>
                     <FormattedMessage

diff --git a/webapp/channels/src/components/admin_console/billing/company_info_display.tsx b/webapp/channels/src/components/admin_console/billing/company_info_display.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useSelector} from 'react-redux';
 
+import {buttonClassNames} from '@mattermost/shared/components/button';
+
 import BlockableLink from 'components/admin_console/blockable_link';
 import CompanySvg from 'components/common/svg_images_components/company_svg';
 
@@ -16,7 +18,7 @@ const addInfoButton = (
     <div className='CompanyInfoDisplay__addInfo'>
         <BlockableLink
             to='/admin_console/billing/company_info_edit'
-            className='btn btn-primary CompanyInfoDisplay__addInfoButton'
+            className={buttonClassNames({emphasis: 'primary'}, 'CompanyInfoDisplay__addInfoButton')}
         >
             <i className='icon icon-plus'/>
             <FormattedMessage
@@ -41,7 +43,7 @@ const noCompanyInfoSection = (
         </div>
         <BlockableLink
             to='/admin_console/billing/company_info_edit'
-            className='btn btn-primary CompanyInfoDisplay__noCompanyInfo-link'
+            className={buttonClassNames({emphasis: 'primary'}, 'CompanyInfoDisplay__noCompanyInfo-link')}
         >
             <FormattedMessage
                 id='admin.billing.company_info.add'

diff --git a/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx b/webapp/channels/src/components/admin_console/billing/company_info_edit.tsx
@@ -7,6 +7,8 @@ import {defineMessage, FormattedMessage} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import {useHistory} from 'react-router-dom';
 
+import {buttonClassNames} from '@mattermost/shared/components/button';
+
 import {getCloudCustomer, updateCloudCustomer, updateCloudCustomerAddress} from 'mattermost-redux/actions/cloud';
 
 import {setNavigationBlocked} from 'actions/admin_actions.jsx';
@@ -284,7 +286,7 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                     )}
                 />
                 <BlockableLink
-                    className='btn btn-tertiary'
+                    className={buttonClassNames({emphasis: 'tertiary'})}
                     to='/admin_console/billing/company_info'
                 >
                     <FormattedMessage

diff --git a/...s/src/components/admin_console/classification_markings/classification_markings_styled.tsx b/...s/src/components/admin_console/classification_markings/classification_markings_styled.tsx
@@ -3,6 +3,8 @@
 
 import styled from 'styled-components';
 
+import {Button} from '@mattermost/shared/components/button';
+
 import {SectionContent} from '../system_properties/controls';
 
 export const InformationNoticeWrapper = styled.div`
@@ -71,9 +73,9 @@ export const AddLevelButtonRow = styled.div`
     margin-left: 16px;
 `;
 
-export const AddLevelButton = styled.button.attrs({
+export const AddLevelButton = styled(Button).attrs({
     type: 'button',
-    className: 'btn btn-tertiary',
+    emphasis: 'tertiary',
 })`
     && {
         padding-inline: 16px;

diff --git a/...omponents/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx b/...omponents/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import {defineMessages, FormattedMessage} from 'react-intl';
 
+import {buttonClassNames} from '@mattermost/shared/components/button';
 import type {ChannelWithTeamData} from '@mattermost/types/channels';
 import type {
     DataRetentionCustomPolicy,
@@ -535,7 +536,7 @@ export default class CustomPolicyForm extends React.PureComponent<Props, State>
                         )}
                     />
                     <BlockableLink
-                        className='btn btn-tertiary'
+                        className={buttonClassNames({emphasis: 'tertiary'})}
                         to='/admin_console/compliance/data_retention_settings'
                     >
                         <FormattedMessage

diff --git a/...omponents/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx b/...omponents/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import {defineMessages, FormattedMessage} from 'react-intl';
 
+import {buttonClassNames} from '@mattermost/shared/components/button';
 import type {AdminConfig, EnvironmentConfig} from '@mattermost/types/config';
 import type {DeepPartial} from '@mattermost/types/utilities';
 
@@ -273,7 +274,7 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
                         )}
                     />
                     <BlockableLink
-                        className='btn btn-tertiary'
+                        className={buttonClassNames({emphasis: 'tertiary'})}
                         to='/admin_console/compliance/data_retention_settings'
                     >
                         <FormattedMessage

diff --git a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import type {MessageDescriptor} from 'react-intl';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button, buttonClassNames} from '@mattermost/shared/components/button';
 import type {AnalyticsState} from '@mattermost/types/admin';
 import type {CloudCustomer} from '@mattermost/types/cloud';
 import type {ClientLicense} from '@mattermost/types/config';
@@ -106,7 +106,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
                 </Button>
                 <ExternalLink
                     location='feature_discovery'
-                    className='btn btn-tertiary btn-lg'
+                    className={buttonClassNames({emphasis: 'tertiary', size: 'lg'})}
                     href={learnMoreURL}
                     data-testid='featureDiscovery_secondaryCallToAction'
                 >
@@ -126,10 +126,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
 
         // by default we assume is not cloud, so the cta button is Start Trial (which will request a trial license)
         let ctaPrimaryButton = (
-            <StartTrialBtn
-                btnClass='btn btn-primary'
-                renderAsButton={true}
-            />
+            <StartTrialBtn renderAsButton={true}/>
         );
 
         if (isCloud) {
@@ -155,7 +152,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
                 {ctaPrimaryButton}
                 <ExternalLink
                     location='feature_discovery'
-                    className='btn btn-secondary'
+                    className={buttonClassNames({emphasis: 'secondary'})}
                     href={learnMoreURL}
                     data-testid='featureDiscovery_secondaryCallToAction'
                 >

diff --git a/...s/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx b/...s/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button, buttonClassNames} from '@mattermost/shared/components/button';
 
 import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg';
 import ExternalLink from 'components/external_link';
@@ -64,7 +64,7 @@ const TeamEditionRightPanel: React.FC<TeamEditionRightPanelProps> = ({
                     <ExternalLink
                         href={LicenseLinks.UNSUPPORTED_UPGRADE_LINK}
                         location='team_edition_right_panel'
-                        className='btn btn-tertiary'
+                        className={buttonClassNames({emphasis: 'tertiary'})}
                         role='button'
                     >
                         <FormattedMessage

diff --git a/...components/admin_console/permission_policies/policy_details/permission_policy_details.tsx b/...components/admin_console/permission_policies/policy_details/permission_policy_details.tsx
@@ -6,6 +6,7 @@ import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
 import type {MessageDescriptor} from 'react-intl';
 
 import {GenericModal} from '@mattermost/components';
+import {buttonClassNames} from '@mattermost/shared/components/button';
 import type {AccessControlPolicy, AccessControlPolicyRule} from '@mattermost/types/access_control';
 import type {AccessControlSettings} from '@mattermost/types/config';
 import type {UserPropertyField} from '@mattermost/types/properties';
@@ -741,7 +742,7 @@ function PermissionPolicyDetails({
                             }
                         />
                         <BlockableLink
-                            className='btn btn-quaternary'
+                            className={buttonClassNames({emphasis: 'quaternary'})}
                             to='/admin_console/system_attributes/permission_policies'
                         >
                             <FormattedMessage

diff --git a/..._schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx b/..._schemes_settings/permission_system_scheme_settings/permission_system_scheme_settings.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import type {WrappedComponentProps} from 'react-intl';
 import {FormattedMessage, defineMessage, injectIntl} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button, buttonClassNames} from '@mattermost/shared/components/button';
 import type {ClientConfig, ClientLicense} from '@mattermost/types/config';
 import type {Role} from '@mattermost/types/roles';
 
@@ -537,7 +537,7 @@ export class PermissionSystemSchemeSettings extends React.PureComponent<Props, S
                         savingMessage={this.props.intl.formatMessage({id: 'admin.saving', defaultMessage: 'Saving Config...'})}
                     />
                     <BlockableLink
-                        className='btn btn-tertiary'
+                        className={buttonClassNames({emphasis: 'tertiary'})}
                         to='/admin_console/user_management/permissions'
                         data-testid='permission-scheme-cancel-button'
                     >

diff --git a/...sion_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx b/...sion_schemes_settings/permission_team_scheme_settings/permission_team_scheme_settings.tsx
@@ -6,6 +6,7 @@ import {defineMessage, FormattedMessage} from 'react-intl';
 import type {WrappedComponentProps} from 'react-intl';
 import type {RouteComponentProps} from 'react-router-dom';
 
+import {buttonClassNames} from '@mattermost/shared/components/button';
 import type {ClientConfig, ClientLicense} from '@mattermost/types/config';
 import type {Role} from '@mattermost/types/roles';
 import type {Scheme, SchemePatch} from '@mattermost/types/schemes';
@@ -815,7 +816,7 @@ export default class PermissionTeamSchemeSettings extends React.PureComponent<Pr
                         }
                     />
                     <BlockableLink
-                        className='btn btn-tertiary'
+                        className={buttonClassNames({emphasis: 'tertiary'})}
                         to='/admin_console/user_management/permissions'
                         data-testid='permission-scheme-cancel-button'
                     >

diff --git a/webapp/channels/src/components/admin_console/save_changes_panel.tsx b/webapp/channels/src/components/admin_console/save_changes_panel.tsx
@@ -4,6 +4,8 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
+import {buttonClassNames} from '@mattermost/shared/components/button';
+
 import BlockableButton from 'components/admin_console/blockable_button';
 import BlockableLink from 'components/admin_console/blockable_link';
 import SaveButton from 'components/save_button';
@@ -34,7 +36,7 @@ const SaveChangesPanel = ({saveNeeded, onClick, saving, serverError, cancelLink,
             {cancelLink ? (
                 <BlockableLink
                     id='cancelButtonSettings'
-                    className='btn btn-quaternary'
+                    className={buttonClassNames({emphasis: 'quaternary'})}
                     to={cancelLink}
                 >
                     <FormattedMessage
@@ -45,7 +47,7 @@ const SaveChangesPanel = ({saveNeeded, onClick, saving, serverError, cancelLink,
             ) : onCancel && (
                 <BlockableButton
                     id='cancelButtonSettings'
-                    className='btn btn-quaternary'
+                    className={buttonClassNames({emphasis: 'quaternary'})}
                     onCancelConfirmed={onCancel}
                 >
                     <FormattedMessage

diff --git a/webapp/channels/src/components/admin_console/secure_connections/secure_connection_row.tsx b/webapp/channels/src/components/admin_console/secure_connections/secure_connection_row.tsx
@@ -1,13 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import classNames from 'classnames';
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {Link, useHistory} from 'react-router-dom';
 import styled from 'styled-components';
 
 import {DotsHorizontalIcon, CodeTagsIcon, PencilOutlineIcon, TrashCanOutlineIcon} from '@mattermost/compass-icons/components';
+import {buttonClassNames} from '@mattermost/shared/components/button';
 import type {RemoteCluster} from '@mattermost/types/remote_clusters';
 
 import * as Menu from 'components/menu';
@@ -65,7 +65,7 @@ const RowMenu = ({remoteCluster: rc, onDeleteSuccess, disabled}: Props) => {
         <Menu.Container
             menuButton={{
                 id: `${menuId}-button-${rc.remote_id}`,
-                class: classNames('btn btn-tertiary btn-sm connection-row-menu-button', {disabled}),
+                class: buttonClassNames({emphasis: 'tertiary', size: 'sm'}, 'connection-row-menu-button', {disabled}),
                 disabled,
                 children: !disabled && <DotsHorizontalIcon size={16}/>,
                 'aria-label': formatMessage({id: 'admin.secure_connection_row.menu-button.aria_label', defaultMessage: 'Connection options for {connection}'}, {connection: rc.display_name}),

diff --git a/webapp/channels/src/components/admin_console/secure_connections/secure_connections.tsx b/webapp/channels/src/components/admin_console/secure_connections/secure_connections.tsx
@@ -1,12 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import classNames from 'classnames';
 import type {ReactNode} from 'react';
 import React from 'react';
 import {useIntl, FormattedMessage, defineMessages} from 'react-intl';
 import {useHistory} from 'react-router-dom';
 
+import type {ButtonEmphasis} from '@mattermost/shared/components/button';
+import {buttonClassNames} from '@mattermost/shared/components/button';
+
 import LoadingScreen from 'components/loading_screen';
 import * as Menu from 'components/menu';
 import SectionNotice from 'components/section_notice';
@@ -103,7 +105,7 @@ const Placeholder = ({disabled, serviceNotRunning}: {disabled: boolean; serviceN
                     />
                 </hgroup>
                 <AddMenu
-                    buttonClassNames='btn-tertiary'
+                    buttonEmphasis='tertiary'
                     disabled={disabled}
                 />
             </PlaceholderContainer>
@@ -113,7 +115,7 @@ const Placeholder = ({disabled, serviceNotRunning}: {disabled: boolean; serviceN
 
 const menuId = 'secure_connections_add_menu';
 
-const AddMenu = ({buttonClassNames, disabled}: {buttonClassNames?: string; disabled: boolean}) => {
+const AddMenu = ({buttonEmphasis = 'primary', disabled}: {buttonEmphasis?: ButtonEmphasis; disabled: boolean}) => {
     const {formatMessage} = useIntl();
     const history = useHistory();
     const {promptAcceptInvite} = useRemoteClusterAcceptInvite();
@@ -133,7 +135,7 @@ const AddMenu = ({buttonClassNames, disabled}: {buttonClassNames?: string; disab
         <Menu.Container
             menuButton={{
                 id: `${menuId}-button`,
-                class: classNames('btn', buttonClassNames ?? 'btn-primary', {disabled}),
+                class: buttonClassNames({emphasis: buttonEmphasis}, {disabled}),
                 disabled,
                 children: (
                     <>