Update dependency @vector-im/compound-web to v9.2.1 (#33270)

* Update dependency @vector-im/compound-web to v9.2.1

* Update button sizes

* More button size updates

* Another button size

* Button size

* Snapshot updates

* Snapshots

* More sm/md

* More button size updates

* snapshot

* and one more from merging develop

* More snapshots

* Phantom typing

* yep, more snapshots

* More snapshots

* More snapshots

* Last ones?

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>

apps/web/src/async-components/structures/ErrorView.tsx

@@ -192,11 +192,11 @@ export const UnsupportedBrowserView: React.FC<{
             </Text>
 
             <Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_flexContainer mx_ErrorView_buttons">
-                <Button Icon={PopOutIcon} kind="secondary" size="sm">
+                <Button Icon={PopOutIcon} kind="secondary" size="md">
                     {_t("incompatible_browser|learn_more")}
                 </Button>
                 {onAccept && (
-                    <Button kind="primary" size="sm" onClick={onAccept}>
+                    <Button kind="primary" size="md" onClick={onAccept}>
                         {_t("incompatible_browser|continue")}
                     </Button>
                 )}

apps/web/src/components/structures/auth/ForgotPassword.tsx

@@ -419,7 +419,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
                             </StyledCheckbox>
                         </div>
                         {this.state.errorText && <ErrorMessage message={this.state.errorText} />}
-                        <Button type="submit" className="mx_Login_submit" size="sm">
+                        <Button type="submit" className="mx_Login_submit" size="md">
                             {submitButtonChild}
                         </Button>
                     </fieldset>
@@ -434,7 +434,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
                 <CheckIcon className="mx_Icon mx_Icon_32 mx_Icon_accent" />
                 <h1>{_t("auth|reset_password|reset_successful")}</h1>
                 {this.state.logoutDevices ? <p>{_t("auth|reset_password|devices_logout_success")}</p> : null}
-                <Button className="mx_Login_submit" size="sm" type="button" onClick={this.props.onComplete}>
+                <Button className="mx_Login_submit" size="md" type="button" onClick={this.props.onComplete}>
                     {_t("auth|reset_password|return_to_login")}
                 </Button>
             </>

apps/web/src/components/structures/auth/Login.tsx

@@ -441,7 +441,7 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
             <Button
                 className="mx_Login_fullWidthButton"
                 kind="primary"
-                size="sm"
+                size="md"
                 onClick={async () => {
                     await startOidcLogin(
                         this.props.serverConfig.delegatedAuthentication!,

apps/web/src/components/structures/auth/Registration.tsx

@@ -550,7 +550,7 @@ export default class Registration extends React.Component<IProps, IState> {
                 <Button
                     className="mx_Login_fullWidthButton"
                     kind="primary"
-                    size="sm"
+                    size="md"
                     onClick={async () => {
                         await startOidcLogin(
                             this.props.serverConfig.delegatedAuthentication!,

apps/web/src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -55,7 +55,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
                 </div>
             </div>
             {errorText && <ErrorMessage message={errorText} />}
-            <Button onClick={onSubmitForm} type="button" className="mx_Login_submit" size="sm">
+            <Button onClick={onSubmitForm} type="button" className="mx_Login_submit" size="md">
                 {_t("action|next")}
             </Button>
             <div className="mx_AuthBody_did-not-receive">

apps/web/src/components/structures/auth/forgot-password/EnterEmail.tsx

@@ -75,7 +75,7 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
                         />
                     </div>
                     {errorText && <ErrorMessage message={errorText} />}
-                    <Button type="submit" className="mx_Login_submit" size="sm">
+                    <Button type="submit" className="mx_Login_submit" size="md">
                         {submitButtonChild}
                     </Button>
                     <div className="mx_AuthBody_button-container">

apps/web/src/components/views/auth/DefaultWelcome.tsx

@@ -32,14 +32,14 @@ const DefaultWelcome: React.FC = () => {
             {isElement && <Text size="md">{_t("welcome|tagline_element")}</Text>}
 
             <div className="mx_DefaultWelcome_buttons">
-                <Button as="a" href="#/login" kind="primary" size="sm">
+                <Button as="a" href="#/login" kind="primary" size="md">
                     {_t("action|sign_in")}
                 </Button>
-                <Button as="a" href="#/register" kind="secondary" size="sm">
+                <Button as="a" href="#/register" kind="secondary" size="md">
                     {_t("action|create_account")}
                 </Button>
                 {showGuestFunctions && (
-                    <Button as="a" href="#/directory" kind="tertiary" size="sm">
+                    <Button as="a" href="#/directory" kind="tertiary" size="md">
                         {_t("action|explore_rooms")}
                     </Button>
                 )}

apps/web/src/components/views/auth/PasswordLogin.tsx

@@ -434,7 +434,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                     />
                     {forgotPasswordJsx}
                     {!this.props.busy && (
-                        <Button className="mx_Login_submit" size="sm" type="submit" disabled={this.props.disableSubmit}>
+                        <Button className="mx_Login_submit" size="md" type="submit" disabled={this.props.disableSubmit}>
                             {_t("action|sign_in")}
                         </Button>
                     )}

apps/web/src/components/views/auth/RegistrationForm.tsx

@@ -549,7 +549,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
 
     public render(): ReactNode {
         const registerButton = (
-            <Button className="mx_Login_submit" size="sm" type="submit" disabled={!this.props.canSubmit}>
+            <Button className="mx_Login_submit" size="md" type="submit" disabled={!this.props.canSubmit}>
                 {_t("action|register")}
             </Button>
         );

apps/web/src/components/views/elements/BugReportDialogButton.tsx

@@ -34,7 +34,7 @@ export function BugReportDialogButton({
         return null;
     }
     return (
-        <Button kind="secondary" size="sm" onClick={onClick}>
+        <Button kind="secondary" size="md" onClick={onClick}>
             {bugReportUrl === BugReportEndpointURLLocal
                 ? _t("bug_reporting|download_logs")
                 : _t("bug_reporting|submit_debug_logs")}

apps/web/src/components/views/elements/SSOButtons.tsx

@@ -135,7 +135,7 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
     }
 
     return (
-        <Button {...commonProps} size="sm">
+        <Button {...commonProps} size="md">
             {icon}
             {label}
         </Button>

apps/web/src/components/views/right_panel/ExtensionsCard.tsx

@@ -191,7 +191,7 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
     return (
         <BaseCard header={_t("right_panel|extensions_button")} className="mx_ExtensionsCard" onClose={onClose}>
             {shouldShowComponent(UIComponent.AddIntegrations) && (
-                <Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
+                <Button size="md" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
                     {_t("right_panel|add_integrations")}
                 </Button>
             )}

apps/web/src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx

@@ -40,7 +40,7 @@ export const UserInfoHeaderVerificationView: React.FC<{
                 <Button
                     className="mx_UserInfo_verify_button"
                     kind="tertiary"
-                    size="sm"
+                    size="md"
                     onClick={() => vm.verifySelectedUser()}
                 >
                     {_t("user_info|verify_button")}

apps/web/src/components/views/rooms/MemberList/MemberListHeaderView.tsx

@@ -47,7 +47,7 @@ const InviteButton: React.FC<Props> = ({ vm }) => {
                     className="mx_MemberListHeaderView_invite_small"
                     kind="secondary"
                     onClick={vm.onInviteButtonClick}
-                    size="sm"
+                    size="md"
                     iconOnly={true}
                     Icon={InviteIcon}
                     disabled={disabled}
@@ -63,7 +63,7 @@ const InviteButton: React.FC<Props> = ({ vm }) => {
         <InviteTooltip canInvite={vm.canInvite}>
             <Button
                 kind="secondary"
-                size="sm"
+                size="md"
                 Icon={UserAddIcon}
                 className="mx_MemberListHeaderView_invite_large"
                 disabled={!vm.canInvite}

apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -117,7 +117,7 @@ function RoomHeaderButtons({
             }
         >
             <Button
-                size="sm"
+                size="md"
                 onClick={videoClick}
                 // If we know this is a voice session, show the voice call. All other kinds of call are video calls.
                 Icon={activeCallSessionType === CallType.Voice ? VoiceCallIcon : VideoCallIcon}

apps/web/src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -117,7 +117,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
                     <Text as="span" role="heading" size="lg" weight="semibold">
                         {_t("user_info|admin_tools_section")}
                     </Text>
-                    <Button size="sm" kind="destructive" className="mx_MemberInfo_field" onClick={this.onKickClick}>
+                    <Button size="md" kind="destructive" className="mx_MemberInfo_field" onClick={this.onKickClick}>
                         {_t("user_info|revoke_invite")}
                     </Button>
                 </Flex>

apps/web/src/components/views/rooms/UserIdentityWarning.tsx

@@ -122,7 +122,7 @@ function warningBanner(
             <div className="mx_UserIdentityWarning_row">
                 {avatar}
                 <span className={classNames("mx_UserIdentityWarning_main", { critical: isCritical })}>{title}</span>
-                <Button kind="secondary" size="sm" onClick={onButtonClick}>
+                <Button kind="secondary" size="md" onClick={onButtonClick}>
                     {action}
                 </Button>
             </div>

apps/web/src/components/views/settings/PowerLevelSelector.tsx

@@ -129,7 +129,7 @@ export function PowerLevelSelector({
             })}
 
             <Button
-                size="sm"
+                size="md"
                 kind="primary"
                 // mx_Dialog_nonDialogButton is necessary to avoid the Dialog CSS to override the button style
                 className="mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"

apps/web/src/components/views/settings/encryption/AdvancedPanel.tsx

@@ -72,7 +72,7 @@ function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Ele
             </div>
             <div className="mx_EncryptionDetails_buttons">
                 <Button
-                    size="sm"
+                    size="md"
                     kind="secondary"
                     Icon={DownloadIcon}
                     onClick={() =>
@@ -87,7 +87,7 @@ function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Ele
                     {_t("settings|encryption|advanced|export_keys")}
                 </Button>
                 <Button
-                    size="sm"
+                    size="md"
                     kind="secondary"
                     Icon={ShareIcon}
                     onClick={() =>
@@ -102,7 +102,7 @@ function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Ele
                     {_t("settings|encryption|advanced|import_keys")}
                 </Button>
             </div>
-            <Button size="sm" kind="tertiary" destructive={true} onClick={onResetIdentityClick}>
+            <Button size="md" kind="tertiary" destructive={true} onClick={onResetIdentityClick}>
                 {_t("settings|encryption|advanced|reset_identity")}
             </Button>
         </div>

apps/web/src/components/views/settings/encryption/RecoveryPanel.tsx

@@ -57,14 +57,14 @@ export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps):
             break;
         case "missing_recovery_key":
             content = (
-                <Button size="sm" kind="primary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(true)}>
+                <Button size="md" kind="primary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(true)}>
                     {_t("settings|encryption|recovery|set_up_recovery")}
                 </Button>
             );
             break;
         case "good":
             content = (
-                <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
+                <Button size="md" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
                     {_t("settings|encryption|recovery|change_recovery_key")}
                 </Button>
             );

apps/web/src/components/views/settings/encryption/RecoveryPanelOutOfSync.tsx

@@ -62,11 +62,11 @@ export function RecoveryPanelOutOfSync({
             data-testid="recoveryPanel"
         >
             <div className="mx_RecoveryPanelOutOfSync">
-                <Button size="sm" kind="secondary" onClick={onForgotRecoveryKey}>
+                <Button size="md" kind="secondary" onClick={onForgotRecoveryKey}>
                     {_t("settings|encryption|recovery|forgot_recovery_key")}
                 </Button>
                 <Button
-                    size="sm"
+                    size="md"
                     kind="primary"
                     Icon={KeyIcon}
                     onClick={async () => {

apps/web/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx

@@ -204,7 +204,7 @@ function SetUpEncryptionPanel({ onFinish }: SetUpEncryptionPanelProps): JSX.Elem
             }
         >
             <Button
-                size="sm"
+                size="md"
                 Icon={ComputerIcon}
                 onClick={() => {
                     const { finished } = Modal.createDialog(SetupEncryptionDialog);
@@ -237,7 +237,7 @@ function IdentityNeedsResetNoticePanel({ onContinue }: Readonly<IdentityNeedsRes
             }
         >
             <div>
-                <Button size="sm" kind="primary" onClick={onContinue}>
+                <Button size="md" kind="primary" onClick={onContinue}>
                     {_t("encryption|continue_with_reset")}
                 </Button>
             </div>

apps/web/src/components/views/toasts/GenericToast.tsx

@@ -56,7 +56,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
                         onClick={onSecondaryClick}
                         kind={destructive === "secondary" ? "destructive" : "secondary"}
                         Icon={SecondaryIcon}
-                        size="sm"
+                        size="md"
                     >
                         {secondaryLabel}
                     </Button>
@@ -65,7 +65,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
                     onClick={onPrimaryClick}
                     kind={destructive === "primary" ? "destructive" : "primary"}
                     Icon={PrimaryIcon}
-                    size="sm"
+                    size="md"
                 >
                     {primaryLabel}
                 </Button>

apps/web/src/toasts/IncomingCallToast.tsx

@@ -85,7 +85,7 @@ function JoinCallButtonWithCall({ onClick, disabledTooltip, isRinging }: JoinCal
                 disabled={disabledTooltip != undefined}
                 kind="primary"
                 Icon={CheckIcon}
-                size="sm"
+                size="md"
             >
                 {isRinging ? _t("action|accept") : _t("action|join")}
             </Button>
@@ -123,7 +123,7 @@ function DeclineCallButtonWithNotificationEvent({
                 destructive
                 disabled={declining}
                 Icon={CloseIcon}
-                size="sm"
+                size="md"
             >
                 {_t("action|decline")}
             </Button>

apps/web/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap

@@ -102,9 +102,9 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <button
-          class="_button_13vu4_8 _has-icon_13vu4_60"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
           data-kind="secondary"
-          data-size="sm"
+          data-size="md"
           role="button"
           tabindex="0"
         >
@@ -143,7 +143,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/macos/Element.dmg"
@@ -167,7 +167,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Mac
       </a>
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
@@ -189,7 +189,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (64-bit)
       </a>
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
@@ -211,7 +211,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (ARM 64-bit)
       </a>
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
         data-size="lg"
         href="https://element.io/download#linux"

apps/web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap

@@ -162,9 +162,9 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
                 class="mx_DefaultWelcome_buttons"
               >
                 <a
-                  class="_button_13vu4_8"
+                  class="_button_1nw83_8"
                   data-kind="primary"
-                  data-size="sm"
+                  data-size="md"
                   href="#/login"
                   role="link"
                   tabindex="0"
@@ -172,9 +172,9 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
                   Sign in
                 </a>
                 <a
-                  class="_button_13vu4_8"
+                  class="_button_1nw83_8"
                   data-kind="secondary"
-                  data-size="sm"
+                  data-size="md"
                   href="#/register"
                   role="link"
                   tabindex="0"
@@ -182,9 +182,9 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
                   Create account
                 </a>
                 <a
-                  class="_button_13vu4_8"
+                  class="_button_1nw83_8"
                   data-kind="tertiary"
-                  data-size="sm"
+                  data-size="md"
                   href="#/directory"
                   role="link"
                   tabindex="0"

apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -247,9 +247,9 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           class="_actions_n7ud0_61"
         >
           <button
-            class="_button_13vu4_8 _primaryAction_1xryk_20 _has-icon_13vu4_60"
+            class="_button_1nw83_8 _primaryAction_1xryk_20 _has-icon_1nw83_60"
             data-kind="primary"
-            data-size="sm"
+            data-size="md"
             role="button"
             tabindex="0"
           >
@@ -1062,7 +1062,7 @@ exports[`RoomView invites renders an invite room 1`] = `
           Decline
         </div>
         <button
-          class="_button_13vu4_8 _destructive_13vu4_110"
+          class="_button_1nw83_8 _destructive_1nw83_110"
           data-kind="tertiary"
           data-size="lg"
           role="button"

apps/web/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap

@@ -112,7 +112,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                   class="mx_EncryptionCard_buttons"
                 >
                   <button
-                    class="_button_13vu4_8"
+                    class="_button_1nw83_8"
                     data-kind="primary"
                     data-size="lg"
                     role="button"
@@ -132,7 +132,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                      Use another device
                   </button>
                   <button
-                    class="_button_13vu4_8"
+                    class="_button_1nw83_8"
                     data-kind="secondary"
                     data-size="lg"
                     role="button"
@@ -141,7 +141,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                     Can't confirm?
                   </button>
                   <button
-                    class="_button_13vu4_8"
+                    class="_button_1nw83_8"
                     data-kind="tertiary"
                     data-size="lg"
                     role="button"
@@ -305,7 +305,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                   class="mx_EncryptionCard_buttons"
                 >
                   <button
-                    class="_button_13vu4_8"
+                    class="_button_1nw83_8"
                     data-kind="primary"
                     data-size="lg"
                     role="button"
@@ -314,7 +314,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                     Use recovery key
                   </button>
                   <button
-                    class="_button_13vu4_8"
+                    class="_button_1nw83_8"
                     data-kind="secondary"
                     data-size="lg"
                     role="button"
@@ -323,7 +323,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                     Can't confirm?
                   </button>
                   <button
-                    class="_button_13vu4_8"
+                    class="_button_1nw83_8"
                     data-kind="tertiary"
                     data-size="lg"
                     role="button"

apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap

@@ -74,7 +74,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_13vu4_8 mx_Dialog_nonDialogButton _has-icon_13vu4_60"
+        class="_button_1nw83_8 mx_Dialog_nonDialogButton _has-icon_1nw83_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -98,7 +98,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
         Continue to account
       </button>
       <button
-        class="_button_13vu4_8 mx_Dialog_nonDialogButton"
+        class="_button_1nw83_8 mx_Dialog_nonDialogButton"
         data-kind="tertiary"
         data-size="lg"
         role="button"

apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap

@@ -60,7 +60,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -69,7 +69,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
         Go to Settings
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
         data-size="lg"
         role="button"

apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap

@@ -95,10 +95,10 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
                   >
                     <button
                       aria-label="Remove"
-                      class="_button_13vu4_8 _toolbar_item_1ax4y_14"
+                      class="_button_1nw83_8 _toolbar_item_1ax4y_14"
                       data-kind="tertiary"
                       data-presentation="label"
-                      data-size="sm"
+                      data-size="md"
                       role="button"
                       tabindex="0"
                     >
@@ -242,10 +242,10 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   >
                     <button
                       aria-label="Remove"
-                      class="_button_13vu4_8 _toolbar_item_1ax4y_14"
+                      class="_button_1nw83_8 _toolbar_item_1ax4y_14"
                       data-kind="tertiary"
                       data-presentation="label"
-                      data-size="sm"
+                      data-size="md"
                       role="button"
                       tabindex="0"
                     >
@@ -304,10 +304,10 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   >
                     <button
                       aria-label="Remove"
-                      class="_button_13vu4_8 _toolbar_item_1ax4y_14"
+                      class="_button_1nw83_8 _toolbar_item_1ax4y_14"
                       data-kind="tertiary"
                       data-presentation="label"
-                      data-size="sm"
+                      data-size="md"
                       role="button"
                       tabindex="0"
                     >
@@ -348,10 +348,10 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   >
                     <button
                       aria-label="Remove"
-                      class="_button_13vu4_8 _toolbar_item_1ax4y_14"
+                      class="_button_1nw83_8 _toolbar_item_1ax4y_14"
                       data-kind="tertiary"
                       data-presentation="label"
-                      data-size="sm"
+                      data-size="md"
                       role="button"
                       tabindex="0"
                     >

apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap

@@ -36,7 +36,7 @@ exports[`ShareDialog should not render the QR code if disabled 1`] = `
         </span>
       </div>
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -205,7 +205,7 @@ exports[`ShareDialog should not render the socials if disabled 1`] = `
         </span>
       </div>
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -343,7 +343,7 @@ exports[`ShareDialog should render a share dialog for a matrix event 1`] = `
         Link to selected message
       </label>
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -539,7 +539,7 @@ exports[`ShareDialog should render a share dialog for a room 1`] = `
         Link to most recent message
       </label>
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -708,7 +708,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
         </span>
       </div>
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -877,7 +877,7 @@ exports[`ShareDialog should render a share dialog for an URL 1`] = `
         </span>
       </div>
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="primary"
         data-size="lg"
         role="button"

apps/web/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap

@@ -33,7 +33,7 @@ exports[`<UnpinAllDialog /> should render 1`] = `
       class="mx_UnpinAllDialog_buttons"
     >
       <button
-        class="_button_13vu4_8 _destructive_13vu4_110"
+        class="_button_1nw83_8 _destructive_1nw83_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -42,7 +42,7 @@ exports[`<UnpinAllDialog /> should render 1`] = `
         Continue
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"

apps/web/test/unit-tests/components/views/elements/__snapshots__/BugReportDialogButton-test.tsx.snap

@@ -3,9 +3,9 @@
 exports[`<BugReportDialogButton /> renders 'download' label if 'loca' is configured 1`] = `
 <div>
   <button
-    class="_button_13vu4_8"
+    class="_button_1nw83_8"
     data-kind="secondary"
-    data-size="sm"
+    data-size="md"
     role="button"
     tabindex="0"
   >
@@ -17,9 +17,9 @@ exports[`<BugReportDialogButton /> renders 'download' label if 'loca' is configu
 exports[`<BugReportDialogButton /> renders 'submit' label if a URL is configured 1`] = `
 <div>
   <button
-    class="_button_13vu4_8"
+    class="_button_1nw83_8"
     data-kind="secondary"
-    data-size="sm"
+    data-size="md"
     role="button"
     tabindex="0"
   >

apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap

@@ -54,7 +54,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     </div>
     <button
       aria-disabled="true"
-      class="_button_13vu4_8 mx_EnableLiveShare_button"
+      class="_button_1nw83_8 mx_EnableLiveShare_button"
       data-kind="primary"
       data-size="lg"
       role="button"

apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap

@@ -11,9 +11,9 @@ exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder whe
     >
       <button
         aria-label="alt"
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -52,9 +52,9 @@ exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when
     >
       <button
         aria-label="alt"
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -88,9 +88,9 @@ exports[`MBodyFactory renderMBody renders download button for m.file in file ren
       data-type="download"
     >
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         href="https://server/_matrix/media/v3/download/server/file"
         rel="noreferrer noopener"
         role="link"

apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap

@@ -308,9 +308,9 @@ exports[`<MImageBody/> should render MFileBody for svg with no thumbnail 1`] = `
     >
       <button
         aria-label="Attachment"
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap

@@ -50,9 +50,9 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
       tabindex="-1"
     >
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -151,9 +151,9 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
       tabindex="-1"
     >
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap

@@ -296,7 +296,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         class="mx_PinnedMessagesCard_unpin"
       >
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"

apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap

@@ -59,9 +59,9 @@ exports[`<UserInfoHeaderVerificationView /> renders verify button 1`] = `
       class="mx_UserInfo_container_verifyButton"
     >
       <button
-        class="_button_13vu4_8 mx_UserInfo_verify_button"
+        class="_button_1nw83_8 mx_UserInfo_verify_button"
         data-kind="tertiary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

apps/web/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap

@@ -9,9 +9,9 @@ exports[`<RoomListSearch /> renders 1`] = `
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_13vu4_8 _search_z7ks9_16 _has-icon_13vu4_60"
+      class="_button_1nw83_8 _search_z7ks9_16 _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       id="room-list-search-button"
       role="button"
       tabindex="0"

apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap

@@ -128,7 +128,7 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
       </div>
     </button>
     <button
-      class="_button_13vu4_8 mx_PinnedMessageBanner_actions"
+      class="_button_1nw83_8 mx_PinnedMessageBanner_actions"
       data-kind="tertiary"
       data-size="lg"
       role="button"
@@ -438,7 +438,7 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
       </div>
     </button>
     <button
-      class="_button_13vu4_8 mx_PinnedMessageBanner_actions"
+      class="_button_1nw83_8 mx_PinnedMessageBanner_actions"
       data-kind="tertiary"
       data-size="lg"
       role="button"
@@ -520,7 +520,7 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
       </div>
     </button>
     <button
-      class="_button_13vu4_8 mx_PinnedMessageBanner_actions"
+      class="_button_1nw83_8 mx_PinnedMessageBanner_actions"
       data-kind="tertiary"
       data-size="lg"
       role="button"

apps/web/test/unit-tests/components/views/settings/__snapshots__/PowerLevelSelector-test.tsx.snap

@@ -72,9 +72,9 @@ exports[`PowerLevelSelector should display only the current user 1`] = `
     <button
       aria-disabled="true"
       aria-label="Apply"
-      class="_button_13vu4_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
+      class="_button_1nw83_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
       data-kind="primary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -270,9 +270,9 @@ exports[`PowerLevelSelector should render 1`] = `
     <button
       aria-disabled="true"
       aria-label="Apply"
-      class="_button_13vu4_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
+      class="_button_1nw83_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
       data-kind="primary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >

apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap

@@ -53,9 +53,9 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when l
     class="mx_EncryptionDetails_buttons"
   >
     <button
-      class="_button_13vu4_8 _has-icon_13vu4_60"
+      class="_button_1nw83_8 _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -74,9 +74,9 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when l
       Export keys
     </button>
     <button
-      class="_button_13vu4_8 _has-icon_13vu4_60"
+      class="_button_1nw83_8 _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -96,9 +96,9 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when l
     </button>
   </div>
   <button
-    class="_button_13vu4_8 _destructive_13vu4_110"
+    class="_button_1nw83_8 _destructive_1nw83_110"
     data-kind="tertiary"
-    data-size="sm"
+    data-size="md"
     role="button"
     tabindex="0"
   >
@@ -145,9 +145,9 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys
     class="mx_EncryptionDetails_buttons"
   >
     <button
-      class="_button_13vu4_8 _has-icon_13vu4_60"
+      class="_button_1nw83_8 _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -166,9 +166,9 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys
       Export keys
     </button>
     <button
-      class="_button_13vu4_8 _has-icon_13vu4_60"
+      class="_button_1nw83_8 _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -188,9 +188,9 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys
     </button>
   </div>
   <button
-    class="_button_13vu4_8 _destructive_13vu4_110"
+    class="_button_1nw83_8 _destructive_1nw83_110"
     data-kind="tertiary"
-    data-size="sm"
+    data-size="md"
     role="button"
     tabindex="0"
   >

apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap

@@ -141,7 +141,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -150,7 +150,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
         Continue
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -300,7 +300,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       >
         <button
           aria-disabled="true"
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="primary"
           data-size="lg"
           role="button"
@@ -309,7 +309,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
           Finish set up
         </button>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -482,7 +482,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       >
         <button
           aria-disabled="true"
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="primary"
           data-size="lg"
           role="button"
@@ -491,7 +491,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
           Finish set up
         </button>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -601,7 +601,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -610,7 +610,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
         Continue
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -764,7 +764,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -773,7 +773,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
         Continue
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"

apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap

@@ -135,7 +135,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
     >
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 _destructive_13vu4_110"
+        class="_button_1nw83_8 _destructive_1nw83_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -144,7 +144,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
         Delete key storage
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"

apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap

@@ -17,9 +17,9 @@ exports[`<RecoveryPanel /> should allow to change the recovery key when everythi
       Your chats are automatically backed up with end-to-end encryption. To restore this backup and retain your digital identity when you lose access to all your devices, you will need your recovery key.
     </div>
     <button
-      class="_button_13vu4_8 _has-icon_13vu4_60"
+      class="_button_1nw83_8 _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -58,9 +58,9 @@ exports[`<RecoveryPanel /> should ask to set up a recovery key when there is no
       Your chats are automatically backed up with end-to-end encryption. To restore this backup and retain your digital identity when you lose access to all your devices, you will need your recovery key.
     </div>
     <button
-      class="_button_13vu4_8 _has-icon_13vu4_60"
+      class="_button_1nw83_8 _has-icon_1nw83_60"
       data-kind="primary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >

apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanelOutOfSync-test.tsx.snap

@@ -40,18 +40,18 @@ exports[`<RecoveyPanelOutOfSync /> should render 1`] = `
       class="mx_RecoveryPanelOutOfSync"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
         Forgot recovery key?
       </button>
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap

@@ -162,7 +162,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
     >
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 _destructive_13vu4_110"
+        class="_button_1nw83_8 _destructive_1nw83_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -171,7 +171,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
         Continue
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -346,7 +346,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
     >
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 _destructive_13vu4_110"
+        class="_button_1nw83_8 _destructive_1nw83_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -355,7 +355,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
         Continue
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -533,7 +533,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     >
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 _destructive_13vu4_110"
+        class="_button_1nw83_8 _destructive_1nw83_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -542,7 +542,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
         Continue
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -720,7 +720,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     >
       <button
         aria-disabled="true"
-        class="_button_13vu4_8 _destructive_13vu4_110"
+        class="_button_1nw83_8 _destructive_1nw83_110"
         data-kind="primary"
         data-size="lg"
         role="button"

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap

@@ -42,9 +42,9 @@ exports[`<EncryptionUserSettingsTab /> should display a verify button when the e
           </div>
         </div>
         <button
-          class="_button_13vu4_8 _has-icon_13vu4_60"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
           data-kind="primary"
-          data-size="sm"
+          data-size="md"
           role="button"
           tabindex="0"
         >
@@ -124,9 +124,9 @@ exports[`<EncryptionUserSettingsTab /> should display the identity needs reset p
         </div>
         <div>
           <button
-            class="_button_13vu4_8"
+            class="_button_1nw83_8"
             data-kind="primary"
-            data-size="sm"
+            data-size="md"
             role="button"
             tabindex="0"
           >
@@ -186,18 +186,18 @@ exports[`<EncryptionUserSettingsTab /> should display the recovery out of sync p
           class="mx_RecoveryPanelOutOfSync"
         >
           <button
-            class="_button_13vu4_8"
+            class="_button_1nw83_8"
             data-kind="secondary"
-            data-size="sm"
+            data-size="md"
             role="button"
             tabindex="0"
           >
             Forgot recovery key?
           </button>
           <button
-            class="_button_13vu4_8 _has-icon_13vu4_60"
+            class="_button_1nw83_8 _has-icon_1nw83_60"
             data-kind="primary"
-            data-size="sm"
+            data-size="md"
             role="button"
             tabindex="0"
           >
@@ -394,7 +394,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
         >
           <button
             aria-disabled="false"
-            class="_button_13vu4_8 _destructive_13vu4_110"
+            class="_button_1nw83_8 _destructive_1nw83_110"
             data-kind="primary"
             data-size="lg"
             role="button"
@@ -403,7 +403,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
             Continue
           </button>
           <button
-            class="_button_13vu4_8"
+            class="_button_1nw83_8"
             data-kind="tertiary"
             data-size="lg"
             role="button"

apps/web/test/unit-tests/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap

@@ -15,18 +15,18 @@ exports[`GenericToast should render as expected with detail content 1`] = `
       class="mx_Toast_buttons"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
         Reject
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -57,18 +57,18 @@ exports[`GenericToast should render as expected without detail content 1`] = `
       class="mx_Toast_buttons"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
         Reject
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

apps/web/test/unit-tests/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap

@@ -13,18 +13,18 @@ exports[`VerificationRequestToast should render a cross-user verification 1`] =
       class="mx_Toast_buttons"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
         Ignore
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -53,18 +53,18 @@ exports[`VerificationRequestToast should render a self-verification 1`] = `
       class="mx_Toast_buttons"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
         Ignore
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

apps/web/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap

@@ -59,18 +59,18 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
               class="mx_Toast_buttons"
             >
               <button
-                class="_button_13vu4_8 _destructive_13vu4_110"
+                class="_button_1nw83_8 _destructive_1nw83_110"
                 data-kind="secondary"
-                data-size="sm"
+                data-size="md"
                 role="button"
                 tabindex="0"
               >
                 No
               </button>
               <button
-                class="_button_13vu4_8"
+                class="_button_1nw83_8"
                 data-kind="primary"
-                data-size="sm"
+                data-size="md"
                 role="button"
                 tabindex="0"
               >

apps/web/test/unit-tests/vector/__snapshots__/init-test.ts.snap

@@ -106,9 +106,9 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <button
-          class="_button_13vu4_8 _has-icon_13vu4_60"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
           data-kind="secondary"
-          data-size="sm"
+          data-size="md"
           role="button"
           tabindex="0"
         >
@@ -130,9 +130,9 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
           Learn more
         </button>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="primary"
-          data-size="sm"
+          data-size="md"
           role="button"
           tabindex="0"
         >
@@ -156,7 +156,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/macos/Element.dmg"
@@ -180,7 +180,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Mac
       </a>
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
@@ -202,7 +202,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Windows (64-bit)
       </a>
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
@@ -224,7 +224,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Windows (ARM 64-bit)
       </a>
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
         data-size="lg"
         href="https://element.io/download#linux"

packages/shared-components/src/room-list/RoomListSearchView/RoomListSearchView.tsx

@@ -84,7 +84,7 @@ export function RoomListSearchView({ vm }: Readonly<RoomListSearchViewProps>): J
                 id="room-list-search-button"
                 className={styles.search}
                 kind="secondary"
-                size="sm"
+                size="md"
                 Icon={SearchIcon}
                 onClick={vm.onSearchClick}
             >
@@ -96,7 +96,7 @@ export function RoomListSearchView({ vm }: Readonly<RoomListSearchViewProps>): J
             {displayDialButton && (
                 <Button
                     kind="secondary"
-                    size="sm"
+                    size="md"
                     Icon={DialPadIcon}
                     iconOnly={true}
                     aria-label={_t("left_panel|open_dial_pad")}
@@ -106,7 +106,7 @@ export function RoomListSearchView({ vm }: Readonly<RoomListSearchViewProps>): J
             {displayExploreButton && (
                 <Button
                     kind="secondary"
-                    size="sm"
+                    size="md"
                     Icon={ExploreIcon}
                     iconOnly={true}
                     aria-label={_t("action|explore_rooms")}

packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap

@@ -9,9 +9,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders the default state 1`
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_13vu4_8 RoomListSearchView-module_search _has-icon_13vu4_60"
+      class="_button_1nw83_8 RoomListSearchView-module_search _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       id="room-list-search-button"
       role="button"
       tabindex="0"
@@ -44,9 +44,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders the default state 1`
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -76,9 +76,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders with all buttons vis
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_13vu4_8 RoomListSearchView-module_search _has-icon_13vu4_60"
+      class="_button_1nw83_8 RoomListSearchView-module_search _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       id="room-list-search-button"
       role="button"
       tabindex="0"
@@ -111,9 +111,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders with all buttons vis
     </button>
     <button
       aria-label="Open dial pad"
-      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -132,9 +132,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders with all buttons vis
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -164,9 +164,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders with dial pad button
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_13vu4_8 RoomListSearchView-module_search _has-icon_13vu4_60"
+      class="_button_1nw83_8 RoomListSearchView-module_search _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       id="room-list-search-button"
       role="button"
       tabindex="0"
@@ -199,9 +199,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders with dial pad button
     </button>
     <button
       aria-label="Open dial pad"
-      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -220,9 +220,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders with dial pad button
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -252,9 +252,9 @@ exports[`RoomListSearchView > Storybook snapshots > renders without explore butt
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_13vu4_8 RoomListSearchView-module_search _has-icon_13vu4_60"
+      class="_button_1nw83_8 RoomListSearchView-module_search _has-icon_1nw83_60"
       data-kind="secondary"
-      data-size="sm"
+      data-size="md"
       id="room-list-search-button"
       role="button"
       tabindex="0"

packages/shared-components/src/room-list/RoomListView/RoomListEmptyStateView.tsx

@@ -49,11 +49,11 @@ export const RoomListEmptyStateView: React.FC<RoomListEmptyStateViewProps> = ({
                     direction="column"
                     gap="var(--cpd-space-4x)"
                 >
-                    <Button size="sm" kind="secondary" Icon={ChatIcon} onClick={vm.createChatRoom}>
+                    <Button size="md" kind="secondary" Icon={ChatIcon} onClick={vm.createChatRoom}>
                         {_t("action|start_chat")}
                     </Button>
                     {snapshot.canCreateRoom && (
-                        <Button size="sm" kind="secondary" Icon={RoomIcon} onClick={vm.createRoom}>
+                        <Button size="md" kind="secondary" Icon={RoomIcon} onClick={vm.createRoom}>
                             {_t("action|new_room")}
                         </Button>
                     )}

packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap

@@ -2757,9 +2757,9 @@ exports[`<RoomListView /> > renders Empty story 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
         >
           <button
-            class="_button_13vu4_8 _has-icon_13vu4_60"
+            class="_button_1nw83_8 _has-icon_1nw83_60"
             data-kind="secondary"
-            data-size="sm"
+            data-size="md"
             role="button"
             tabindex="0"
           >
@@ -2778,9 +2778,9 @@ exports[`<RoomListView /> > renders Empty story 1`] = `
             Start chat
           </button>
           <button
-            class="_button_13vu4_8 _has-icon_13vu4_60"
+            class="_button_1nw83_8 _has-icon_1nw83_60"
             data-kind="secondary"
-            data-size="sm"
+            data-size="md"
             role="button"
             tabindex="0"
           >
@@ -2923,7 +2923,7 @@ exports[`<RoomListView /> > renders EmptyInvitesFilter story 1`] = `
           You don't have any unread invites
         </span>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -2991,7 +2991,7 @@ exports[`<RoomListView /> > renders EmptyLowPriorityFilter story 1`] = `
           You don't have any low priority rooms
         </span>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -3059,7 +3059,7 @@ exports[`<RoomListView /> > renders EmptyMentionsFilter story 1`] = `
           You don't have any unread mentions
         </span>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -3255,7 +3255,7 @@ exports[`<RoomListView /> > renders EmptyUnreadFilter story 1`] = `
           Congrats! You don’t have any unread messages
         </span>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -3350,9 +3350,9 @@ exports[`<RoomListView /> > renders EmptyWithoutCreatePermission story 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
         >
           <button
-            class="_button_13vu4_8 _has-icon_13vu4_60"
+            class="_button_1nw83_8 _has-icon_1nw83_60"
             data-kind="secondary"
-            data-size="sm"
+            data-size="md"
             role="button"
             tabindex="0"
           >

packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx

@@ -181,7 +181,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                             onClick={termsAndConditionsClicked}
                             className={styles.primaryAction}
                             kind="primary"
-                            size="sm"
+                            size="md"
                             as="a"
                             href={snapshot.consentUri}
                             target="_blank"
@@ -208,7 +208,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                         snapshot.adminContactHref && (
                             <Button
                                 kind="secondary"
-                                size="sm"
+                                size="md"
                                 as="a"
                                 href={snapshot.adminContactHref}
                                 target="_blank"
@@ -240,7 +240,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                     aria-labelledby={bannerTitleId}
                     actions={
                         <Button
-                            size="sm"
+                            size="md"
                             kind="primary"
                             className={styles.primaryAction}
                             Icon={RestartIcon}
@@ -267,7 +267,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                             <>
                                 {vm.onDeleteAllClick && (
                                     <Button
-                                        size="sm"
+                                        size="md"
                                         kind="secondary"
                                         Icon={DeleteIcon}
                                         className={styles.secondaryAction}
@@ -278,7 +278,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                                 )}
                                 {vm.onResendAllClick && (
                                     <Button
-                                        size="sm"
+                                        size="md"
                                         kind="primary"
                                         Icon={RestartIcon}
                                         onClick={resendClick}

packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap

@@ -92,9 +92,9 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
       class="Banner-module_actions"
     >
       <a
-        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction"
+        class="_button_1nw83_8 RoomStatusBarView-module_primaryAction"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         href="#example"
         rel="noreferrer noopener"
         role="link"
@@ -146,9 +146,9 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction _has-icon_13vu4_60"
+        class="_button_1nw83_8 RoomStatusBarView-module_primaryAction _has-icon_1nw83_60"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -218,9 +218,9 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
       class="Banner-module_actions"
     >
       <a
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         href="#example"
         rel="noreferrer noopener"
         role="link"
@@ -281,9 +281,9 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8 RoomStatusBarView-module_secondaryAction _has-icon_13vu4_60"
+        class="_button_1nw83_8 RoomStatusBarView-module_secondaryAction _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -302,9 +302,9 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
         Delete all
       </button>
       <button
-        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction _has-icon_13vu4_60"
+        class="_button_1nw83_8 RoomStatusBarView-module_primaryAction _has-icon_1nw83_60"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -374,9 +374,9 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8 RoomStatusBarView-module_secondaryAction _has-icon_13vu4_60"
+        class="_button_1nw83_8 RoomStatusBarView-module_secondaryAction _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -395,9 +395,9 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
         Delete all
       </button>
       <button
-        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction _has-icon_13vu4_60"
+        class="_button_1nw83_8 RoomStatusBarView-module_primaryAction _has-icon_1nw83_60"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -467,9 +467,9 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8 RoomStatusBarView-module_secondaryAction _has-icon_13vu4_60"
+        class="_button_1nw83_8 RoomStatusBarView-module_secondaryAction _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -488,9 +488,9 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
         Delete all
       </button>
       <button
-        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction _has-icon_13vu4_60"
+        class="_button_1nw83_8 RoomStatusBarView-module_primaryAction _has-icon_1nw83_60"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

packages/shared-components/src/room/composer/Banner/Banner.stories.tsx

@@ -50,7 +50,7 @@ export const WithAction: Story = {
             </p>
         ),
         actions: (
-            <Button kind="primary" size="sm">
+            <Button kind="primary" size="md">
                 Withdraw verification
             </Button>
         ),

packages/shared-components/src/room/composer/Banner/Banner.tsx

@@ -82,7 +82,7 @@ export function Banner({
             <div className={styles.actions}>
                 {actions}
                 {onClose && (
-                    <Button kind="secondary" size="sm" onClick={onClose}>
+                    <Button kind="secondary" size="md" onClick={onClose}>
                         {_t("action|dismiss")}
                     </Button>
                 )}

packages/shared-components/src/room/composer/Banner/__snapshots__/Banner.test.tsx.snap

@@ -46,18 +46,18 @@ exports[`AvatarWithDetails > renders a banner with an action 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="primary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
         Withdraw verification
       </button>
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -92,9 +92,9 @@ exports[`AvatarWithDetails > renders a banner with an avatar iamge 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -138,9 +138,9 @@ exports[`AvatarWithDetails > renders a critical banner 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -188,9 +188,9 @@ exports[`AvatarWithDetails > renders a default banner 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -239,9 +239,9 @@ exports[`AvatarWithDetails > renders a info banner 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -285,9 +285,9 @@ exports[`AvatarWithDetails > renders a success banner 1`] = `
       class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8"
+        class="_button_1nw83_8"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorDatePickerView.tsx

@@ -121,7 +121,7 @@ export const DateSeparatorDatePickerView: React.FC<DateSeparatorDatePickerViewPr
                     className={styles.picker_button}
                     type="submit"
                     kind="primary"
-                    size="sm"
+                    size="md"
                     onKeyDown={onSubmitButtonKeyDown}
                 >
                     {_t("action|go")}

packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx

@@ -83,7 +83,7 @@ export function TileErrorView({ vm, className }: Readonly<TileErrorViewProps>):
                     {eventType && ` (${eventType})`}
                 </span>
                 {bugReportCtaLabel && (
-                    <Button kind="secondary" size="sm" onClick={vm.onBugReportClick}>
+                    <Button kind="secondary" size="md" onClick={vm.onBugReportClick}>
                         {bugReportCtaLabel}
                     </Button>
                 )}

packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap

@@ -18,9 +18,9 @@ exports[`TileErrorView > renders the bubble layout variant 1`] = `
            (m.room.message)
         </span>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="secondary"
-          data-size="sm"
+          data-size="md"
           role="button"
           tabindex="0"
         >
@@ -56,9 +56,9 @@ exports[`TileErrorView > renders the default tile error state 1`] = `
            (m.room.message)
         </span>
         <button
-          class="_button_13vu4_8"
+          class="_button_1nw83_8"
           data-kind="secondary"
-          data-size="sm"
+          data-size="md"
           role="button"
           tabindex="0"
         >

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`LinkPreview > renders a playable preview that can be opened with a clic
     >
       <a
         aria-label="Open link"
-        class="_button_13vu4_8 LinkPreview-module_playButton"
+        class="_button_1nw83_8 LinkPreview-module_playButton"
         data-kind="primary"
         data-size="lg"
         href="https://matrix.org"

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx

@@ -52,7 +52,7 @@ export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Eleme
     let toggleButton: JSX.Element | undefined;
     if (overPreviewLimit) {
         toggleButton = (
-            <Button className={styles.toggleButton} kind="tertiary" size="sm" onClick={vm.onTogglePreviewLimit}>
+            <Button className={styles.toggleButton} kind="tertiary" size="md" onClick={vm.onTogglePreviewLimit}>
                 {previewsLimited
                     ? _t("timeline|url_preview|show_n_more", { count: totalPreviewCount - previews.length })
                     : _t("action|collapse")}

packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap

@@ -207,9 +207,9 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
         </div>
       </div>
       <button
-        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
+        class="_button_1nw83_8 UrlPreviewGroupView-module_toggleButton"
         data-kind="tertiary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -294,9 +294,9 @@ exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] =
         </div>
       </div>
       <button
-        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
+        class="_button_1nw83_8 UrlPreviewGroupView-module_toggleButton"
         data-kind="tertiary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -461,9 +461,9 @@ exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
         </div>
       </div>
       <button
-        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
+        class="_button_1nw83_8 UrlPreviewGroupView-module_toggleButton"
         data-kind="tertiary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/ActionBarButton.tsx

@@ -61,7 +61,7 @@ export function ActionBarButton({
                 data-presentation={presentation}
                 ref={ref}
                 kind="tertiary"
-                size="sm"
+                size="md"
                 iconOnly={iconOnly}
                 aria-label={label}
                 aria-pressed={ariaPressed}

packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/__snapshots__/ActionBarView.test.tsx.snap

@@ -11,10 +11,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
   >
     <button
       aria-label="Hide"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -34,10 +34,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     <button
       aria-disabled="false"
       aria-label="Download"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -56,10 +56,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="React"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -81,10 +81,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -104,10 +104,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     <button
       aria-disabled="false"
       aria-label="Reply in thread"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -129,10 +129,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Edit"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -154,10 +154,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     <button
       aria-label="Pin"
       aria-pressed="false"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -178,10 +178,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Retry"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -200,10 +200,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Delete"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -223,10 +223,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     <button
       aria-expanded="false"
       aria-label="Expand quotes"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -245,10 +245,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -267,10 +267,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="View in room"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -289,10 +289,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Copy link to thread"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -311,10 +311,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Remove"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -333,10 +333,10 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="View Source"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -368,10 +368,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
   >
     <button
       aria-label="Hide"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -380,10 +380,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     <button
       aria-disabled="false"
       aria-label="Download"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -391,10 +391,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="React"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -402,10 +402,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -414,10 +414,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     <button
       aria-disabled="false"
       aria-label="Reply in thread"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -425,10 +425,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Edit"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -437,10 +437,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     <button
       aria-label="Pin"
       aria-pressed="false"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -448,10 +448,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Retry"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -459,10 +459,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Delete"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -471,10 +471,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     <button
       aria-expanded="false"
       aria-label="Expand quotes"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -482,10 +482,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -493,10 +493,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="View in room"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -504,10 +504,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Copy link to thread"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -515,10 +515,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Remove"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -526,10 +526,10 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="View Source"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -551,10 +551,10 @@ exports[`ActionBarView > story snapshots > renders DecryptingAttachment 1`] = `
     <button
       aria-disabled="true"
       aria-label="Decrypting"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -577,10 +577,10 @@ exports[`ActionBarView > story snapshots > renders DecryptingAttachment 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -612,10 +612,10 @@ exports[`ActionBarView > story snapshots > renders DisabledThreadReply 1`] = `
   >
     <button
       aria-label="React"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -637,10 +637,10 @@ exports[`ActionBarView > story snapshots > renders DisabledThreadReply 1`] = `
     </button>
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -660,10 +660,10 @@ exports[`ActionBarView > story snapshots > renders DisabledThreadReply 1`] = `
     <button
       aria-disabled="true"
       aria-label="Reply in thread"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -685,10 +685,10 @@ exports[`ActionBarView > story snapshots > renders DisabledThreadReply 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -721,10 +721,10 @@ exports[`ActionBarView > story snapshots > renders DownloadingAttachment 1`] = `
     <button
       aria-disabled="true"
       aria-label="Downloading"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -747,10 +747,10 @@ exports[`ActionBarView > story snapshots > renders DownloadingAttachment 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -782,10 +782,10 @@ exports[`ActionBarView > story snapshots > renders ExpandedReplyChain 1`] = `
   >
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -805,10 +805,10 @@ exports[`ActionBarView > story snapshots > renders ExpandedReplyChain 1`] = `
     <button
       aria-expanded="true"
       aria-label="Collapse quotes"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -827,10 +827,10 @@ exports[`ActionBarView > story snapshots > renders ExpandedReplyChain 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -862,10 +862,10 @@ exports[`ActionBarView > story snapshots > renders PinnedMessage 1`] = `
   >
     <button
       aria-label="React"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="0"
     >
@@ -887,10 +887,10 @@ exports[`ActionBarView > story snapshots > renders PinnedMessage 1`] = `
     </button>
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -910,10 +910,10 @@ exports[`ActionBarView > story snapshots > renders PinnedMessage 1`] = `
     <button
       aria-label="Unpin"
       aria-pressed="true"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >
@@ -937,10 +937,10 @@ exports[`ActionBarView > story snapshots > renders PinnedMessage 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_1nw83_8 ActionBarView-module_toolbar_item _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-presentation="icon"
-      data-size="sm"
+      data-size="md"
       role="button"
       tabindex="-1"
     >

packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.tsx

@@ -205,7 +205,7 @@ export function FileBodyView({ vm, refIFrame, refLink, className }: Readonly<Fil
             <MediaBody data-type="info">
                 <Button
                     as="button"
-                    size="sm"
+                    size="md"
                     kind="secondary"
                     aria-label={resolvedInfoLabel}
                     Icon={resolvedInfoIcon}
@@ -237,7 +237,7 @@ export function FileBodyView({ vm, refIFrame, refLink, className }: Readonly<Fil
                     {showDownload && (
                         <div data-type="download">
                             {/* Decrypt/download is triggered by the view model action, not by an anchor `href`. */}
-                            <Button size="sm" kind="secondary" Icon={DownloadIcon} onClick={vm.onDownloadClick}>
+                            <Button size="md" kind="secondary" Icon={DownloadIcon} onClick={vm.onDownloadClick}>
                                 {resolvedDownloadLabel}
                             </Button>
                         </div>
@@ -257,7 +257,7 @@ export function FileBodyView({ vm, refIFrame, refLink, className }: Readonly<Fil
                                  * We'll use it to learn how the download button
                                  * would have been styled if it was rendered inline.
                                  * this violates multiple eslint rules so ignore it completely */}
-                                <Button size="sm" kind="secondary" Icon={DownloadIcon} as="a" ref={refLink} />
+                                <Button size="md" kind="secondary" Icon={DownloadIcon} as="a" ref={refLink} />
                             </div>
                             {/*
                             TODO: Move iframe (and dummy link) into FileDownloader.
@@ -287,7 +287,7 @@ export function FileBodyView({ vm, refIFrame, refLink, className }: Readonly<Fil
                         <div data-type="download">
                             {/* Unencrypted media uses an anchor element with VM-controlled click behavior. */}
                             <Button
-                                size="sm"
+                                size="md"
                                 kind="secondary"
                                 Icon={DownloadIcon}
                                 as="a"

packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/__snapshots__/FileBodyView.test.tsx.snap

@@ -11,9 +11,9 @@ exports[`FileBodyView > matches snapshot for audio-info story 1`] = `
     >
       <button
         aria-label="voice-message.ogg"
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -50,9 +50,9 @@ exports[`FileBodyView > matches snapshot for decryption-pending-download story 1
       data-type="download"
     >
       <button
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -86,9 +86,9 @@ exports[`FileBodyView > matches snapshot for default story 1`] = `
     >
       <button
         aria-label="spec.pdf"
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -113,9 +113,9 @@ exports[`FileBodyView > matches snapshot for default story 1`] = `
       data-type="download"
     >
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         href="https://example.org/download/spec.pdf"
         rel="noreferrer noopener"
         role="link"
@@ -154,9 +154,9 @@ exports[`FileBodyView > matches snapshot for encrypted-iframe-download story 1`]
         style="display: none;"
       >
         <a
-          class="_button_13vu4_8 _has-icon_13vu4_60"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
           data-kind="secondary"
-          data-size="sm"
+          data-size="md"
           role="link"
           tabindex="0"
         >
@@ -199,9 +199,9 @@ exports[`FileBodyView > matches snapshot for export story 1`] = `
       >
         <button
           aria-label="spec.pdf"
-          class="_button_13vu4_8 _has-icon_13vu4_60"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
           data-kind="secondary"
-          data-size="sm"
+          data-size="md"
           role="button"
           tabindex="0"
         >
@@ -238,9 +238,9 @@ exports[`FileBodyView > matches snapshot for invalid story 1`] = `
     >
       <button
         aria-label="spec.pdf"
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -279,9 +279,9 @@ exports[`FileBodyView > matches snapshot for long-filename-download story 1`] =
       data-type="download"
     >
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         href="https://example.org/download/spec.pdf"
         rel="noreferrer noopener"
         role="link"
@@ -318,9 +318,9 @@ exports[`FileBodyView > matches snapshot for long-filename-info story 1`] = `
     >
       <button
         aria-label="a very long filename to show ellipsis.pdf"
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >
@@ -354,9 +354,9 @@ exports[`FileBodyView > matches snapshot for unencrypted-download story 1`] = `
       data-type="download"
     >
       <a
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         href="https://example.org/download/spec.pdf"
         rel="noreferrer noopener"
         role="link"
@@ -393,9 +393,9 @@ exports[`FileBodyView > matches snapshot for video-info story 1`] = `
     >
       <button
         aria-label="clip.mp4"
-        class="_button_13vu4_8 _has-icon_13vu4_60"
+        class="_button_1nw83_8 _has-icon_1nw83_60"
         data-kind="secondary"
-        data-size="sm"
+        data-size="md"
         role="button"
         tabindex="0"
       >

pnpm-lock.yaml

@@ -16,8 +16,8 @@ catalogs:
       specifier: 10.1.0
       version: 10.1.0
     '@vector-im/compound-web':
-      specifier: 9.2.0
+      specifier: 9.2.1
-      version: 9.2.0
+      version: 9.2.1
     matrix-web-i18n:
       specifier: 3.6.0
       version: 3.6.0
@@ -349,7 +349,7 @@ importers:
         version: 10.1.0(@types/react@19.2.14)(react@19.2.5)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 9.2.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        version: 9.2.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@vector-im/matrix-wysiwyg':
         specifier: 2.40.0
         version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.5)
@@ -1124,7 +1124,7 @@ importers:
         version: 8.58.2(eslint@8.57.1)(typescript@6.0.3)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 9.2.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        version: 9.2.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@vitest/browser-playwright':
         specifier: ^4.0.17
         version: 4.1.5(playwright@1.59.1)(vite@8.0.9(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.10))(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.3))(vitest@4.1.5)
@@ -5808,8 +5808,8 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@9.2.0':
+  '@vector-im/compound-web@9.2.1':
-    resolution: {integrity: sha512-jHbABGEQ2yqNtm5xRIkklQs198VEfSk9AJQolI+e4WSJ0xg8Ozyv9t9KIuKQAmjdSV9aow5G6hDE861XB6DQgw==}
+    resolution: {integrity: sha512-n4OJYGI+V+7gT5/gZUeFJRPqAnirvhXKvAYaHq42Ruq5hdVlQsmV6/VMhTqrPntP8/y9ZcT0DneTCUMyI6htBg==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -18530,7 +18530,7 @@ snapshots:
       '@types/react': 19.2.14
       react: 19.2.5
 
-  '@vector-im/compound-web@9.2.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
+  '@vector-im/compound-web@9.2.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)':
     dependencies:
       '@floating-ui/react': 0.27.17(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
       '@fontsource/inconsolata': 5.2.8

pnpm-workspace.yaml

@@ -17,7 +17,7 @@ catalog:
     "playwright-core": 1.59.1
     # Compound
     "@vector-im/compound-design-tokens": 10.1.0
-    "@vector-im/compound-web": 9.2.0
+    "@vector-im/compound-web": 9.2.1
     # i18n
     matrix-web-i18n: 3.6.0
     # fonts