Migrate product Buttons from shared to compass-ui (#38903)

* Migrate modal and save-panel Buttons from shared to compass-ui

Continue the leaf-first Button migration by moving GenericModal,
standalone modal leaves, SaveChangesPanel/SaveButton, SpinnerButton,
and the component library demo onto @mattermost/compass-ui Button.
Replace confirmButtonVariant with a destructive boolean on ConfirmModal
and GenericModal, and update agent/style docs to prefer compass-ui for
new and migrated call sites.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix modal footer button spacing after compass-ui migration

Replace Bootstrap .btn+.btn margin with flex gap on .modal-footer so
compass-ui Buttons keep the 8px horizontal spacing. Drop the redundant
ChannelNotificationModal nested footer so buttons are direct flex children.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Neutralize Bootstrap clearfix on flex modal footers

Bootstrap 3 ::before/::after clearfix pseudos were participating in
.modal-footer flex layout and adding extra 8px gap spacing. Hide them
so only real footer buttons receive the gap.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix multi-select Go button spacing after compass-ui migration

Use flex gap on .multi-select__container instead of Bootstrap .btn
margin-left so the search field and Go button keep an 8px gap when
SaveButton uses compass-ui Button without the .btn class.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate InvitationModal footer Buttons to compass-ui

InvitationModal views were skipped in the Phase 2 modal migration
because their filenames do not contain "modal". Move Copy invite
link, Invite, Invite More, and Done buttons onto compass-ui Button,
and drop the redundant InviteView footer .btn font-weight override
(compass Button already uses semibold).

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Restore 8px gap between Cancel/Save in floating SaveChangesPanel

Compass-ui Buttons no longer get Bootstrap .btn + .btn margins; add
gap: 8px on the flex button container instead.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate Browse Channels Create New Channel Button to compass-ui

Replace the shared Button in the Browse Channels modal header (and shared
empty-state helper) with @mattermost/compass-ui Button. Header CTA uses
small size and tertiary emphasis; empty-state keeps primary/medium.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Change modal header secondary Buttons to tertiary

Update User Groups Create Group and View User Group header CTAs
(Add people / Restore Group) from emphasis secondary to tertiary.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix admin save bar Cancel to compass-ui tertiary Button

Cancel with cancelLink was still a BlockableLink using shared
buttonClassNames (quaternary), so it did not match Save and misaligned.
Use compass-ui Button emphasis=tertiary for both cancel paths, preserve
unsaved-changes deferral via deferNavigation + getHistory, and align
controls with flex gap on .admin-console-save.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate backstage-form footer Buttons to compass-ui

Replace Cancel/Done Links styled with buttonClassNames (.btn) with
@mattermost/compass-ui Button in integrations and emoji backstage
form footers. Add flex gap: 8px on .backstage-form__footer so Cancel
and SpinnerButton keep 8px spacing without Bootstrap .btn+.btn margins.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Remove redundant admin save-bar button style overrides

Save and Cancel in .admin-console-save are compass-ui Buttons, so the
legacy .save-button / .cancel-button height, color, and hover overrides
no longer apply. Keep flex/gap bar chrome and error-message styles; drop
the dead IP Filtering .btn.btn-primary:disabled override as well.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix component library Button demo to use compass-ui icon slots

Pass selected glyphs via leadingIcon/trailingIcon with compass-ui Icon
instead of rendering font icons as Button children.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix all admin save-bar Cancel buttons to compass-ui tertiary

Prior SaveChangesPanel-only fix left many .admin-console-save footers
using BlockableLink + shared buttonClassNames (btn-tertiary/quaternary
on <a>). Rewrite unused BlockableButton as a compass-ui Button with
navigation blocking, use it for cancelLink and every remaining save-bar
Cancel, and migrate system_user_detail Cancel/Buttons to compass-ui.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Restore 8px gap between AdminUserCard footer buttons

Compass-ui Buttons no longer get Bootstrap .btn + .btn margins; add
gap: 8px on the AdminUserCard__footer flex container instead.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate remaining admin_console Buttons to compass-ui

Move in-page admin console Button call sites from @mattermost/shared
onto @mattermost/compass-ui, remapping sizes (xs/sm/md/lg →
x-small/small/medium/large) and destructive/inverted variants.
Convert clear buttonClassNames CTAs that are real buttons, and retarget
SCSS that depended on Bootstrap .btn / .btn+.btn spacing to flex gap
and custom class selectors.

Leave link-styled navigation, menu triggers, and ToggleModalButton
buttonClassNames for a later wave.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix admin_console Button migration follow-ups

Repair a corrupted logs.tsx import left by the bulk rewrite, update
graph_values tests for compass-ui emphasis class names, and refresh
admin_console snapshots after the Button migration.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate Section C Button icon children to leadingIcon slots

Wire compass-ui Button iconography through leadingIcon + Icon glyph
instead of nested font-icon children, and migrate remaining Section C
admin call sites from shared Button with size/destructive updates.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update Section C snapshots and drop obsolete button icon SCSS

Refresh Jest snapshots for leadingIcon wiring and remove unused
.btn-primary .icon overrides that no longer apply to compass-ui Button.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate ToggleModalButton CTAs from buttonClassNames to compass-ui

Add optional emphasis/size props so button-looking ToggleModalButton
shells render compass-ui Button, and update admin + channel intro CTAs.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate StartTrialBtn and AD/LDAP banner CTAs to compass-ui Button

Replace buttonClassNames / anchor shells with compass-ui Button, and use
inverted link emphasis for the AD/LDAP upsell banner on colored chrome.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate Bootstrap .btn modal and toast CTAs to compass-ui Button

Convert leave-channel, mark-all-as-read, feature toast, and revoke
non-compliant tokens action buttons; keep footer gap at 8px.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update snapshots for compass-ui buttonClassNames CTA migrations

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix ESLint import/order, unused JSX, and indent in compass-ui button migration

Reorder @mattermost/compass-ui imports before @mattermost/components, fix
import group blank lines, remove unused JSX type import, and correct
jsx-indent-props on channel access rules confirm modal.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix Admin Console Logs banner button spacing

Add flex gap between Reload Logs and Download Logs after the
compass-ui Button migration removed Bootstrap .btn+.btn margins.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate Edition and License Contact Sales CTA to compass-ui Button

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix New attribute button icon alignment via leadingIcon

Use compass-ui Icon + leadingIcon instead of nesting PlusIcon in
Button children so the header CTA matches the Section C icon-slot
pattern and aligns correctly with the label.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix stylelint order/properties-order in multi-select and backstage SCSS

Reorder padding before gap and overflow before justify-content to satisfy
stylelint-config-idiomatic-order in the compass-ui button migration styles.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update denim theme linkColor to #1c58d9

Align denim linkColor with the Compass primary button blue and refresh the custom theme chooser snapshot.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix check-types and button test assertions for compass-ui migration

- Use undefined instead of null for onNavigationConfirmed mock state
- Wrap Filters Button so Floating UI can set a reference without relying on unsupported Button ref typing
- Update new_channel_modal and permission scheme tests to query compass-ui button markup

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix Playwright selectors after compass-ui Button migration

Replace Bootstrap btn/btn-tertiary/btn-primary class selectors with
role+name and GenericModal classes, and update Cancel from link to
button where SaveChangesPanel/BlockableButton now renders a button.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix TypeScript errors and e2e selectors for compass-ui Button

Replace null onNavigationConfirmed mocks with undefined, wrap the
system users Filters Button for Floating UI refs, and update Playwright
Cancel selectors to target role=button instead of Bootstrap link/btn classes.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix Cypress selectors broken by compass-ui Button migration

Update enterprise e2e specs that still targeted Bootstrap btn-* classes
or disabled classes on compass-ui label spans. Prefer GenericModal__button,
role+name, and the button disabled attribute instead.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update Jest snapshots for compass-ui Button markup

Refresh failing channels snapshots that still expected Bootstrap btn*
classes, and close the graph-attribute menu before asserting Create
channel so getByRole is not blocked by floating focus aria-hiding.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix webapp package-lock for dual compass-ui versions

Regenerate package-lock.json so root keeps @mattermost/compass-ui
0.1.0-alpha.10 as a peer while channels nests 0.1.0-alpha.13, matching
what npm from .nvmrc produces after the master merge.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Use default medium size for SaveChangesPanel buttons

Drop the explicit small size on Reset/Save so compass-ui Button
uses its medium default in channel settings and other modal panels.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Adjust SaveChangesPanel message spacing

Co-authored-by: Cursor <cursoragent@cursor.com>

* Use Compass button loading spinner and migrate settings Cancel buttons

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix nested button-in-link markup, migrate emoji buttons, drop clipping overflow

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix import order lint, keep a11y--focused class, hide ring on Compass buttons

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix stylelint property order in SaveChangesPanel SCSS

Reorder padding/margin/color/gap so check-lint order/properties-order
passes after the SaveChangesPanel message spacing tweak.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update Jest snapshots for compass-ui Button markup

Regenerate channels component snapshots after migrating shared Button
to @mattermost/compass-ui so CI shards pass again.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Retrigger CI after flaky demo_dialog_date Playwright failure

Snapshot-only commit 3a255e0 left product code unchanged from the prior
green Playwright run; demo plugin date dialog submit returned a transient
Action integration error.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Move Compass button a11y focus override to double-borders PR

Suppressing the webapp a11y--focused ring on Compass Buttons belongs
with the other Compass double-border fixes, not this Button migration.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Align @mattermost/compass-ui to 0.1.0-alpha.14

Bump root, channels, and components peer pins from the split
alpha.10/alpha.13 setup to a single alpha.14 and refresh the lockfile.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Target MultiSelect Go button via explicit multi-select__go class

Replace the generic > button height rule with a stable extraClasses
hook on SaveButton so Compass Button styling stays explicit.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update MultiSelect consumer snapshots for multi-select__go class

Adding the explicit multi-select__go class to the MultiSelect Go
SaveButton required regenerating snapshots in downstream modals.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Bump @mattermost/compass-ui to 0.1.0-alpha.15

Pick up Button asChild support so navigational CTAs can stay real
links while using Compass Button styles.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Restore navigational Buttons as real links via asChild

Use Compass Button asChild around Link for integrations Cancel/Done,
backstage Add, emoji Add/Cancel, and marketplace Configure so
middle-click and open-in-new-tab work again.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Restore admin Cancel as BlockableLink via Button asChild

Replace BlockableButton with Compass Button asChild wrapping
BlockableLink so unsaved-changes blocking and real link navigation
both work. Delete the temporary blockable_button helper.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate remaining shared Button usages to compass-ui Button

Replace @mattermost/shared Button consumers with
@mattermost/compass-ui/components/button, mapping size/variant props.
Remove the shared Button component and keep buttonClassNames for menu
triggers. Update webapp agent and style guidance accordingly.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate file upload and integration message buttons to Compass Button

Replace add_bot/setting_picture btn-file overlays with Compass Button plus
hidden file input, and migrate block_renderer/action_button to Compass Button
(size small, primary/tertiary/destructive, loading).

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Migrate remaining plain btn text buttons to Compass UI Button

Convert GenericModal footers, download/report CTAs, link-style actions,
and styled.button.attrs wrappers to @mattermost/compass-ui Button with
mapped emphasis/size/destructive props. Keep local classNames such as
GenericModal__button. Skip icon-only and Toggle cases.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update snapshots and loading assertions for Compass Button migration

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update snapshots after Compass Button plain-btn migration

Refresh get_link_modal, openid_convert, and user_settings_notifications
snapshots for compass-ui Button markup.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Wrap remaining link CTAs with Compass Button asChild

Convert Link/ExternalLink/BlockableLink sites that still used
buttonClassNames into Compass Button asChild wrappers so they keep
real navigation while using compass-ui button styling.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix focus selectors and SCSS after Compass Button migration

Update SettingItemMax to find focusable controls without Bootstrap
.btn classes, mark _buttons.scss as plugin-compat deprecated, and
retarget component SCSS that still assumed .btn / .btn-tertiary.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix broken BlockableLink JSX in admin Cancel buttons

Restore missing BlockableLink closing tags and remove stray Cancel
string literals left by an earlier rewrite.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Use medium Compass Button size for mm_blocks with 8px 16px padding

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix styled(Button) interop for Compass UI Button

Webpack may resolve @mattermost/compass-ui/components/button to
Button.js (default-only) instead of index.js (named Button). Add a
small namespace-import helper with default fallback and use it at
styled(Button) call sites to avoid styled-components error #1.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix attachment action WithTooltip crash from Compass Button import interop

Stop wrapping Compass Button with styled-components in ActionButton (use
style/loading props instead), route ButtonElement through the Button interop
helper, and alias the compass-ui button entry to the named-export index so
WithTooltip no longer receives an undefined child type.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Harden Compass Button interop helper typing

Prefer typeof NamedButton for the exported Button and ensure
classification_markings_styled ends with a newline for lint.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Restore shared Button component for plugin loadSharedDependency consumers.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Stop styling Compass Button and re-export shared Button for plugins.

Replace styled(CompassButton) with prop/style wrappers, drop the interop helper and webpack alias, and restore the shared Button export so Playbooks loadSharedDependency keeps working.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Set --button-fg so mm-blocks and attachment button text colors work with Compass Button.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix ESLint import order and JSX indentation after Compass Button migration.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Migrate marketplace Install/Try Again buttons to Compass UI Button with loading.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Restore MultiSelect Avatar size sm so selected-user chips are not oversized.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Migrate remaining admin console CTAs to Compass Button and fix always-expanded card height.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix prefer-arrow-callback on Compass Button menu triggers.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix check-types and TourTip test fallout from Compass Button migration.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix unused _className lint on Compass Button menu triggers.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix Web App CI snapshot and assertion drift for compass-ui Button.

Refresh Jest snapshots for alpha.15 CSS-module hashes, assert emoji Add
CTA as a link, and locate new-channel URL Edit via closest button.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix remaining channels shard-1 Compass Button test fallout.

Assert SaveChangesPanel Cancel as a link, drop Bootstrap btn class
checks on AdminPanelWithButton, query archive via accessible name, and
refresh leftover Button snapshots.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Update send_test_notification_notice snapshot for Compass Button.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix E2E selectors for Compass Button asChild links and classes.

Revert Cancel/Configure queries to role=link where Button asChild
renders anchors, and replace Bootstrap btn-* lookups with role or
container-scoped button selectors.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Use profile-popover container button selector in CRT E2E.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix Compass Button migration review regressions (#39210)

* Fix Compass Button migration regressions from review findings.

Restore link emphasis, Floating UI refs on Button, Team Edition link
scoping, setting autofocus/Enter-submit guards, OpenID convert styling,
action-button hover tints, GenericModal confirmButtonVariant alias, and
remove-policy icon chrome.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Add 8px Compass spacing gap between SectionNotice actions.

Use var(--spacing-s, 8px) on .sectionNoticeActions so button/action
rows have consistent spacing after the Compass Button migration.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix remove-license control to use destructive link emphasis.

Default primary+destructive painted white --button-fg while SCSS
cleared the red fill. Use emphasis='link' so Compass sets error-text
label color, and keep only layout margin in SCSS.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Revert remove-policy icon Compass Button tweaks.

Leave channel membership policy remove/edit icon controls alone;
those will move to icon buttons separately.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Use a plain button for channel policy remove icon.

Keep this control out of Compass Button; it will become an icon
button later, matching the team membership policy remove control.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix wrap-regex lint in SettingItemMax emphasis checks.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

* Restore peer marker on compass-ui in package-lock.json.

Merge conflict resolution dropped "peer": true; regenerating the
lockfile with npm puts it back and satisfies the CI lockfile check.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix unresolved conflict markers from master merge.

Keep Compass Button/icons in system_user_detail and both add_bot
fileInputRef plus master's submitting/unmounted guards.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* fix unused compass icon imports in system_user_detail

Remove SyncIcon, PowerPlugOutlineIcon, CheckIcon, and ChevronDownIcon
imports left over from a merge conflict so check-lint (no-unused-vars) passes.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Restore SettingItemMax autofocus for react-select controls.

Compass Button migration autofocus dropped [tabindex] matching, so Edit on
settings like Number of direct messages no longer focused the select and
broke the Playwright aria snapshot. Prefer form controls including tabindex
again while still skipping footer Save/Cancel.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix SettingItemMax focus and language Space-to-open after Compass Button migration.

Restore [tabindex] targeting so react-select receives Edit→expand focus (Compass
Save/Cancel no longer match .btn), and open the controlled language menu on Space
as well as Enter so MM-T1485 keyboard a11y still works.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Open controlled language menu on Space as well as Enter.

SettingItemMax autofocus for react-select was restored separately; this makes
ManageLanguage's controlled menuIsOpen open on Space so MM-T1485 keyboard a11y
still expands the dropdown after the Compass Button migration.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Fix ESLint import/order and lines-around-comment in PR files.

Reorder setting_item_max test imports and add a blank line before the
manage_languages keyboard handler comment so check-lint passes.

Co-authored-by: Matthew Birtch <mattbirtch@gmail.com>

* Address review feedback on the compass-ui Button migration.

Most of these share a root cause: legacy SCSS targets Bootstrap hooks
(.btn, .btn-primary, .btn-tertiary, .btn-success) that the Compass Button
no longer emits, and `color` no longer reaches the label because Compass
reads --button-fg.

Fixes:

- Browse Channels: the Withdraw request button was hidden and out of the
  tab order, because browse_channels.scss only revealed .primaryButton,
  .outlineButton and .btn-tertiary on row hover. Give it a class and add
  that to the reveal rule.
- tour_tip: move the Next/Previous overrides off .btn-primary /
  .btn-tertiary and onto the Compass buttons, so they stop rendering
  blue-on-blue and link-coloured-on-blue on the tip box.
- appearance='inverted' resolves to --sidebar-text, which goes dark on
  Quartz. Drop it from the tour tip opt-out and the AD/LDAP banner CTAs
  and drive --button-fg from the container instead.
- Use --button-fg rather than `color` for the save panel error state, the
  user detail pager arrows, the jobs table row hover and the url_input
  Edit link.
- url_input: .url-input-button.btn no longer matched. Drop .btn, and
  write the rule out rather than via mixins.link, whose `color` and
  `font-size` would not have reached the label either.
- hierarchical_value_menu: Retry becomes emphasis='link' instead of a
  tertiary pill with a dead &__retry.btn override.
- GetLinkModal: btn-success no longer turns the Copied state green; use a
  local class. Drop the inert pull-left.
- _modal.scss: reset Bootstrap's `.btn + .btn` margin so it stops
  stacking on the new gap in footers that still hold Bootstrap buttons.
- Admin filter: restore the open state and add aria-expanded.
- AdminPanelWithButton takes a `destructive` prop, passed by the channel
  membership policy panel so Remove all is red again.
- Move icons from children into leadingIcon/trailingIcon so the Button's
  gap applies.
- SaveChangesPanel: restore size='small' (the panel had grown from 58px
  to 66px) and drop the dead btn-force-disabled.
- Size the notifications and channel invite links so their labels match
  the copy they sit in.

Two notes. In company_info_display the `color` override was already dead
on master, where .btn-primary set `color: ... !important`, so it is
removed rather than converted -- converting it would have made the label
blue on a blue button. And the classification attribute's trailing icon
takes the raw glyph rather than <Icon>, because <Icon> renders divs and
that button sits inside a <p>.

Also migrates the Reload, Download and Wrap text buttons in the rewritten
system console logs view, which master expressed as Bootstrap buttons.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Fix regressions found testing the Compass Button review fixes.

Mostly the same root cause as the review itself: rules written against
Bootstrap hooks that the Compass Button no longer matches.

- Browse Channels: Withdraw was visible on hover but still unreachable by
  keyboard. visibility: hidden takes a control out of the tab order, so the
  button could never be focused to reveal itself. Row actions now hide with
  opacity and reveal on their own :focus-visible; pointer-events stops an
  invisible button swallowing row clicks.

- Tour tip: restore the 8px between Previous and Next, which came from the
  global `.btn + .btn` rule in _buttons.scss, and pin the buttons to
  master's fixed 32px box so the labels sit where they used to.

- Tour tip opt-out: the --button-fg override has to sit on the button, not
  the container. Compass declares --button-fg on the element itself, which
  beats anything inherited, so the link stayed link-coloured.

- Announcement bar CTA: .btn.btn-tertiary.btn-xs.btn-inverted no longer
  matches, so the warning bar lost its dark-on-gold text and inherited
  white from appearance='inverted'. The CTA carries a class now.

- Jobs table: Compass quaternary is already --link-color, so View details
  was blue at rest and the row hover changed nothing. Muted at rest again.

- Filters: the held-open state needs to beat Compass's own :hover rule,
  which has the same specificity, and clear the 8% resting tertiary tint to
  read as a state at all. The Users list uses a different trigger entirely
  (floating-ui, via useRole) and never had the state -- it does now.

- Modal footers: scope the `.btn + .btn` margin reset to direct children.
  Buttons nested in a wrapper are not flex items, get no gap, and still
  need Bootstrap's margin -- the broad selector left them touching.

- Review license changes modal: its footer is .content-footer, not
  .modal-footer, so it never picked up the gap either.

- Notifications "Learn more": the icon was inside the label span, where the
  Button's gap does not apply. Moved to leadingIcon, and the button is now
  quaternary small.

- Revert the user detail team list pager to the shared Button. Those are
  icon-only controls and become IconButton in a later pass.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Fix tour tip button alignment by using Compass icon slots.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix rewrite menu icons and restore button gaps lost with Bootstrap.

The rewrite feature's Stop generating, Discard and Regenerate buttons
passed their icons as children, which puts them inside .button__label
where the Button's gap does not apply, so they sat on the text baseline
instead of centred. All six call sites (menu and inline variants) now use
leadingIcon with Icon-wrapped glyphs.

Also restores spacing in three containers that relied on the global
`.btn + .btn` margin in _buttons.scss, which the Compass buttons no longer
match: the cloud preview modal's navigation buttons, the terms of service
agree/disagree pair, and the rewrite menu footer.

While in the rewrite footer, its `.btn-quaternary` override was dead too,
so Regenerate had lost its muted grey treatment and was rendering as a
transparent link-coloured button. Reinstated against a class, through
--button-fg.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Restore the peer marker npm generates for compass-ui in the lockfile.

I dropped "peer": true from the node_modules/@mattermost/compass-ui entry
while resolving the merge, on the reasoning that compass-ui is now a direct
dependency of the root manifest. npm still resolves it as a peer, through
@mattermost/components' peerDependencies, so a regenerated lockfile puts
the marker back and check-lockfile fails on the difference.

This is exactly the case that job exists for: `npm ci` accepts a lockfile
with the peer markers stripped, so only regenerating and diffing catches
it. Produced with `npm install --package-lock-only`, which is what CI runs
and which leaves node_modules alone.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Use a standard Compass leading icon for the notifications learn-more link.

The lightbulb was a bare compass-icons glyph carrying a `circular-border`
class, which drew an 18px tinted circle behind it. Pass it through Icon
instead, so it picks up the size the Button's slot provides (12px at
size='small') and renders like every other leading icon.

`circular-border` had exactly one caller, so its rule in
setting_desktop_header.scss goes with it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Restore the Compass focus ring and master's modal footer spacing.

**Focus ring.** Keyboard focus on a Compass button showed no ring. The
webapp has a global `*:focus { outline: none }` in base/_structure.scss,
and Compass's :focus-visible rule overrides only outline-color and
outline-offset -- never outline-style -- so the reset wins and nothing
paints. _modifiers.scss already suppresses our own a11y--focused
box-shadow on Compass controls on the grounds that "Compass draws its own
focus ring", so those controls were left with no indicator at all.

Restoring outline-style and width at that same seam keeps the blast
radius to Compass controls. Narrowing the global reset to
`*:focus:not(:focus-visible)` would also work and is arguably where this
belongs, but it re-enables native rings app-wide on top of the
a11y--focused box-shadow, which deserves its own PR.

Measured in Chromium: solid 2px with the reset still in place, and no
doubled box-shadow.

**Modal footers.** Playbooks modals had 5px between footer buttons. I had
scoped the margin reset to direct children, which left buttons nested in
a wrapper falling back to Bootstrap's own `.modal-footer .btn + .btn`
margin of 5px (bootstrap.css:6033). Master overrode that to 8px for every
descendant; do the same, and keep zeroing it for direct children, which
are flex items and already have the gap.

Both cases now measure 8px, matching master exactly -- the descendant
rule has the same reach and value master's had, so it cannot introduce a
doubling that master did not already have.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Drop two dead .btn + .btn resets.

Both containers set their own gap and used `.btn + .btn { margin-left: 0 }`
to cancel the extra 8px the global rule in _buttons.scss would otherwise
stack on top. Both now render Compass buttons, which never carry .btn, so
there is nothing left to cancel and the gap applies on its own.

No visual change -- these only ever removed spacing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Fix remaining icon, spacing and focus-ring issues from the broad sweep.

- Archive channel button: .btn-danger no longer matches (destructive is a
  prop now), so the button stretched to fill its column flex container.
  Retarget the rule at the button's id.
- Permissions policy tab: Add rule's plus icon was a child, landing in the
  label span where the Button's gap does not apply. Moved to leadingIcon
  and deleted its override block -- padding, gap and icon sizing were all
  fighting what Compass already provides for a medium button with a
  leading icon.
- Team creation Next button: the chevron was baked into the buttonText
  fragment passed down from create_team_form, so it rendered inside the
  label rather than the trailing slot. Added a buttonTrailingIcon prop
  threaded through DisplayNameStep.
- signup-team__container: the Compass focus ring (3px offset, 2px wide)
  was clipped by this container's overflow: hidden, which is load-bearing
  -- it stops .terms-of-service__markdown (min-width: 100vw) from blowing
  the page out horizontally. Added an 8px gutter and widened max-width by
  16px to compensate, since box-sizing is border-box globally. Shared by
  password reset, MFA setup, Select Team and Terms of Service.
- get-app__buttons (the "Where would you like to view this?" landing
  page): was not flex and had no gap, so the two buttons touched once the
  global `.btn + .btn` margin stopped applying.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Add the 8px gap between interactive dialog footer buttons.

Cancel and the submit buttons weren't direct children of .modal-footer --
they sat inside a single unstyled wrapper div alongside the error text, so
.modal-footer's own gap never reached them, and neither Button nor
SpinnerButton carries .btn for the descendant margin rule to match either.

Split the wrapper into apps-form-footer (column: error text, then the
button row) and apps-form-footer__buttons (the row itself), both using
--spacing-xs for the gap.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Migrate InlineActionButton to the Compass Button (tertiary, x-small).

Deliberately not using the Button's own `loading` prop: it forces native
`disabled`, which would drop the deliberate aria-disabled + aria-busy
pattern this component uses to stay focusable and announced to screen
readers while an action is in flight (see the existing test "button uses
aria-disabled (not native disabled) while executing"). Those two
attributes pass through Button's prop spread unchanged, and the spinner
swap still comes from LoadingWrapper around the children, so the a11y
behavior and the executingRef double-click guard are untouched -- only
the rendering primitive changed.

Dropped the hand-rolled pill styling (border, custom background, custom
hover color) in favor of what tertiary already provides; kept the
--executing opacity modifier since the control stays enabled (no native
disabled to dim it).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Migrate secure connections and log row copy/add buttons to Compass Button.

Fixes icons passed as raw children instead of leadingIcon/trailingIcon
(secure connection detail, invite modal copy buttons, logs Copy JSON/
Copy log line), migrates the Add a connection and row kebab menu
triggers off legacy buttonClassNames, and swaps the invite modal's
negative-margin hack for align-self/spacing-token based positioning.

* Update stale aria-snapshot for Notifications settings panel.

The Compass Button migration changed how the panel's "Edit" row
buttons expose their accessible name/structure (status text like
"On"/"None" now renders as separate text nodes, and the "Learn
more" link icon is aria-hidden), so the hardcoded snapshot baseline
no longer matched. Regenerated against the CI build image and
reconciled the user-specific literals back to their template
expressions.

* Use Button's native loading prop instead of LoadingSpinner children

Several Compass Button instances rendered LoadingSpinner as a child/icon
instead of using Button's own loading state, which would otherwise
double up once LoadingSpinner itself renders the Compass spinner.
Adds an isConfirmLoading prop to GenericModal so its internal confirm
button can use the same pattern.

* Fix remaining Button+LoadingSpinner instances missed in prior pass

searchable_channel_list.tsx (Join/Request to join/Withdraw) and
button_binding.tsx both swapped children for a legacy LoadingWrapper
spinner instead of using Button's native loading prop.

* Update tests and snapshots for Button's native loading spinner

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Matthew Birtch <2040554+matthewbirtch@users.noreply.github.com>
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-authored-by: mattermost-code <matty-code@mattermost.com>
Co-authored-by: maria.nunez <maria.nunez@mattermost.com>

e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_account_settings_spec.js

@@ -176,13 +176,20 @@ describe('Verify Accessibility Support in different sections in Settings and Pro
         cy.get('#changeInterfaceLanguageLabel').should('be.visible').and('have.text', 'Change interface language');
 
         // # When space key is pressed on dropdown, it should expand and should collapse when esc key is pressed
-        cy.get('@inputEl').typeWithForce(' ');
-        cy.findByRole('listbox').should('have.class', 'react-select__menu-list').as('listBox');
+        // Menu is portaled to document.body (outside the aria-modal dialog), so query by class
+        // and assert role=listbox rather than findByRole (inaccessible outside the modal).
+        cy.get('@inputEl').focus().typeWithForce(' ');
+        cy.get('.react-select__menu-list').
+            should('be.visible').
+            and('have.attr', 'role', 'listbox').
+            and('have.class', 'react-select__menu-list').
+            as('listBox');
         cy.get('@inputEl').typeWithForce('{esc}');
         cy.get('@listBox').should('not.exist');
 
         // # Press down arrow twice and check aria label
-        cy.get('@inputEl').typeWithForce(' ');
+        cy.get('@inputEl').focus().typeWithForce(' ');
+        cy.get('.react-select__menu-list').should('be.visible');
         cy.get('@inputEl').typeWithForce('{downarrow}{downarrow}');
         cy.get('#displayLanguage').within(($el) => {
             cy.wrap($el).findByRole('log').should('have.attr', 'aria-live', 'assertive').as('ariaEl');
@@ -276,7 +283,7 @@ describe('Verify Accessibility Support in different sections in Settings and Pro
         // * Check Tab behavior in MFA section
         cy.get('#mfaEdit').click();
         cy.get('#passwordEdit').focus().tab({shift: true}).tab().tab();
-        cy.get('.setting-list button.btn').should('have.class', 'a11y--active a11y--focused').tab();
+        cy.get('.setting-list').findByRole('button', {name: /Add|Remove/i}).should('have.class', 'a11y--active a11y--focused').tab();
         cy.get('#cancelSetting').should('have.class', 'a11y--active a11y--focused');
 
         // * Check Tab behavior in Sign-In Method if its available
@@ -284,7 +291,7 @@ describe('Verify Accessibility Support in different sections in Settings and Pro
             if (el.find('#signinEdit').length) {
                 cy.get('#signinEdit').click();
                 cy.get('#mfaEdit').focus().tab({shift: true}).tab().tab();
-                cy.get('.setting-list a.btn').should('have.class', 'a11y--active a11y--focused').tab();
+                cy.get('.setting-list').findByRole('link').should('have.class', 'a11y--active a11y--focused').tab();
                 cy.get('#cancelSetting').should('have.class', 'a11y--active a11y--focused');
             }
         });

e2e-tests/cypress/tests/integration/channels/collapsed_reply_threads/replies_spec.ts

@@ -145,7 +145,7 @@ describe('Collapsed Reply Threads', () => {
         cy.uiGetPostThreadFooter(postForAvatar.id).find('.Avatars').find('button').first().click();
 
         // * Profile popover should be visible and close on ESC
-        cy.get('div.user-profile-popover').first().should('be.visible').find('button.btn-primary.btn-sm').type('{esc}');
+        cy.get('div.user-profile-popover').first().should('be.visible').find('.user-popover__bottom-row-container button').type('{esc}');
 
         // # Visit global threads
         cy.uiClickSidebarItem('threads');
@@ -153,8 +153,8 @@ describe('Collapsed Reply Threads', () => {
         // * Find the first avatar and click it
         cy.get('div.ThreadItem').find('.activity').find('.Avatars').find('button').first().click();
 
-        // * Profile popover should be visible and close on ESC
-        cy.get('div.user-profile-popover').first().should('be.visible').find('button.btn-primary.btn-sm');
+        // * Profile popover should be visible
+        cy.get('div.user-profile-popover').first().should('be.visible').find('.user-popover__bottom-row-container button');
     });
 
     it('MM-T4143 Emoji reaction - type +:+1:', () => {

e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_1_1_spec.ts

@@ -55,7 +55,7 @@ describe('Custom emojis', () => {
         cy.uiOpenCustomEmoji();
 
         // # Click on add custom emoji
-        cy.findByRole('button', {name: 'Add Custom Emoji'}).should('be.visible').click();
+        cy.findByRole('link', {name: 'Add Custom Emoji'}).should('be.visible').click();
 
         // # Type emoji name
         cy.get('#name').type(customEmojiWithColons);
@@ -122,5 +122,5 @@ function saveCustomEmoji(teamName: string) {
 
     // * Should return to list of custom emojis
     cy.url().should('include', `${teamName}/emoji`);
-    cy.findByRole('button', {name: 'Add Custom Emoji'}).should('be.visible');
+    cy.findByRole('link', {name: 'Add Custom Emoji'}).should('be.visible');
 }

e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_1_spec.ts

@@ -105,7 +105,7 @@ describe('Custom emojis', () => {
         cy.uiOpenCustomEmoji();
 
         // # Click on add custom emoji
-        cy.findByRole('button', {name: 'Add Custom Emoji'}).should('be.visible').click();
+        cy.findByRole('link', {name: 'Add Custom Emoji'}).should('be.visible').click();
 
         // # Type emoji name
         cy.get('#name').should('be.visible').type(customEmojiWithColons);
@@ -180,5 +180,5 @@ function saveCustomEmoji(teamName: string) {
 
     // * Should return to list of custom emojis
     cy.url().should('include', `${teamName}/emoji`);
-    cy.findByRole('button', {name: 'Add Custom Emoji'}).should('be.visible');
+    cy.findByRole('link', {name: 'Add Custom Emoji'}).should('be.visible');
 }

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_invitation_ui_more_spec.ts

@@ -136,7 +136,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
             // * Update email outside whitelisted domain and verify error message
             cy.get('#resetEmailModal').should('be.visible').within(() => {
                 cy.get('input[type="email"]').type(email);
-                cy.get('button.btn-primary.confirm').click();
+                cy.get('button.GenericModal__button.confirm').click();
                 cy.get('.error').should('be.visible').and('have.text', 'The email you provided does not belong to an accepted domain for guest accounts. Please contact your administrator or sign up with a different email.');
                 cy.get('.close').click();
             });

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/system_console_manage_guest_spec.ts

@@ -87,7 +87,7 @@ describe('Guest Account - Verify Manage Guest Users', () => {
         const email = `temp-${getRandomId()}@mattermost.com`;
         cy.get('#resetEmailModal').should('be.visible').within(() => {
             cy.get('input[type="email"]').type(email);
-            cy.get('button.btn-primary.confirm').click();
+            cy.get('button.GenericModal__button.confirm').click();
         });
 
         // * Verify if Guest's email was updated

e2e-tests/cypress/tests/integration/channels/enterprise/system_console/archived_channels_spec.js

@@ -62,7 +62,7 @@ describe('Archived channels', () => {
         cy.visit(`/admin_console/user_management/channels/${testChannel.id}`);
 
         // * Verify the Unarchive Channel button is visible
-        cy.get('button.btn-secondary', {timeout: TIMEOUTS.TWO_SEC}).should('have.text', 'Unarchive Channel').should('be.visible').should('be.enabled');
+        cy.findByRole('button', {name: 'Unarchive Channel', timeout: TIMEOUTS.TWO_SEC}).should('be.visible').should('be.enabled');
 
         // * Verify that only one widget is visible
         cy.get('div.AdminPanel').should('be.visible').and('have.length', 1);
@@ -73,10 +73,10 @@ describe('Archived channels', () => {
         cy.visit(`/admin_console/user_management/channels/${testChannel.id}`);
 
         // # Click Unarchive Channel button
-        cy.get('button.btn-secondary', {timeout: TIMEOUTS.TWO_SEC}).findAllByText('Unarchive Channel').click();
+        cy.findByRole('button', {name: 'Unarchive Channel', timeout: TIMEOUTS.TWO_SEC}).click();
 
         // * Verify the Archive Channel button is visible
-        cy.get('button.btn-secondary.btn-danger', {timeout: TIMEOUTS.TWO_SEC}).findAllByText('Archive Channel').should('be.visible');
+        cy.findByRole('button', {name: 'Archive Channel', timeout: TIMEOUTS.TWO_SEC}).should('be.visible');
 
         // * Verify that the other widget appears
         cy.get('div.AdminPanel').should('be.visible').should('have.length', 5);

e2e-tests/cypress/tests/integration/channels/integrations/custom_slash_commands/slash_commands_spec.js

@@ -155,7 +155,7 @@ describe('Slash commands page', () => {
         cy.get('#url').clear().type('http://mattermost.com');
 
         // # Click on Cancel
-        cy.get('a').contains('Cancel').click();
+        cy.findByRole('link', {name: 'Cancel'}).click();
 
         // # Click on edit again
         cy.get('a[href*="/edit"]').click();

e2e-tests/cypress/tests/integration/channels/interactive_dialog/file_upload_spec.js

@@ -76,7 +76,7 @@ describe('Interactive Dialog - File Upload', () => {
                     cy.get('label').should('be.visible').and('contain', singleElement.display_name);
 
                     // * Verify "Choose File" button for allow_multiple=false
-                    cy.get('button.btn-tertiary').should('be.visible').and('have.text', 'Choose File');
+                    cy.findByRole('button', {name: 'Choose File'}).should('be.visible');
 
                     // * Verify placeholder / help text is visible before any upload
                     cy.get('.help-text').should('be.visible');
@@ -87,7 +87,7 @@ describe('Interactive Dialog - File Upload', () => {
                     cy.get('label').should('be.visible').and('contain', multipleElement.display_name);
 
                     // * Verify "Choose Files" button for allow_multiple=true
-                    cy.get('button.btn-tertiary').should('be.visible').and('have.text', 'Choose Files');
+                    cy.findByRole('button', {name: 'Choose Files'}).should('be.visible');
 
                     // * Verify placeholder / help text is visible before any upload
                     cy.get('.help-text').should('be.visible');

e2e-tests/cypress/tests/integration/channels/message_forwarding/forward_message_from_dm_spec.js

@@ -191,8 +191,8 @@ describe('Forward Message', () => {
             // * Assert channel select is not existent
             cy.get('.forward-post__select').should('not.exist');
 
-            // * Assert if button is enabled
-            cy.get('.btn-tertiary').should('not.be.disabled');
+            // * Assert if cancel button is enabled
+            cy.findByRole('button', {name: 'Cancel'}).should('not.be.disabled');
 
             // * Assert Notification is shown
             cy.findByTestId('notification_forward_post').should('be.visible').should('contain.text', `This message is from a private conversation and can only be shared with ${dmChannel.display_name}`);
@@ -206,8 +206,8 @@ describe('Forward Message', () => {
             }
 
             if (cancel) {
-                // * Assert if button is active
-                cy.get('.btn-tertiary').should('not.be.disabled').type('{esc}', {force: true});
+                // * Assert if cancel button is active, then dismiss with escape
+                cy.findByRole('button', {name: 'Cancel'}).should('not.be.disabled').type('{esc}', {force: true});
             } else {
                 // * Assert if button is active
                 cy.get('.GenericModal__button.confirm').should('not.be.disabled').type('{enter}', {force: true});

e2e-tests/cypress/tests/integration/channels/message_forwarding/forward_message_from_private_channel_spec.js

@@ -188,8 +188,8 @@ describe('Forward Message', () => {
             cy.findByTestId('notification_forward_post').should('be.visible').should('contain.text', `This message is from a private channel and can only be shared with ~${privateChannel.display_name}`);
 
             if (cancel) {
-                // * Assert if button is active
-                cy.get('.btn-tertiary').should('not.be.disabled').click();
+                // * Assert if cancel button is active
+                cy.findByRole('button', {name: 'Cancel'}).should('not.be.disabled').click();
             } else {
                 // * Assert if button is active
                 cy.get('.GenericModal__button.confirm').should('not.be.disabled').click();

e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/existing_channel_name_spec.js

@@ -62,7 +62,7 @@ describe('Channel', () => {
             cy.get('.url-input-error').should('not.exist');
 
             // * 'Create Channel' button should be enabled
-            cy.findByText('Create channel').should('not.have.class', 'disabled');
+            cy.findByRole('button', {name: 'Create channel'}).should('not.be.disabled');
 
             // # Click on Cancel button to move out of New Channel Modal
             cy.findByText('Cancel').click();
@@ -92,7 +92,7 @@ function verifyExistingChannelError(newChannelName, makePrivate = false) {
     cy.get('.url-input-error').contains('A channel with that URL already exists');
 
     // * 'Create Channel' button should be disabled
-    cy.findByText('Create channel').should('have.class', 'disabled');
+    cy.findByRole('button', {name: 'Create channel'}).should('be.disabled');
 }
 
 /**

e2e-tests/cypress/tests/integration/channels/system_console/user_management/users_spec.js

@@ -70,7 +70,7 @@ describe('System Console > User Management > Users', () => {
 
         // # Type new password and submit.
         cy.get('input[type=password]').type('new' + testUser.password);
-        cy.get('button.btn-primary.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('button.GenericModal__button.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
 
         // # Log out.
         cy.apiLogout();
@@ -96,7 +96,7 @@ describe('System Console > User Management > Users', () => {
         cy.get('input[type=password]').eq(1).type('new' + otherAdmin.password);
 
         // # Click the 'Cancel' button.
-        cy.get('.modal-footer > .btn-tertiary').should('contain', 'Cancel').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('.modal-footer').findByRole('button', {name: 'Cancel'}).click().wait(TIMEOUTS.HALF_SEC);
 
         // # Log out.
         cy.apiLogout();
@@ -113,7 +113,7 @@ describe('System Console > User Management > Users', () => {
         cy.get('input[type=password]').eq(1).type('new' + otherAdmin.password);
 
         // # Click the 'Reset' button.
-        cy.get('button.btn-primary.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('button.GenericModal__button.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
 
         // * Verify the appropriate error is returned (current password error shows in modal header area).
         cy.get('.genericModalError .error').should('be.visible').
@@ -128,7 +128,7 @@ describe('System Console > User Management > Users', () => {
         cy.get('input[type=password]').eq(1).type('new');
 
         // # Click the 'Reset' button.
-        cy.get('button.btn-primary.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('button.GenericModal__button.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
 
         // * Verify the appropriate error is returned (new password error shows under the input).
         cy.get('.Input___error').should('be.visible').and('contain', 'characters long');
@@ -138,7 +138,7 @@ describe('System Console > User Management > Users', () => {
         searchUserAndOpenResetPassword(otherAdmin.username, otherAdmin.email);
 
         // # Click the 'Reset' button.
-        cy.get('button.btn-primary.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('button.GenericModal__button.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
 
         // * Verify the appropriate error is returned (current password missing).
         cy.get('.genericModalError .error').should('be.visible').
@@ -148,7 +148,7 @@ describe('System Console > User Management > Users', () => {
         cy.get('input[type=password]').eq(0).type(otherAdmin.password);
 
         // # Click the 'Reset' button.
-        cy.get('button.btn-primary.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('button.GenericModal__button.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
 
         // * Verify the appropriate error is returned (new password error shows under the input).
         cy.get('.Input___error').should('be.visible').and('contain', 'characters long');
@@ -162,7 +162,7 @@ describe('System Console > User Management > Users', () => {
         cy.get('input[type=password]').eq(1).type('new' + otherAdmin.password);
 
         // # Click the 'Reset' button.
-        cy.get('button.btn-primary.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('button.GenericModal__button.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
 
         // # Log out.
         cy.apiLogout();

e2e-tests/cypress/tests/integration/channels/system_console/user_management_spec.js

@@ -194,7 +194,7 @@ describe('User Management', () => {
 
             // # Set new password.
             cy.get('input[type=password]').type('new' + testUser.password);
-            cy.get('button.btn-primary.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
+            cy.get('button.GenericModal__button.confirm').should('contain', 'Reset').click().wait(TIMEOUTS.HALF_SEC);
 
             // * Verify Update email option is visible.
             cy.get('#systemUsersTable-cell-0_actionsColumn').click().wait(TIMEOUTS.HALF_SEC);
@@ -269,7 +269,7 @@ describe('User Management', () => {
         }
 
         // # Click the "Update" button.
-        cy.get('button.btn-primary.confirm').click();
+        cy.get('button.GenericModal__button.confirm').click();
 
         // * Check for the error messages, if any.
         if (errorMsg.length > 0) {

e2e-tests/playwright/lib/src/ui/components/channels/delete_post_confirmation_dialog.ts

@@ -13,7 +13,7 @@ export default class DeletePostConfirmationDialog {
     constructor(container: Locator) {
         this.container = container;
 
-        this.cancelButton = container.locator('button.btn.btn-tertiary');
+        this.cancelButton = container.getByRole('button', {name: 'Cancel'});
         this.confirmButton = container.locator('button#deletePostModalButton');
     }
 

e2e-tests/playwright/lib/src/ui/components/channels/marketplace_modal.ts

@@ -56,7 +56,7 @@ export default class MarketplaceModal {
         }
 
         await installButton.click();
-        await expect(this.pluginRow(pluginId).getByRole('button', {name: 'Configure'})).toBeVisible({
+        await expect(this.pluginRow(pluginId).getByRole('link', {name: 'Configure'})).toBeVisible({
             timeout: duration.one_min,
         });
 
@@ -67,6 +67,6 @@ export default class MarketplaceModal {
      * Clicks "Configure" for the given plugin, which navigates to its System Console settings page.
      */
     async clickConfigure(pluginId: string) {
-        await this.pluginRow(pluginId).getByRole('button', {name: 'Configure'}).click();
+        await this.pluginRow(pluginId).getByRole('link', {name: 'Configure'}).click();
     }
 }

e2e-tests/playwright/lib/src/ui/components/channels/restore_post_confirmation_dialog.ts

@@ -13,8 +13,8 @@ export default class RestorePostConfirmationDialog {
     constructor(container: Locator) {
         this.container = container;
 
-        this.cancelButton = container.locator('button.btn.btn-tertiary');
-        this.confirmButton = container.locator('button.GenericModal__button.btn.btn-primary.confirm');
+        this.cancelButton = container.getByRole('button', {name: 'Cancel'});
+        this.confirmButton = container.locator('button.GenericModal__button.confirm');
     }
 
     async toBeVisible() {

e2e-tests/playwright/specs/accessibility/channels/settings_dialog/notifications.spec.ts

@@ -104,9 +104,10 @@ test(
             - heading "Notifications" [level=3]
             - link "Learn more about notifications":
               - /url: https://mattermost.com/pl/about-notifications?utm_source=mattermost&utm_medium=in-product&utm_content=user_settings_notifications&uid=${user.id}&sid=${clientConfig.DiagnosticId}&edition=enterprise&server_version=${clientConfig.Version}
-              - img
             - heading "Desktop and mobile notifications Permission required" [level=4]:
+              - text: ""
               - img
+              - text: ""
             - button "Desktop and mobile notifications Permission required Edit"
             - text: Mentions, direct messages, and group messages
             - heading "Desktop notification sounds" [level=4]
@@ -114,6 +115,7 @@ test(
             - text: "\\"Bing\\" for messages"
             - heading "Email notifications" [level=4]
             - button "Email notifications Edit"
+            - text: "On"
             - heading "Auto-follow threads on channel-wide mentions" [level=4]
             - button "Auto-follow threads on channel-wide mentions Edit"
             - text: "On"
@@ -122,6 +124,7 @@ test(
             - text: "\\"@${user.username}\\", \\"@channel\\", \\"@all\\", \\"@here\\""
             - heading "Keywords that get highlighted (without notifications)" [level=4]
             - button "Keywords that get highlighted (without notifications) Edit"
+            - text: None
             - heading "Troubleshooting notifications" [level=4]
             - text: Not receiving notifications? Start by sending a test notification to all your devices to check if they’re working as expected. If issues persist, explore ways to solve them with troubleshooting steps.
             - button "Send a test notification"

webapp/AGENTS.md

@@ -12,6 +12,7 @@ Follow `webapp/STYLE_GUIDE.md` for canonical style, accessibility, and testing s
 - **New UI**: prefer `@mattermost/compass-ui` when a published (on npm) component exists. Import via subpaths:
   `import {Button} from '@mattermost/compass-ui/components/button';`
   Do not use the root barrel. Do not recreate Compass primitives.
+- **Button**: use Compass UI for text-based button UI. Do not use `@mattermost/shared` `Button` (removed); `buttonClassNames` from `@mattermost/shared/components/button` remains for menu triggers and similar class-only cases. Sizes: `x-small` / `small` / `medium` / `large`. Use `destructive` (boolean) and `appearance="inverted"` for those styles. For link-styled CTAs, use `asChild` with a single `<a>` or router `Link` child instead of nesting a button.
 - **Do not mass-migrate** existing UI components to Compass. Only switch when building new UI or when the task is an intentional migration of the code you are already changing.
 - **`@mattermost/compass-proto`**: prototyping package not published to npm (shells, call composites, hardcoded menu recipes, proto `WithTooltip`). Not for Mattermost webapp product code — do not add the dependency or import from it unless explicitly adopting that package. Prefer existing webapp / shared / MUI stacks for those surfaces.
 - **Exceptions (keep current stacks)**: icons → `@mattermost/compass-icons`; emoji → `Emoji` (`@mattermost/shared`); modals → existing shared / `GenericModal`; menus → existing MUI menus. Do not switch Modal/Menu to compass-ui yet.

webapp/CLAUDE.OPTIONAL.md

@@ -67,7 +67,7 @@ import Client4 from '../platform/client/src/client4.ts';
 - **React Router 5.3**: Client-side routing
 - **React Intl**: Internationalization
 - **Floating UI**: Tooltips and popovers (prefer `WithTooltip` from `@mattermost/shared/components/tooltip`)
-- **@mattermost/compass-ui**: Published Compass UI components (prefer `Button` from `@mattermost/compass-ui/components/button` over hand-rolled or shared Button)
+- **@mattermost/compass-ui**: Published Compass UI components (prefer `Button` from `@mattermost/compass-ui/components/button` over hand-rolled or shared Button; shared `Button` is removed, `buttonClassNames` remains for class-only cases)
 - **@mattermost/shared**: Shared components and utilities (`WithTooltip`, `Emoji`, etc.) — use where `webapp/AGENTS.md` specifies them
 - **@mattermost/compass-icons**: Icon library (prefer over font-awesome)
 - **Monaco Editor**: Code editor integration

webapp/STYLE_GUIDE.md

@@ -102,7 +102,7 @@ The following guidelines should be applied to both new and existing code. Howeve
 
 - **React Bootstrap**: Avoid using React Bootstrap directly.
     - **Modals**: Use `GenericModal` from `@mattermost/components` instead of React Bootstrap's `Modal`.
-    - **Buttons**: Use `Button` from `@mattermost/compass-ui/components/button` instead of React Bootstrap's `Button` or raw Bootstrap like `<button class="btn btn-primary">`. For when to adopt Compass vs leave existing UI components, see `webapp/AGENTS.md` (do not mass-migrate).
+    - **Buttons**: Use `Button` from `@mattermost/compass-ui/components/button` instead of React Bootstrap's `Button`, raw Bootstrap like `<button class="btn btn-primary">`, or the removed `@mattermost/shared` `Button`. For navigational CTAs, pass `asChild` with a single `<a>` or router `Link` child. `buttonClassNames` from `@mattermost/shared/components/button` remains for menu triggers and other class-only styling. For when to adopt Compass vs leave existing UI components, see `webapp/AGENTS.md` (do not mass-migrate).
     - **Tooltips**: Use `WithTooltip` from `@mattermost/shared` instead of React Bootstrap's `OverlayTrigger`, `Tooltip`, Floating UI, or other tooltip primitives.
 - **MUI**: Consult with the team before using MUI. If it is used, wrap the usage in another component to avoid leaking implementation details.
 - **Popovers**: Use `WithTooltip` for simple tooltips. Use Floating UI for more advanced overlays.

webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap

@@ -68,22 +68,52 @@ exports[`components/GetLinkModal should have called onHide when close button is
           class="modal-footer"
         >
           <button
-            class="btn btn-tertiary"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
             id="linkModalCloseButton"
             type="button"
           >
-            Close
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Close
+            </span>
           </button>
           <button
-            class="btn btn-primary btn-success pull-left"
+            class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64 GetLinkModal__copied"
             data-copy-btn="true"
             id="linkModalCopyLink"
             type="button"
           >
-            <i
-              class="icon icon-check"
-            />
-            Copied
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-16_1i355_38"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="18"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Copied
+            </span>
           </button>
         </div>
       </div>
@@ -160,22 +190,52 @@ exports[`components/GetLinkModal should have called onHide when close button is
           class="modal-footer"
         >
           <button
-            class="btn btn-tertiary"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
             id="linkModalCloseButton"
             type="button"
           >
-            Close
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Close
+            </span>
           </button>
           <button
-            class="btn btn-primary pull-left"
+            class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
             data-copy-btn="true"
             id="linkModalCopyLink"
             type="button"
           >
-            <i
-              class="icon icon-link-variant"
-            />
-            Copy Link
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-16_1i355_38"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="18"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Copy Link
+            </span>
           </button>
         </div>
       </div>
@@ -257,22 +317,52 @@ exports[`components/GetLinkModal should match snapshot when all props is set 1`]
           class="modal-footer"
         >
           <button
-            class="btn btn-tertiary"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
             id="linkModalCloseButton"
             type="button"
           >
-            Close
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Close
+            </span>
           </button>
           <button
-            class="btn btn-primary pull-left"
+            class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
             data-copy-btn="true"
             id="linkModalCopyLink"
             type="button"
           >
-            <i
-              class="icon icon-link-variant"
-            />
-            Copy Link
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-16_1i355_38"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="18"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Copy Link
+            </span>
           </button>
         </div>
       </div>
@@ -349,22 +439,52 @@ exports[`components/GetLinkModal should match snapshot when helpText is not set
           class="modal-footer"
         >
           <button
-            class="btn btn-tertiary"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
             id="linkModalCloseButton"
             type="button"
           >
-            Close
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Close
+            </span>
           </button>
           <button
-            class="btn btn-primary pull-left"
+            class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
             data-copy-btn="true"
             id="linkModalCopyLink"
             type="button"
           >
-            <i
-              class="icon icon-link-variant"
-            />
-            Copy Link
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-16_1i355_38"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="18"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="18"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Copy Link
+            </span>
           </button>
         </div>
       </div>

webapp/channels/src/components/__snapshots__/list_modal.test.tsx.snap

@@ -175,9 +175,14 @@ exports[`components/ListModal should match snapshot with title bar button 1`] =
             </span>
           </h1>
           <button
-            class="btn btn-primary"
+            class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+            type="button"
           >
-            Add Foo
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Add Foo
+            </span>
           </button>
         </div>
         <div

webapp/channels/src/components/__snapshots__/post_deleted_modal.test.tsx.snap

@@ -64,11 +64,15 @@ exports[`components/PostDeletedModal should match snapshot 1`] = `
           class="modal-footer"
         >
           <button
-            class="btn btn-primary"
+            class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
             data-testid="postDeletedModalOkButton"
             type="button"
           >
-            Okay
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Okay
+            </span>
           </button>
         </div>
       </div>

webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap

@@ -3,12 +3,14 @@
 exports[`components/SaveButton should match snapshot, extraClasses 1`] = `
 <div>
   <button
-    class="btn btn-primary some-class"
+    class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64 some-class"
     data-testid="saveSetting"
     id="saveSetting"
     type="submit"
   >
-    <span>
+    <span
+      class="_button__label_we8pe_31"
+    >
       Save
     </span>
   </button>
@@ -18,12 +20,14 @@ exports[`components/SaveButton should match snapshot, extraClasses 1`] = `
 exports[`components/SaveButton should match snapshot, on defaultMessage 1`] = `
 <div>
   <button
-    class="btn btn-primary"
+    class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
     data-testid="saveSetting"
     id="saveSetting"
     type="submit"
   >
-    <span>
+    <span
+      class="_button__label_we8pe_31"
+    >
       Save
     </span>
   </button>
@@ -33,12 +37,14 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 1`] = `
 exports[`components/SaveButton should match snapshot, on defaultMessage 2`] = `
 <div>
   <button
-    class="btn btn-primary"
+    class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
     data-testid="saveSetting"
     id="saveSetting"
     type="submit"
   >
-    <span>
+    <span
+      class="_button__label_we8pe_31"
+    >
       Go
     </span>
   </button>
@@ -48,21 +54,26 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 2`] = `
 exports[`components/SaveButton should match snapshot, on savingMessage 1`] = `
 <div>
   <button
-    class="btn btn-primary"
+    class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
     data-testid="saveSetting"
     disabled=""
     id="saveSetting"
     type="submit"
   >
     <span
-      class="LoadingSpinner with-text"
-      data-testid="loadingSpinner"
-      id="loadingSpinner"
+      aria-hidden="true"
+      class="_button__icon-slot_we8pe_35"
     >
       <span
-        class="fa fa-spinner fa-fw fa-pulse spinner"
-        title="Loading Icon"
+        aria-label="Loading"
+        class="_spinner_3elm7_10"
+        role="status"
+        style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
       />
+    </span>
+    <span
+      class="_button__label_we8pe_31"
+    >
       Saving
     </span>
   </button>
@@ -72,21 +83,26 @@ exports[`components/SaveButton should match snapshot, on savingMessage 1`] = `
 exports[`components/SaveButton should match snapshot, on savingMessage 2`] = `
 <div>
   <button
-    class="btn btn-primary"
+    class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
     data-testid="saveSetting"
     disabled=""
     id="saveSetting"
     type="submit"
   >
     <span
-      class="LoadingSpinner with-text"
-      data-testid="loadingSpinner"
-      id="loadingSpinner"
+      aria-hidden="true"
+      class="_button__icon-slot_we8pe_35"
     >
       <span
-        class="fa fa-spinner fa-fw fa-pulse spinner"
-        title="Loading Icon"
+        aria-label="Loading"
+        class="_spinner_3elm7_10"
+        role="status"
+        style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
       />
+    </span>
+    <span
+      class="_button__label_we8pe_31"
+    >
       Saving Config...
     </span>
   </button>

webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`components/SettingItemMax should match snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="section-max form-horizontal "
+    class="section-max form-horizontal a11y--active a11y--focused"
   >
     <h4
       class="col-sm-12 section-title"
@@ -30,23 +30,34 @@ exports[`components/SettingItemMax should match snapshot 1`] = `
           <div
             role="alert"
           />
-          <button
-            class="btn btn-primary a11y--active a11y--focused"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span>
-              Save
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
+            </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -57,7 +68,7 @@ exports[`components/SettingItemMax should match snapshot 1`] = `
 exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
 <DocumentFragment>
   <section
-    class="section-max form-horizontal "
+    class="section-max form-horizontal a11y--active a11y--focused"
   >
     <h4
       class="col-sm-12 section-title"
@@ -84,23 +95,34 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
           <div
             role="alert"
           />
-          <button
-            class="btn btn-primary a11y--active a11y--focused"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span>
-              Save
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
+            </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -111,7 +133,7 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
 exports[`components/SettingItemMax should match snapshot, on serverError 1`] = `
 <DocumentFragment>
   <section
-    class="section-max form-horizontal "
+    class="section-max form-horizontal a11y--active a11y--focused"
   >
     <h4
       class="col-sm-12 section-title"
@@ -161,23 +183,34 @@ exports[`components/SettingItemMax should match snapshot, on serverError 1`] = `
               </label>
             </div>
           </div>
-          <button
-            class="btn btn-primary a11y--active a11y--focused"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span>
-              Save
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
+            </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -215,23 +248,34 @@ exports[`components/SettingItemMax should match snapshot, with new saveTextButto
           <div
             role="alert"
           />
-          <button
-            class="btn btn-primary"
-            data-testid="saveSetting"
-            id="saveSetting"
-            type="submit"
+          <div
+            class="setting-list-item__buttons"
           >
-            <span>
-              CustomText
-            </span>
-          </button>
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
-          >
-            Cancel
-          </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              data-testid="saveSetting"
+              id="saveSetting"
+              type="submit"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                CustomText
+              </span>
+            </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -269,13 +313,22 @@ exports[`components/SettingItemMax should match snapshot, without submit 1`] = `
           <div
             role="alert"
           />
-          <button
-            class="btn btn-tertiary"
-            data-testid="cancelButton"
-            id="cancelSetting"
+          <div
+            class="setting-list-item__buttons"
           >
-            Cancel
-          </button>
+            <button
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelButton"
+              id="cancelSetting"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>

webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap

@@ -39,7 +39,9 @@ exports[`components/SettingItemMin should match snapshot with active Save button
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -50,27 +52,42 @@ exports[`components/SettingItemMin should match snapshot with active Save button
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="saveSettingPicture"
               tabindex="0"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -107,7 +124,9 @@ exports[`components/SettingItemMin should match snapshot with removeSrc state ac
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -118,27 +137,42 @@ exports[`components/SettingItemMin should match snapshot with removeSrc state ac
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="saveSettingPicture"
               tabindex="0"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -185,7 +219,9 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -197,39 +233,55 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="inputSettingPictureButton"
               disabled=""
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Uploading..."
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
               <span
-                class="LoadingSpinner with-text"
-                data-testid="loadingSpinner"
-                id="loadingSpinner"
+                aria-hidden="true"
+                class="_button__icon-slot_we8pe_35"
               >
                 <span
-                  class="fa fa-spinner fa-fw fa-pulse spinner"
-                  title="Loading Icon"
+                  aria-label="Loading"
+                  class="_spinner_3elm7_10"
+                  role="status"
+                  style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
                 />
+              </span>
+              <span
+                class="_button__label_we8pe_31"
+              >
                 Uploading...
               </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -283,7 +335,9 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -294,28 +348,43 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -362,7 +431,9 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -373,28 +444,43 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -448,7 +534,9 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -459,28 +547,43 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -551,7 +654,9 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -562,28 +667,43 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -654,7 +774,9 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
           class="setting-list-item"
         >
           <hr />
-          <span>
+          <div
+            class="setting-list-item__buttons"
+          >
             <input
               accept=".jpeg,.jpg,.png,.bmp"
               aria-hidden="true"
@@ -665,28 +787,43 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
             />
             <button
               aria-label="Select"
-              class="btn btn-primary btn-file"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="inputSettingPictureButton"
+              type="button"
             >
-              Select
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Select
+              </span>
             </button>
             <button
               aria-label="Save"
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               data-testid="saveSettingPicture"
               disabled=""
               tabindex="-1"
+              type="button"
             >
-              Save
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Save
+              </span>
             </button>
-          </span>
-          <button
-            aria-label="Cancel"
-            class="btn btn-tertiary ml-2"
-            data-testid="cancelSettingPicture"
-          >
-            Cancel
-          </button>
+            <button
+              aria-label="Cancel"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+              data-testid="cancelSettingPicture"
+              type="button"
+            >
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>

webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap

@@ -3,14 +3,19 @@
 exports[`components/SpinnerButton should match snapshot with children 1`] = `
 <div>
   <button
-    class="btn btn-primary"
+    class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+    type="button"
   >
     <span
-      id="child1"
-    />
-    <span
-      id="child2"
-    />
+      class="_button__label_we8pe_31"
+    >
+      <span
+        id="child1"
+      />
+      <span
+        id="child2"
+      />
+    </span>
   </button>
 </div>
 `;
@@ -18,9 +23,14 @@ exports[`components/SpinnerButton should match snapshot with children 1`] = `
 exports[`components/SpinnerButton should match snapshot with required props 1`] = `
 <div>
   <button
-    class="btn btn-primary"
+    class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+    type="button"
   >
-    Test
+    <span
+      class="_button__label_we8pe_31"
+    >
+      Test
+    </span>
   </button>
 </div>
 `;
@@ -28,18 +38,24 @@ exports[`components/SpinnerButton should match snapshot with required props 1`]
 exports[`components/SpinnerButton should match snapshot with spinning 1`] = `
 <div>
   <button
-    class="btn btn-primary"
+    class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
     disabled=""
+    type="button"
   >
     <span
-      class="LoadingSpinner with-text"
-      data-testid="loadingSpinner"
-      id="loadingSpinner"
+      aria-hidden="true"
+      class="_button__icon-slot_we8pe_35"
     >
       <span
-        class="fa fa-spinner fa-fw fa-pulse spinner"
-        title="Loading Icon"
+        aria-label="Loading"
+        class="_spinner_3elm7_10"
+        role="status"
+        style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
       />
+    </span>
+    <span
+      class="_button__label_we8pe_31"
+    >
       Test
     </span>
   </button>

webapp/channels/src/components/actions_menu/actions_menu_empty_popover.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import {Permissions} from 'mattermost-redux/constants';
 
@@ -57,7 +57,7 @@ export default function ActionsMenuEmptyPopover({
                     <Button
                         id='marketPlaceButton'
                         emphasis='primary'
-                        size='sm'
+                        size='small'
                         className='visit-marketplace-button'
                         onClick={onOpenMarketplace}
                     >

webapp/channels/src/components/activity_log_modal/components/__snapshots__/activity_log.test.tsx.snap

@@ -38,9 +38,14 @@ exports[`components/activity_log_modal/ActivityLog should match snapshot 1`] = `
       class="activity-log__action"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+        type="button"
       >
-        Log Out
+        <span
+          class="_button__label_we8pe_31"
+        >
+          Log Out
+        </span>
       </button>
     </div>
   </div>
@@ -85,9 +90,14 @@ exports[`components/activity_log_modal/ActivityLog should match snapshot with mo
       class="activity-log__action"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+        type="button"
       >
-        Log Out
+        <span
+          class="_button__label_we8pe_31"
+        >
+          Log Out
+        </span>
       </button>
     </div>
   </div>

webapp/channels/src/components/activity_log_modal/components/activity_log.tsx

@@ -5,7 +5,7 @@ import React, {type JSX} from 'react';
 import type {MessageDescriptor} from 'react-intl';
 import {FormattedDate, FormattedMessage, FormattedTime, defineMessages} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import type {Session} from '@mattermost/types/sessions';
 
 import {General} from 'mattermost-redux/constants';

webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap

@@ -123,12 +123,14 @@ exports[`components/AddGroupsToChannelModal should match snapshot 1`] = `
                   </div>
                 </div>
                 <button
-                  class="btn btn-primary"
+                  class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64 multi-select__go"
                   data-testid="saveSetting"
                   id="saveItems"
                   type="submit"
                 >
-                  <span>
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
                     Add
                   </span>
                 </button>

webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap

@@ -123,12 +123,14 @@ exports[`components/AddGroupsToTeamModal should match snapshot 1`] = `
                   </div>
                 </div>
                 <button
-                  class="btn btn-primary"
+                  class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64 multi-select__go"
                   data-testid="saveSetting"
                   id="saveItems"
                   type="submit"
                 >
-                  <span>
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
                     Add
                   </span>
                 </button>

webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap

@@ -72,18 +72,26 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = `
             class="modal-footer"
           >
             <button
-              class="btn btn-tertiary"
+              class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
               type="button"
             >
-              Cancel
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Cancel
+              </span>
             </button>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               disabled=""
               id="add-user-to-channel-modal__add-button"
               type="button"
             >
-              Add
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add
+              </span>
             </button>
           </div>
         </form>

webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx

@@ -6,7 +6,7 @@ import type {ChangeEvent, FormEvent} from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import type {Channel, ChannelMembership} from '@mattermost/types/channels';
 import type {UserProfile} from '@mattermost/types/users';
 import type {RelationOneToOne} from '@mattermost/types/utilities';

webapp/channels/src/components/add_user_to_group_multiselect/__snapshots__/add_user_to_group_multiselect.test.tsx.snap

@@ -81,13 +81,15 @@ exports[`component/add_user_to_group_multiselect should match snapshot with diff
     class="multi-select__footer modal-footer"
   >
     <button
-      class="btn btn-primary"
+      class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
       data-testid="saveSetting"
       disabled=""
       id="saveItems"
       type="submit"
     >
-      <span>
+      <span
+        class="_button__label_we8pe_31"
+      >
         Update Group
       </span>
     </button>
@@ -176,13 +178,15 @@ exports[`component/add_user_to_group_multiselect should match snapshot with prof
     class="multi-select__footer modal-footer"
   >
     <button
-      class="btn btn-primary"
+      class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
       data-testid="saveSetting"
       disabled=""
       id="saveItems"
       type="submit"
     >
-      <span>
+      <span
+        class="_button__label_we8pe_31"
+      >
         Create Group
       </span>
     </button>
@@ -271,13 +275,15 @@ exports[`component/add_user_to_group_multiselect should match snapshot without a
     class="multi-select__footer modal-footer"
   >
     <button
-      class="btn btn-primary"
+      class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
       data-testid="saveSetting"
       disabled=""
       id="saveItems"
       type="submit"
     >
-      <span>
+      <span
+        class="_button__label_we8pe_31"
+      >
         Create Group
       </span>
     </button>

webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap

@@ -158,18 +158,25 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
                     class="multi-select__footer modal-footer"
                   >
                     <button
-                      class="btn btn-tertiary"
+                      class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
+                      type="button"
                     >
-                      Back
+                      <span
+                        class="_button__label_we8pe_31"
+                      >
+                        Back
+                      </span>
                     </button>
                     <button
-                      class="btn btn-primary"
+                      class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
                       data-testid="saveSetting"
                       disabled=""
                       id="saveItems"
                       type="submit"
                     >
-                      <span>
+                      <span
+                        class="_button__label_we8pe_31"
+                      >
                         Add People
                       </span>
                     </button>

webapp/channels/src/components/add_users_to_team_modal/__snapshots__/add_users_to_team_modal.test.tsx.snap

@@ -123,12 +123,14 @@ exports[`components/admin_console/add_users_to_team_modal/AddUsersToTeamModal sh
                   </div>
                 </div>
                 <button
-                  class="btn btn-primary"
+                  class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64 multi-select__go"
                   data-testid="saveSetting"
                   id="saveItems"
                   type="submit"
                 >
-                  <span>
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
                     Add
                   </span>
                 </button>

webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap

@@ -469,13 +469,15 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -957,13 +959,15 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -1445,13 +1449,15 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -1933,13 +1939,15 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>

webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap

@@ -378,10 +378,14 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Recycle Database Connections
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Recycle Database Connections
+                  </span>
                 </button>
               </div>
               <div
@@ -568,13 +572,15 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>

webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap

@@ -508,11 +508,15 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   disabled=""
                   type="button"
                 >
-                  Test Connection
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Test Connection
+                  </span>
                 </button>
               </div>
               <div
@@ -544,11 +548,15 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
                   >
                     <div>
                       <button
-                        class="btn btn-tertiary"
+                        class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                         disabled=""
                         type="button"
                       >
-                        Index Now
+                        <span
+                          class="_button__label_we8pe_31"
+                        >
+                          Index Now
+                        </span>
                       </button>
                     </div>
                     <div
@@ -606,11 +614,15 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   disabled=""
                   type="button"
                 >
-                  Rebuild Channels Index
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Rebuild Channels Index
+                  </span>
                 </button>
               </div>
               <div
@@ -639,11 +651,15 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   disabled=""
                   type="button"
                 >
-                  Purge Indexes
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Purge Indexes
+                  </span>
                 </button>
               </div>
               <div
@@ -1011,13 +1027,15 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -1527,10 +1545,14 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Test Connection
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Test Connection
+                  </span>
                 </button>
               </div>
               <div
@@ -1562,10 +1584,14 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
                   >
                     <div>
                       <button
-                        class="btn btn-tertiary"
+                        class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                         type="button"
                       >
-                        Index Now
+                        <span
+                          class="_button__label_we8pe_31"
+                        >
+                          Index Now
+                        </span>
                       </button>
                     </div>
                     <div
@@ -1623,10 +1649,14 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Rebuild Channels Index
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Rebuild Channels Index
+                  </span>
                 </button>
               </div>
               <div
@@ -1655,10 +1685,14 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Purge Indexes
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Purge Indexes
+                  </span>
                 </button>
               </div>
               <div
@@ -2017,13 +2051,15 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -2542,10 +2578,14 @@ exports[`components/ElasticSearchSettings should match snapshot, sniff enabled 1
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Test Connection
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Test Connection
+                  </span>
                 </button>
               </div>
               <div
@@ -2577,10 +2617,14 @@ exports[`components/ElasticSearchSettings should match snapshot, sniff enabled 1
                   >
                     <div>
                       <button
-                        class="btn btn-tertiary"
+                        class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                         type="button"
                       >
-                        Index Now
+                        <span
+                          class="_button__label_we8pe_31"
+                        >
+                          Index Now
+                        </span>
                       </button>
                     </div>
                     <div
@@ -2638,10 +2682,14 @@ exports[`components/ElasticSearchSettings should match snapshot, sniff enabled 1
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Rebuild Channels Index
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Rebuild Channels Index
+                  </span>
                 </button>
               </div>
               <div
@@ -2670,10 +2718,14 @@ exports[`components/ElasticSearchSettings should match snapshot, sniff enabled 1
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Purge Indexes
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Purge Indexes
+                  </span>
                 </button>
               </div>
               <div
@@ -3032,13 +3084,15 @@ exports[`components/ElasticSearchSettings should match snapshot, sniff enabled 1
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>

webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap

@@ -202,11 +202,15 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   disabled=""
                   type="button"
                 >
-                  Run Compliance Export Job Now
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Run Compliance Export Job Now
+                  </span>
                 </button>
               </div>
               <div
@@ -253,13 +257,15 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -722,11 +728,15 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   disabled=""
                   type="button"
                 >
-                  Run Compliance Export Job Now
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Run Compliance Export Job Now
+                  </span>
                 </button>
               </div>
               <div
@@ -773,13 +783,15 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -992,10 +1004,14 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Run Compliance Export Job Now
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Run Compliance Export Job Now
+                  </span>
                 </button>
               </div>
               <div
@@ -1042,13 +1058,15 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -1502,10 +1520,14 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Run Compliance Export Job Now
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Run Compliance Export Job Now
+                  </span>
                 </button>
               </div>
               <div
@@ -1552,13 +1574,15 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -2136,10 +2160,14 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
             >
               <div>
                 <button
-                  class="btn btn-tertiary"
+                  class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                   type="button"
                 >
-                  Run Compliance Export Job Now
+                  <span
+                    class="_button__label_we8pe_31"
+                  >
+                    Run Compliance Export Job Now
+                  </span>
                 </button>
               </div>
               <div
@@ -2186,13 +2214,15 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>

webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap

@@ -257,13 +257,15 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>
@@ -414,13 +416,15 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>

webapp/channels/src/components/admin_console/access_control/__snapshots__/policies.test.tsx.snap

@@ -19,12 +19,37 @@ exports[`components/admin_console/access_control/PolicyList should match snapsho
         </p>
       </div>
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+        type="button"
       >
-        <i
-          class="icon icon-plus"
-        />
-        <span>
+        <span
+          class="_button__icon-slot_we8pe_35"
+        >
+          <div
+            aria-hidden="true"
+            class="_icon_1i355_2 _icon--size-16_1i355_38"
+          >
+            <div
+              class="_icon__glyph-area_1i355_9"
+            >
+              <svg
+                fill="currentColor"
+                height="18"
+                version="1.1"
+                viewBox="0 0 24 24"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+                />
+              </svg>
+            </div>
+          </div>
+        </span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Add policy
         </span>
       </button>
@@ -127,12 +152,37 @@ exports[`components/admin_console/access_control/PolicyList should match snapsho
         </p>
       </div>
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+        type="button"
       >
-        <i
-          class="icon icon-plus"
-        />
-        <span>
+        <span
+          class="_button__icon-slot_we8pe_35"
+        >
+          <div
+            aria-hidden="true"
+            class="_icon_1i355_2 _icon--size-16_1i355_38"
+          >
+            <div
+              class="_icon__glyph-area_1i355_9"
+            >
+              <svg
+                fill="currentColor"
+                height="18"
+                version="1.1"
+                viewBox="0 0 24 24"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+                />
+              </svg>
+            </div>
+          </div>
+        </span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Add policy
         </span>
       </button>
@@ -357,12 +407,37 @@ exports[`components/admin_console/access_control/PolicyList should match snapsho
         </p>
       </div>
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+        type="button"
       >
-        <i
-          class="icon icon-plus"
-        />
-        <span>
+        <span
+          class="_button__icon-slot_we8pe_35"
+        >
+          <div
+            aria-hidden="true"
+            class="_icon_1i355_2 _icon--size-16_1i355_38"
+          >
+            <div
+              class="_icon__glyph-area_1i355_9"
+            >
+              <svg
+                fill="currentColor"
+                height="18"
+                version="1.1"
+                viewBox="0 0 24 24"
+                width="18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+                />
+              </svg>
+            </div>
+          </div>
+        </span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Add policy
         </span>
       </button>

webapp/channels/src/components/admin_console/access_control/editors/shared.test.tsx

@@ -45,11 +45,11 @@ describe('TestButton', () => {
 
         const button = screen.getByRole('button', {name: /test access rule/i});
         expect(button).toBeInTheDocument();
-        expect(button).toHaveClass('btn', 'btn-sm', 'btn-tertiary');
+        expect(button.className).toEqual(expect.stringContaining('_button--emphasis-tertiary'));
+        expect(button.className).toEqual(expect.stringContaining('_button--size-small'));
 
-        // Check for icon
-        const icon = button.querySelector('i.icon.icon-lock-outline');
-        expect(icon).toBeInTheDocument();
+        // Leading icon is provided via compass-ui Icon glyph slot
+        expect(button.querySelector('svg')).toBeInTheDocument();
     });
 
     test('should render the supplied label override instead of the default copy', () => {
@@ -67,7 +67,7 @@ describe('TestButton', () => {
         expect(screen.queryByRole('button', {name: /test access rule/i})).not.toBeInTheDocument();
         const button = screen.getByRole('button', {name: /simulate rules/i});
         expect(button).toBeInTheDocument();
-        expect(button.querySelector('i.icon.icon-lock-outline')).toBeInTheDocument();
+        expect(button.querySelector('svg')).toBeInTheDocument();
     });
 
     test('should be enabled and clickable when disabled is false', () => {

webapp/channels/src/components/admin_console/access_control/editors/shared.tsx

@@ -5,7 +5,9 @@ import React, {type JSX} from 'react';
 import {defineMessage, FormattedMessage} from 'react-intl';
 import type {MessageDescriptor} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {LockOutlineIcon, PlusIcon} from '@mattermost/compass-icons/components';
+import {Button} from '@mattermost/compass-ui/components/button';
+import {Icon} from '@mattermost/compass-ui/components/icon';
 import {WithTooltip} from '@mattermost/shared/components/tooltip';
 import type {AccessControlTestResult} from '@mattermost/types/access_control';
 import type {UserPropertyField} from '@mattermost/types/properties_user';
@@ -505,11 +507,11 @@ export function TestButton({onClick, disabled, disabledTooltip, label}: TestButt
     const button = (
         <Button
             emphasis='tertiary'
-            size='sm'
+            size='small'
             onClick={onClick}
             disabled={disabled}
+            leadingIcon={<Icon glyph={<LockOutlineIcon/>}/>}
         >
-            <i className='icon icon-lock-outline'/>
             {label ?? (
                 <FormattedMessage
                     id='admin.access_control.table_editor.test_access_rule'
@@ -594,11 +596,11 @@ export function AddAttributeButton({onClick, disabled}: AddAttributeButtonProps)
     return (
         <Button
             emphasis='tertiary'
-            size='sm'
+            size='small'
             onClick={onClick}
             disabled={disabled}
+            leadingIcon={<Icon glyph={<PlusIcon/>}/>}
         >
-            <i className='icon icon-plus'/>
             <FormattedMessage
                 id='admin.access_control.table_editor.add_attribute'
                 defaultMessage='Add attribute'

webapp/channels/src/components/admin_console/access_control/jobs/access_control_sync_job_table.scss

@@ -20,16 +20,6 @@
             }
         }
         
-        .btn-primary {
-            display: flex;
-            align-items: center;
-            padding: 10px 16px;
-            gap: 8px;
-            
-            .icon {
-                font-size: 18px;
-            }
-        }
     }
 
     .team-sync-note {

webapp/channels/src/components/admin_console/access_control/jobs/access_control_sync_job_table.tsx

@@ -5,8 +5,10 @@ import React, {useState, useEffect, type JSX} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useSelector} from 'react-redux';
 
+import {PlusIcon} from '@mattermost/compass-icons/components';
+import {Button} from '@mattermost/compass-ui/components/button';
+import {Icon} from '@mattermost/compass-ui/components/icon';
 import {SectionNotice} from '@mattermost/compass-ui/components/section-notice';
-import {Button} from '@mattermost/shared/components/button';
 import type {JobType, JobTypeBase, Job} from '@mattermost/types/jobs';
 
 import type {ActionResult} from 'mattermost-redux/types/actions';
@@ -133,11 +135,9 @@ export default function AccessControlSyncJobTable(props: Props): JSX.Element {
                     emphasis='primary'
                     onClick={handleCreateJob}
                     disabled={isSubmitting}
+                    leadingIcon={<Icon glyph={<PlusIcon/>}/>}
                 >
-                    <i className='icon icon-plus'/>
-                    <span>
-                        {renderButtonLabel()}
-                    </span>
+                    {renderButtonLabel()}
                 </Button>
             </div>
             {teamAbacEnabled && (

webapp/channels/src/components/admin_console/access_control/modals/job_details/searchable_sync_job_channel_list.tsx

@@ -4,7 +4,7 @@
 import React, {useState, useRef, useEffect, type JSX} from 'react';
 import {FormattedMessage, defineMessages, injectIntl, type WrappedComponentProps} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import type {Channel} from '@mattermost/types/channels';
 import type {Team} from '@mattermost/types/teams';
 import type {IDMappedObjects} from '@mattermost/types/utilities';
@@ -214,7 +214,7 @@ const SearchableSyncJobChannelList = (props: Props) => {
             nextButton = (
                 <Button
                     emphasis='tertiary'
-                    size='sm'
+                    size='small'
                     className='filter-control filter-control__next'
                     onClick={nextPage}
                     disabled={nextDisabled}
@@ -232,7 +232,7 @@ const SearchableSyncJobChannelList = (props: Props) => {
             previousButton = (
                 <Button
                     emphasis='tertiary'
-                    size='sm'
+                    size='small'
                     className='filter-control filter-control__prev'
                     onClick={previousPage}
                     aria-label={props.intl.formatMessage({id: 'more_channels.prev', defaultMessage: 'Previous'})}

webapp/channels/src/components/admin_console/access_control/modals/job_details/searchable_sync_job_team_list.tsx

@@ -4,7 +4,7 @@
 import React, {useState, useRef, useEffect, type JSX} from 'react';
 import {FormattedMessage, defineMessages, injectIntl, type WrappedComponentProps} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import type {Team} from '@mattermost/types/teams';
 
 import MagnifyingGlassSVG from 'components/common/svg_images_components/magnifying_glass_svg';
@@ -190,7 +190,7 @@ const SearchableSyncJobTeamList = (props: Props) => {
             nextButton = (
                 <Button
                     emphasis='tertiary'
-                    size='sm'
+                    size='small'
                     className='filter-control filter-control__next'
                     onClick={nextPage}
                     disabled={nextDisabled}
@@ -208,7 +208,7 @@ const SearchableSyncJobTeamList = (props: Props) => {
             previousButton = (
                 <Button
                     emphasis='tertiary'
-                    size='sm'
+                    size='small'
                     className='filter-control filter-control__prev'
                     onClick={previousPage}
                     aria-label={props.intl.formatMessage({id: 'more_channels.prev', defaultMessage: 'Previous'})}

webapp/channels/src/components/admin_console/access_control/modals/simulate_access/session_attribute_editor.tsx

@@ -18,7 +18,7 @@ import {
 import React, {useCallback, useId, useState, type JSX} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import {supportsOptions} from '@mattermost/types/properties';
 import type {UserPropertyField} from '@mattermost/types/properties_user';
 

webapp/channels/src/components/admin_console/access_control/modals/simulate_access/simulate_access_modal.scss

@@ -406,7 +406,7 @@
         justify-content: space-between;
         gap: 12px;
 
-        > .btn {
+        > button {
             flex-shrink: 0;
         }
     }

webapp/channels/src/components/admin_console/access_control/modals/simulate_access/simulate_access_modal.tsx

@@ -7,8 +7,8 @@ import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {CheckIcon, ChevronDownIcon} from '@mattermost/compass-icons/components';
+import {Button} from '@mattermost/compass-ui/components/button';
 import {GenericModal} from '@mattermost/components';
-import {Button} from '@mattermost/shared/components/button';
 import type {
     AccessControlPolicy,
     PolicyEvaluationScope,
@@ -371,9 +371,7 @@ function SimulateAccessModal({
         // the last successful run while we report the failure.
         const actionRes = result as ActionResult<PolicySimulationResponse>;
         if (actionRes.error) {
-            const message = actionRes.error instanceof Error ?
-                actionRes.error.message :
-                String(actionRes.error);
+            const message = actionRes.error instanceof Error ? actionRes.error.message : String(actionRes.error);
             setSimulationError(message || 'Unknown error');
             setPending(false);
             return;
@@ -513,7 +511,7 @@ function SimulateAccessModal({
                     >
                         <Button
                             emphasis='tertiary'
-                            size='sm'
+                            size='small'
                             onClick={handlePrevPage}
                             disabled={page === 0 || isLoadingUsers || pending}
                             data-testid='simulate-access-pagination-prev'
@@ -525,7 +523,7 @@ function SimulateAccessModal({
                         </Button>
                         <Button
                             emphasis='tertiary'
-                            size='sm'
+                            size='small'
                             onClick={handleNextPage}
                             disabled={!hasNextPage || isLoadingUsers || pending}
                             data-testid='simulate-access-pagination-next'
@@ -590,12 +588,10 @@ function SimulateAccessModal({
                             children: (
                                 <>
                                     <span className='SimulateAccessModal__filterButtonLabel'>
-                                        {selectedAction ?
-                                            (actionLabels?.[selectedAction] ?? selectedAction) :
-                                            formatMessage({
-                                                id: 'admin.access_control.simulate_access.permission_filter.all',
-                                                defaultMessage: 'All permissions',
-                                            })
+                                        {selectedAction ? (actionLabels?.[selectedAction] ?? selectedAction) : formatMessage({
+                                            id: 'admin.access_control.simulate_access.permission_filter.all',
+                                            defaultMessage: 'All permissions',
+                                        })
                                         }
                                     </span>
                                     <ChevronDownIcon

webapp/channels/src/components/admin_console/access_control/policies.scss

@@ -122,16 +122,6 @@
             }
         }
         
-        .btn-primary {
-            display: flex;
-            align-items: center;
-            padding: 10px 16px;
-            gap: 8px;
-            
-            .icon {
-                font-size: 18px;
-            }
-        }
     }
 
     .action-wrapper {

webapp/channels/src/components/admin_console/access_control/policies.tsx

@@ -4,9 +4,11 @@
 import React, {useState, useEffect, useMemo, useCallback, type JSX} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
+import {PlusIcon} from '@mattermost/compass-icons/components';
+import {Button} from '@mattermost/compass-ui/components/button';
+import {Icon} from '@mattermost/compass-ui/components/icon';
 import {SectionNotice} from '@mattermost/compass-ui/components/section-notice';
 import {GenericModal} from '@mattermost/components';
-import {Button} from '@mattermost/shared/components/button';
 import type {AccessControlPolicy} from '@mattermost/types/access_control';
 import {getAutoAddFromRules} from '@mattermost/types/access_control';
 
@@ -445,14 +447,12 @@ export default function PolicyList(props: Props): JSX.Element {
                         onClick={() => {
                             history.push('/admin_console/system_attributes/membership_policies/edit_policy');
                         }}
+                        leadingIcon={<Icon glyph={<PlusIcon/>}/>}
                     >
-                        <i className='icon icon-plus'/>
-                        <span>
-                            <FormattedMessage
-                                id='admin.access_control.policies.add_policy'
-                                defaultMessage='Add policy'
-                            />
-                        </span>
+                        <FormattedMessage
+                            id='admin.access_control.policies.add_policy'
+                            defaultMessage='Add policy'
+                        />
                     </Button>
                 </div>
             )}
@@ -503,7 +503,7 @@ export default function PolicyList(props: Props): JSX.Element {
                             defaultMessage='Delete Policy'
                         />
                     }
-                    confirmButtonVariant='destructive'
+                    destructive={true}
                     compassDesign={true}
                 >
                     <>

webapp/channels/src/components/admin_console/access_control/policy_details/__snapshots__/policy_details.test.tsx.snap

@@ -75,9 +75,14 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Switch to Advanced Mode
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Switch to Advanced Mode
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -111,9 +116,14 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add channels
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add channels
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -160,13 +170,40 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
                     class="Filter"
                   >
                     <button
-                      class="Filter_button"
+                      aria-expanded="false"
+                      class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
                       type="button"
                     >
-                      <i
-                        class="Icon icon-filter-variant"
-                      />
-                      Filters
+                      <span
+                        class="_button__icon-slot_we8pe_35"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="_icon_1i355_2 _icon--size-12_1i355_30"
+                        >
+                          <div
+                            class="_icon__glyph-area_1i355_9"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="14"
+                              version="1.1"
+                              viewBox="0 0 24 24"
+                              width="14"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </span>
+                      <span
+                        class="_button__label_we8pe_31"
+                      >
+                        Filters
+                      </span>
                     </button>
                     <div
                       class="Filter_content"
@@ -276,11 +313,15 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
                         </div>
                       </div>
                       <button
-                        class="btn btn-primary btn-sm Filter_apply"
+                        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
                         disabled=""
                         type="button"
                       >
-                        Apply
+                        <span
+                          class="_button__label_we8pe_31"
+                        >
+                          Apply
+                        </span>
                       </button>
                     </div>
                   </div>
@@ -382,9 +423,14 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Delete
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Delete
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -397,21 +443,27 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
       class="admin-console-save"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
         data-testid="saveSetting"
         disabled=""
         id="saveSetting"
         type="submit"
       >
-        <span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Save
         </span>
       </button>
       <a
-        class="btn btn-quaternary"
+        class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
         href="/admin_console/system_attributes/membership_policies"
       >
-        Cancel
+        <span
+          class="_button__label_we8pe_31"
+        >
+          Cancel
+        </span>
       </a>
     </div>
   </div>
@@ -493,9 +545,14 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Switch to Advanced Mode
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Switch to Advanced Mode
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -529,9 +586,14 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add channels
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add channels
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -578,13 +640,40 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
                     class="Filter"
                   >
                     <button
-                      class="Filter_button"
+                      aria-expanded="false"
+                      class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
                       type="button"
                     >
-                      <i
-                        class="Icon icon-filter-variant"
-                      />
-                      Filters
+                      <span
+                        class="_button__icon-slot_we8pe_35"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="_icon_1i355_2 _icon--size-12_1i355_30"
+                        >
+                          <div
+                            class="_icon__glyph-area_1i355_9"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="14"
+                              version="1.1"
+                              viewBox="0 0 24 24"
+                              width="14"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </span>
+                      <span
+                        class="_button__label_we8pe_31"
+                      >
+                        Filters
+                      </span>
                     </button>
                     <div
                       class="Filter_content"
@@ -694,11 +783,15 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
                         </div>
                       </div>
                       <button
-                        class="btn btn-primary btn-sm Filter_apply"
+                        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
                         disabled=""
                         type="button"
                       >
-                        Apply
+                        <span
+                          class="_button__label_we8pe_31"
+                        >
+                          Apply
+                        </span>
                       </button>
                     </div>
                   </div>
@@ -775,21 +868,27 @@ exports[`components/admin_console/access_control/policy_details/PolicyDetails sh
       class="admin-console-save"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
         data-testid="saveSetting"
         disabled=""
         id="saveSetting"
         type="submit"
       >
-        <span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Save
         </span>
       </button>
       <a
-        class="btn btn-quaternary"
+        class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
         href="/admin_console/system_attributes/membership_policies"
       >
-        Cancel
+        <span
+          class="_button__label_we8pe_31"
+        >
+          Cancel
+        </span>
       </a>
     </div>
   </div>

webapp/channels/src/components/admin_console/access_control/policy_details/channel_list/__snapshots__/channel_list.test.tsx.snap

@@ -39,13 +39,40 @@ exports[`components/admin_console/access_control/channel_list should match snaps
           class="Filter"
         >
           <button
-            class="Filter_button"
+            aria-expanded="false"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
             type="button"
           >
-            <i
-              class="Icon icon-filter-variant"
-            />
-            Filters
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-12_1i355_30"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="14"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="14"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Filters
+            </span>
           </button>
           <div
             class="Filter_content"
@@ -155,11 +182,15 @@ exports[`components/admin_console/access_control/channel_list should match snaps
               </div>
             </div>
             <button
-              class="btn btn-primary btn-sm Filter_apply"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
               disabled=""
               type="button"
             >
-              Apply
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Apply
+              </span>
             </button>
           </div>
         </div>
@@ -318,13 +349,40 @@ exports[`components/admin_console/access_control/channel_list should match snaps
           class="Filter"
         >
           <button
-            class="Filter_button"
+            aria-expanded="false"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
             type="button"
           >
-            <i
-              class="Icon icon-filter-variant"
-            />
-            Filters
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-12_1i355_30"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="14"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="14"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Filters
+            </span>
           </button>
           <div
             class="Filter_content"
@@ -434,11 +492,15 @@ exports[`components/admin_console/access_control/channel_list should match snaps
               </div>
             </div>
             <button
-              class="btn btn-primary btn-sm Filter_apply"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
               disabled=""
               type="button"
             >
-              Apply
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Apply
+              </span>
             </button>
           </div>
         </div>
@@ -597,13 +659,40 @@ exports[`components/admin_console/access_control/channel_list should match snaps
           class="Filter"
         >
           <button
-            class="Filter_button"
+            aria-expanded="false"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
             type="button"
           >
-            <i
-              class="Icon icon-filter-variant"
-            />
-            Filters
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-12_1i355_30"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="14"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="14"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Filters
+            </span>
           </button>
           <div
             class="Filter_content"
@@ -713,11 +802,15 @@ exports[`components/admin_console/access_control/channel_list should match snaps
               </div>
             </div>
             <button
-              class="btn btn-primary btn-sm Filter_apply"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
               disabled=""
               type="button"
             >
-              Apply
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Apply
+              </span>
             </button>
           </div>
         </div>
@@ -876,13 +969,40 @@ exports[`components/admin_console/access_control/channel_list should match snaps
           class="Filter"
         >
           <button
-            class="Filter_button"
+            aria-expanded="false"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
             type="button"
           >
-            <i
-              class="Icon icon-filter-variant"
-            />
-            Filters
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-12_1i355_30"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="14"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="14"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Filters
+            </span>
           </button>
           <div
             class="Filter_content"
@@ -992,11 +1112,15 @@ exports[`components/admin_console/access_control/channel_list should match snaps
               </div>
             </div>
             <button
-              class="btn btn-primary btn-sm Filter_apply"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
               disabled=""
               type="button"
             >
-              Apply
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Apply
+              </span>
             </button>
           </div>
         </div>

webapp/channels/src/components/admin_console/access_control/policy_details/policy_details.tsx

@@ -5,9 +5,9 @@ import cloneDeep from 'lodash/cloneDeep';
 import React, {useState, useEffect, useMemo, type JSX} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
+import {Button} from '@mattermost/compass-ui/components/button';
 import {SectionNotice} from '@mattermost/compass-ui/components/section-notice';
 import {GenericModal} from '@mattermost/components';
-import {buttonClassNames} from '@mattermost/shared/components/button';
 import type {AccessControlPolicy, AccessControlPolicyActiveUpdate, AccessControlPolicyRule} from '@mattermost/types/access_control';
 import {getMembershipRule, buildRulesWithMembership, getAutoAddFromRules} from '@mattermost/types/access_control';
 import type {ChannelSearchOpts, ChannelWithTeamData} from '@mattermost/types/channels';
@@ -872,7 +872,7 @@ function PolicyDetails({
                             defaultMessage='Delete Policy'
                         />
                     }
-                    confirmButtonVariant='destructive'
+                    destructive={true}
                     compassDesign={true}
                 >
                     <>
@@ -905,15 +905,17 @@ function PolicyDetails({
                         />
                     }
                 />
-                <BlockableLink
-                    className={buttonClassNames({emphasis: 'quaternary'})}
-                    to='/admin_console/system_attributes/membership_policies'
+                <Button
+                    asChild={true}
+                    emphasis='tertiary'
                 >
-                    <FormattedMessage
-                        id='admin.access_control.edit_policy.cancel'
-                        defaultMessage='Cancel'
-                    />
-                </BlockableLink>
+                    <BlockableLink to='/admin_console/system_attributes/membership_policies'>
+                        <FormattedMessage
+                            id='admin.access_control.edit_policy.cancel'
+                            defaultMessage='Cancel'
+                        />
+                    </BlockableLink>
+                </Button>
                 {serverError && (
                     <span className='EditPolicy__error'>
                         <i className='icon icon-alert-outline'/>

webapp/channels/src/components/admin_console/admin_settings/__snapshots__/admin_setting.test.tsx.snap

@@ -20,13 +20,15 @@ exports[`AdminSettings should match snapshot 1`] = `
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>

webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.scss

@@ -83,9 +83,11 @@ input.AdminUserCard__picture-input[type='file'] {
 .AdminUserCard__footer {
     display: flex;
     flex-direction: row;
+    align-items: center;
     padding: 20px;
     border-top: solid 1px rgba(0, 0, 0, 0.2);
     background-color: #fff;
+    gap: 8px;
 }
 
 .AdminUserCard__user-info {

webapp/channels/src/components/admin_console/audits/audits.tsx

@@ -5,7 +5,7 @@ import React, {useEffect, useState, memo, useCallback} from 'react';
 import type {CSSProperties} from 'react';
 import {FormattedMessage, defineMessages} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import type {Audit} from '@mattermost/types/audits';
 
 import type {ActionResult} from 'mattermost-redux/types/actions';

webapp/channels/src/components/admin_console/billing/billing_subscriptions/cancel_subscription.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {buttonClassNames} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import {useOpenCloudZendeskSupportForm} from 'components/common/hooks/useOpenZendeskForm';
 import ExternalLink from 'components/external_link';
@@ -28,16 +28,23 @@ const CancelSubscription = () => {
                         defaultMessage='At this time, deleting a workspace can only be done with the help of a customer support representative.'
                     />
                 </div>
-                <ExternalLink
-                    location='cancel_subscription'
-                    href={contactSupportURL}
-                    className={buttonClassNames({emphasis: 'secondary', size: 'sm', variant: 'destructive'}, 'cancelSubscriptionSection__contactUs')}
+                <Button
+                    asChild={true}
+                    emphasis='secondary'
+                    size='small'
+                    destructive={true}
+                    className='cancelSubscriptionSection__contactUs'
                 >
-                    <FormattedMessage
-                        id='admin.billing.subscription.cancelSubscriptionSection.contactUs'
-                        defaultMessage='Contact Us'
-                    />
-                </ExternalLink>
+                    <ExternalLink
+                        location='cancel_subscription'
+                        href={contactSupportURL}
+                    >
+                        <FormattedMessage
+                            id='admin.billing.subscription.cancelSubscriptionSection.contactUs'
+                            defaultMessage='Contact Us'
+                        />
+                    </ExternalLink>
+                </Button>
             </div>
         </div>
     );

webapp/channels/src/components/admin_console/billing/billing_subscriptions/contact_sales_card.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button, buttonClassNames} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink';
 import CloudTrialSvg from 'components/common/svg_images_components/cloud_trial_svg';
@@ -140,17 +140,21 @@ const ContactSalesCard = (props: Props) => {
                     {description}
                 </div>
                 {(isFreeTrial || subscriptionPlan === CloudProducts.ENTERPRISE || isCloudLegacyPlan) &&
-                    <ExternalLink
-                        location='contact_sales_card'
-                        href={contactSalesLink}
-                        className={buttonClassNames({emphasis: 'tertiary'}, 'PrivateCloudCard__actionButton')}
+                    <Button
+                        asChild={true}
+                        emphasis='tertiary'
+                        className='PrivateCloudCard__actionButton'
                     >
-                        <FormattedMessage
-                            id='admin.billing.subscription.privateCloudCard.contactSales'
-                            defaultMessage='Contact Sales'
-                        />
-
-                    </ExternalLink>
+                        <ExternalLink
+                            location='contact_sales_card'
+                            href={contactSalesLink}
+                        >
+                            <FormattedMessage
+                                id='admin.billing.subscription.privateCloudCard.contactSales'
+                                defaultMessage='Contact Sales'
+                            />
+                        </ExternalLink>
+                    </Button>
                 }
                 {(!isFreeTrial && subscriptionPlan !== CloudProducts.ENTERPRISE && subscriptionPlan !== CloudProducts.LEGACY) &&
                     <Button

webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss

@@ -29,36 +29,17 @@
     }
 
     &__actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
         padding-top: 20px;
+        gap: 8px;
 
         &--single {
             padding-top: 30px;
         }
     }
 
-    .btn {
-        padding: 11px 16px;
-        border-radius: 4px;
-        margin-right: 8px;
-        background: variables.$primary-color;
-        color: variables.$white;
-        font-size: 12px;
-        font-weight: bold;
-        line-height: 9.5px;
-
-        &:focus,
-        &:active,
-        &:focus:active {
-            border-color: transparent;
-            outline: none;
-        }
-
-        &.btn-secondary {
-            background: rgba(var(--button-bg-rgb), 0.08);
-            color: var(--button-bg);
-        }
-    }
-
     &__contact-link {
         font-weight: bold;
     }

webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.tsx

@@ -5,7 +5,7 @@ import React, {type JSX} from 'react';
 import {useIntl, FormattedMessage} from 'react-intl';
 import {useSelector} from 'react-redux';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import {
     getCloudProducts,

webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx

@@ -5,8 +5,9 @@ import React from 'react';
 import {FormattedDate, FormattedMessage, FormattedNumber, defineMessages} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
-import {CheckCircleOutlineIcon} from '@mattermost/compass-icons/components';
-import {buttonClassNames} from '@mattermost/shared/components/button';
+import {CheckCircleOutlineIcon, FilePdfOutlineIcon} from '@mattermost/compass-icons/components';
+import {Button} from '@mattermost/compass-ui/components/button';
+import {Icon} from '@mattermost/compass-ui/components/icon';
 import {WithTooltip} from '@mattermost/shared/components/tooltip';
 import type {Invoice, InvoiceLineItem, Product} from '@mattermost/types/cloud';
 
@@ -52,16 +53,21 @@ export const noBillingHistory = (
                 defaultMessage='In the future, this is where your most recent bill summary will show.'
             />
         </div>
-        <ExternalLink
-            location='billing_summary'
-            href={CloudLinks.BILLING_DOCS}
-            className={buttonClassNames({emphasis: 'primary'}, 'BillingSummary__noBillingHistory-link')}
+        <Button
+            asChild={true}
+            emphasis='primary'
+            className='BillingSummary__noBillingHistory-link'
         >
-            <FormattedMessage
-                id='admin.billing.subscriptions.billing_summary.noBillingHistory.link'
-                defaultMessage='See how billing works'
-            />
-        </ExternalLink>
+            <ExternalLink
+                location='billing_summary'
+                href={CloudLinks.BILLING_DOCS}
+            >
+                <FormattedMessage
+                    id='admin.billing.subscriptions.billing_summary.noBillingHistory.link'
+                    defaultMessage='See how billing works'
+                />
+            </ExternalLink>
+        </Button>
     </div>
 );
 
@@ -115,17 +121,17 @@ export const FreeTrial = ({daysLeftOnTrial}: FreeTrialProps) => {
                     />
                 }
             </div>
-            <button
+            <Button
                 type='button'
+                emphasis='primary'
+                className='UpgradeMattermostCloud__upgradeButton'
                 onClick={() => openSalesLink()}
-                className={buttonClassNames({emphasis: 'primary'}, 'UpgradeMattermostCloud__upgradeButton')}
             >
                 <FormattedMessage
                     id='admin.billing.subscription.privateCloudCard.contactSales'
                     defaultMessage='Contact Sales'
                 />
-
-            </button>
+            </Button>
         </div>);
 };
 
@@ -337,16 +343,18 @@ export const InvoiceInfo = ({invoice, product, fullCharges, partialCharges, hasM
                 </div>
             </div>
             <div className='BillingSummary__lastInvoice-download'>
-                <button
+                <Button
+                    type='button'
+                    emphasis='primary'
+                    className='BillingSummary__lastInvoice-downloadButton'
                     onClick={openInvoicePreview}
-                    className={buttonClassNames({emphasis: 'primary'}, 'BillingSummary__lastInvoice-downloadButton')}
+                    leadingIcon={<Icon glyph={<FilePdfOutlineIcon/>}/>}
                 >
-                    <i className='icon icon-file-pdf-outline'/>
                     <FormattedMessage
                         id='admin.billing.subscriptions.billing_summary.lastInvoice.viewInvoice'
                         defaultMessage='View Invoice'
                     />
-                </button>
+                </Button>
             </div>
             <BlockableLink
                 to='/admin_console/billing/billing_history'

webapp/channels/src/components/admin_console/billing/company_info_display.scss

@@ -48,10 +48,6 @@
 
 .CompanyInfoDisplay__noCompanyInfo-link {
     margin-top: 20px;
-    color: var(--sys-button-bg);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
 }
 
 .CompanyInfoDisplay__companyInfo {

webapp/channels/src/components/admin_console/billing/company_info_display.tsx

@@ -5,7 +5,9 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useSelector} from 'react-redux';
 
-import {buttonClassNames} from '@mattermost/shared/components/button';
+import {PlusIcon} from '@mattermost/compass-icons/components';
+import {Button} from '@mattermost/compass-ui/components/button';
+import {Icon} from '@mattermost/compass-ui/components/icon';
 
 import BlockableLink from 'components/admin_console/blockable_link';
 import CompanySvg from 'components/common/svg_images_components/company_svg';
@@ -16,16 +18,19 @@ import './company_info_display.scss';
 
 const addInfoButton = (
     <div className='CompanyInfoDisplay__addInfo'>
-        <BlockableLink
-            to='/admin_console/billing/company_info_edit'
-            className={buttonClassNames({emphasis: 'primary'}, 'CompanyInfoDisplay__addInfoButton')}
+        <Button
+            asChild={true}
+            emphasis='primary'
+            className='CompanyInfoDisplay__addInfoButton'
+            leadingIcon={<Icon glyph={<PlusIcon/>}/>}
         >
-            <i className='icon icon-plus'/>
-            <FormattedMessage
-                id='admin.billing.company_info.add'
-                defaultMessage='Add Company Information'
-            />
-        </BlockableLink>
+            <BlockableLink to='/admin_console/billing/company_info_edit'>
+                <FormattedMessage
+                    id='admin.billing.company_info.add'
+                    defaultMessage='Add Company Information'
+                />
+            </BlockableLink>
+        </Button>
     </div>
 );
 
@@ -41,15 +46,18 @@ const noCompanyInfoSection = (
                 defaultMessage='There is currently no company information on file.'
             />
         </div>
-        <BlockableLink
-            to='/admin_console/billing/company_info_edit'
-            className={buttonClassNames({emphasis: 'primary'}, 'CompanyInfoDisplay__noCompanyInfo-link')}
+        <Button
+            asChild={true}
+            emphasis='primary'
+            className='CompanyInfoDisplay__noCompanyInfo-link'
         >
-            <FormattedMessage
-                id='admin.billing.company_info.add'
-                defaultMessage='Add Company Information'
-            />
-        </BlockableLink>
+            <BlockableLink to='/admin_console/billing/company_info_edit'>
+                <FormattedMessage
+                    id='admin.billing.company_info.add'
+                    defaultMessage='Add Company Information'
+                />
+            </BlockableLink>
+        </Button>
     </div>
 );
 

webapp/channels/src/components/admin_console/billing/company_info_edit.tsx

@@ -7,7 +7,7 @@ import {defineMessage, FormattedMessage} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import {useHistory} from 'react-router-dom';
 
-import {buttonClassNames} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import {getCloudCustomer, updateCloudCustomer, updateCloudCustomerAddress} from 'mattermost-redux/actions/cloud';
 
@@ -285,15 +285,17 @@ const CompanyInfoEdit: React.FC<Props> = () => {
                         />
                     )}
                 />
-                <BlockableLink
-                    className={buttonClassNames({emphasis: 'tertiary'})}
-                    to='/admin_console/billing/company_info'
+                <Button
+                    asChild={true}
+                    emphasis='tertiary'
                 >
-                    <FormattedMessage
-                        id='admin.billing.company_info_edit.cancel'
-                        defaultMessage='Cancel'
-                    />
-                </BlockableLink>
+                    <BlockableLink to='/admin_console/billing/company_info'>
+                        <FormattedMessage
+                            id='admin.billing.company_info_edit.cancel'
+                            defaultMessage='Cancel'
+                        />
+                    </BlockableLink>
+                </Button>
             </div>
         </div>
     );

webapp/channels/src/components/admin_console/billing/plan_details/plan_details.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal';
 import Tag from 'components/widgets/tag/tag';

webapp/channels/src/components/admin_console/blockable_button/blockable_button.tsx

@@ -1,45 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useCallback} from 'react';
-import type {MouseEvent} from 'react';
-
-type Props = {
-    id?: string;
-    activeClassName?: string;
-
-    // Bool whether navigation is blocked
-    blocked: boolean;
-
-    actions: {
-
-        // Function for deferring navigation while blocked
-        deferNavigation: (func: () => void) => void;
-    };
-    children?: React.ReactNode;
-    className?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    onCancelConfirmed: () => void;
-};
-
-const BlockableButton = ({blocked, actions, onClick, onCancelConfirmed, ...restProps}: Props) => {
-    const handleClick = useCallback((e: MouseEvent) => {
-        onClick?.(e);
-
-        if (blocked) {
-            e.preventDefault();
-            actions.deferNavigation(() => {
-                onCancelConfirmed();
-            });
-        }
-    }, [actions, blocked, onClick, onCancelConfirmed]);
-
-    return (
-        <button
-            {...restProps}
-            onClick={handleClick}
-        />
-    );
-};
-
-export default React.memo(BlockableButton);

webapp/channels/src/components/admin_console/blockable_button/index.ts

@@ -1,29 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import type {Dispatch} from 'redux';
-
-import {deferNavigation} from 'actions/admin_actions';
-import {getNavigationBlocked} from 'selectors/views/admin';
-
-import type {GlobalState} from 'types/store';
-
-import BlockableButton from './blockable_button';
-
-function mapStateToProps(state: GlobalState) {
-    return {
-        blocked: getNavigationBlocked(state),
-    };
-}
-
-function mapDispatchToProps(dispatch: Dispatch) {
-    return {
-        actions: bindActionCreators({
-            deferNavigation,
-        }, dispatch),
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(BlockableButton);

webapp/channels/src/components/admin_console/blockable_link/blockable_link.tsx

@@ -24,6 +24,7 @@ type Props = {
     children?: string | React.ReactNode;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
+    'data-testid'?: string;
 };
 
 const BlockableLink = ({blocked, actions, onClick, to, ...restProps}: Props) => {

webapp/channels/src/components/admin_console/board_attributes/board_attributes_delete_modal.tsx

@@ -70,7 +70,7 @@ function RemoveBoardAttributeFieldModal({
     return (
         <GenericModal
             confirmButtonText={confirmButtonText}
-            confirmButtonVariant='destructive'
+            destructive={true}
             handleCancel={onCancel}
             handleConfirm={onConfirm}
             modalHeaderText={title}

webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx

@@ -4,7 +4,7 @@
 import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import {WithTooltip} from '@mattermost/shared/components/tooltip';
 
 import {Client4} from 'mattermost-redux/client';

webapp/channels/src/components/admin_console/classification_markings/classification_markings.tsx

@@ -882,7 +882,7 @@ export default function ClassificationMarkings({disabled}: Props) {
                 title={formatMessage({id: 'admin.classification_markings.preset_switch.title', defaultMessage: 'Change classification preset?'})}
                 message={formatMessage({id: 'admin.classification_markings.preset_switch.message', defaultMessage: 'Changing the classification preset will affect all existing classifications across the system. Any channels, files, or other resources marked with the current classification levels may lose their markings.'})}
                 confirmButtonText={formatMessage({id: 'admin.classification_markings.preset_switch.confirm', defaultMessage: 'Change preset'})}
-                confirmButtonVariant='destructive'
+                destructive={true}
                 onConfirm={handleConfirmPresetSwitch}
                 onCancel={handleCancelPresetSwitch}
                 onExited={handleCancelPresetSwitch}

webapp/channels/src/components/admin_console/classification_markings/classification_markings_styled.tsx

@@ -1,9 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import type {ComponentProps} from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import {SectionContent} from '../system_properties/controls';
 
@@ -88,14 +90,14 @@ export const AddLevelButtonRow = styled.div`
     margin-left: 16px;
 `;
 
-export const AddLevelButton = styled(Button).attrs({
-    type: 'button',
-    emphasis: 'tertiary',
-})`
-    && {
-        padding-inline: 16px;
-    }
-`;
+export const AddLevelButton = ({style, ...props}: ComponentProps<typeof Button>) => (
+    <Button
+        type='button'
+        emphasis='tertiary'
+        style={{paddingInline: 16, ...style}}
+        {...props}
+    />
+);
 
 export const TableWrapper = styled.div`
     table.adminConsoleListTable {
@@ -209,6 +211,7 @@ export const ActionsCell = styled.div`
     text-align: right;
 `;
 
+// Native button (not Compass) — hover styles without styled(CompassButton).
 export const DeleteButton = styled.button.attrs({className: 'btn btn-sm btn-transparent'})`
     &:hover {
         background: rgba(var(--error-text-color-rgb, 210, 75, 78), 0.08);

webapp/channels/src/components/admin_console/cluster_table.tsx

@@ -5,7 +5,7 @@ import React, {PureComponent} from 'react';
 import type {CSSProperties, MouseEvent} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import ReloadIcon from 'components/widgets/icons/fa_reload_icon';
 import WarningIcon from 'components/widgets/icons/fa_warning_icon';

webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx

@@ -4,7 +4,7 @@
 import React, {type JSX} from 'react';
 import {FormattedDate, FormattedMessage, FormattedTime, defineMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import type {Compliance} from '@mattermost/types/compliance';
 import type {UserProfile} from '@mattermost/types/users';
 

webapp/channels/src/components/admin_console/content_flagging/content_reviewers/team_reviewers_section/team_reviewers_section.tsx

@@ -5,6 +5,7 @@ import React, {useCallback, useEffect, useMemo, useState, type JSX} from 'react'
 import {useIntl} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
+import {Button} from '@mattermost/compass-ui/components/button';
 import {Switch} from '@mattermost/compass-ui/components/switch';
 import type {TeamReviewerSetting} from '@mattermost/types/config';
 import type {Team, TeamSearchOpts} from '@mattermost/types/teams';
@@ -198,16 +199,17 @@ export default function TeamReviewers({teamReviewersSetting, onChange, disabled}
 
     const disableAllBtn = useMemo(() => (
         <div className='TeamReviewers__disable-all'>
-            <button
+            <Button
                 data-testid='disableForAllTeamsButton'
-                className='btn btn-link icon-close'
+                emphasis='link'
+                className='icon-close'
                 aria-label={intl.formatMessage({id: 'admin.dataSpillage.reviewerSettings.disableAll', defaultMessage: 'Disable for all teams'})}
                 disabled={disabled}
                 aria-disabled={disabled}
                 onClick={handleDisableForAllTeams}
             >
                 {intl.formatMessage({id: 'admin.dataSpillage.reviewerSettings.disableAll', defaultMessage: 'Disable for all teams'})}
-            </button>
+            </Button>
         </div>
     ), [disabled, intl, handleDisableForAllTeams]);
 

webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap

@@ -349,10 +349,14 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
                     class="help-text"
                   >
                     <button
-                      class="btn btn-tertiary"
+                      class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                       type="button"
                     >
-                      Regenerate
+                      <span
+                        class="_button__label_we8pe_31"
+                      >
+                        Regenerate
+                      </span>
                     </button>
                   </div>
                   <div
@@ -437,13 +441,15 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       class="admin-console-save"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
         data-testid="saveSetting"
         disabled=""
         id="saveSetting"
         type="submit"
       >
-        <span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Save
         </span>
       </button>
@@ -488,13 +494,15 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       class="admin-console-save"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
         data-testid="saveSetting"
         disabled=""
         id="saveSetting"
         type="submit"
       >
-        <span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Save
         </span>
       </button>
@@ -856,10 +864,14 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
                     class="help-text"
                   >
                     <button
-                      class="btn btn-tertiary"
+                      class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
                       type="button"
                     >
-                      Regenerate
+                      <span
+                        class="_button__label_we8pe_31"
+                      >
+                        Regenerate
+                      </span>
                     </button>
                   </div>
                   <div
@@ -944,13 +956,15 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
       class="admin-console-save"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
         data-testid="saveSetting"
         disabled=""
         id="saveSetting"
         type="submit"
       >
-        <span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Save
         </span>
       </button>

webapp/channels/src/components/admin_console/custom_plugin_settings/enable_plugin_button.tsx

@@ -171,7 +171,7 @@ export function PluginEnableButton({actions, disabled, homepageUrl, id, saveNeed
                     defaultMessage='Are you sure you would like to remove the plugin?'
                 />
             }
-            confirmButtonVariant='destructive'
+            destructive={true}
             confirmButtonText={
                 <FormattedMessage
                     id='admin.plugin.remove_modal.overwrite'

webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap

@@ -172,13 +172,15 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
         class="admin-console-save"
       >
         <button
-          class="btn btn-primary"
+          class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
           data-testid="saveSetting"
           disabled=""
           id="saveSetting"
           type="submit"
         >
-          <span>
+          <span
+            class="_button__label_we8pe_31"
+          >
             Save
           </span>
         </button>

webapp/channels/src/components/admin_console/data_retention_settings/__snapshots__/data_retention_settings.test.tsx.snap

@@ -86,9 +86,14 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add policy
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add policy
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -154,10 +159,15 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
               disabled=""
+              type="button"
             >
-              Run Deletion Job Now
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Run Deletion Job Now
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -319,9 +329,14 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add policy
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add policy
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -423,9 +438,14 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Run Deletion Job Now
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Run Deletion Job Now
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -587,9 +607,14 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add policy
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add policy
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -691,9 +716,14 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Run Deletion Job Now
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Run Deletion Job Now
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -855,9 +885,14 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add policy
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add policy
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -923,9 +958,14 @@ exports[`components/admin_console/data_retention_settings/data_retention_setting
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Run Deletion Job Now
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Run Deletion Job Now
+              </span>
             </button>
             <hr
               class="Card__hr"

webapp/channels/src/components/admin_console/data_retention_settings/channel_list/__snapshots__/channel_list.test.tsx.snap

@@ -39,13 +39,40 @@ exports[`components/admin_console/data_retention_settings/channel_list should ma
           class="Filter"
         >
           <button
-            class="Filter_button"
+            aria-expanded="false"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
             type="button"
           >
-            <i
-              class="Icon icon-filter-variant"
-            />
-            Filters
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-12_1i355_30"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="14"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="14"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Filters
+            </span>
           </button>
           <div
             class="Filter_content"
@@ -249,11 +276,15 @@ exports[`components/admin_console/data_retention_settings/channel_list should ma
               </div>
             </div>
             <button
-              class="btn btn-primary btn-sm Filter_apply"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
               disabled=""
               type="button"
             >
-              Apply
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Apply
+              </span>
             </button>
           </div>
         </div>
@@ -426,13 +457,40 @@ exports[`components/admin_console/data_retention_settings/channel_list should ma
           class="Filter"
         >
           <button
-            class="Filter_button"
+            aria-expanded="false"
+            class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
             type="button"
           >
-            <i
-              class="Icon icon-filter-variant"
-            />
-            Filters
+            <span
+              class="_button__icon-slot_we8pe_35"
+            >
+              <div
+                aria-hidden="true"
+                class="_icon_1i355_2 _icon--size-12_1i355_30"
+              >
+                <div
+                  class="_icon__glyph-area_1i355_9"
+                >
+                  <svg
+                    fill="currentColor"
+                    height="14"
+                    version="1.1"
+                    viewBox="0 0 24 24"
+                    width="14"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </span>
+            <span
+              class="_button__label_we8pe_31"
+            >
+              Filters
+            </span>
           </button>
           <div
             class="Filter_content"
@@ -636,11 +694,15 @@ exports[`components/admin_console/data_retention_settings/channel_list should ma
               </div>
             </div>
             <button
-              class="btn btn-primary btn-sm Filter_apply"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
               disabled=""
               type="button"
             >
-              Apply
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Apply
+              </span>
             </button>
           </div>
         </div>

webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/__snapshots__/custom_policy_form.test.tsx.snap

@@ -200,9 +200,14 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add teams
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add teams
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -292,9 +297,14 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add channels
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add channels
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -341,13 +351,40 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
                     class="Filter"
                   >
                     <button
-                      class="Filter_button"
+                      aria-expanded="false"
+                      class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
                       type="button"
                     >
-                      <i
-                        class="Icon icon-filter-variant"
-                      />
-                      Filters
+                      <span
+                        class="_button__icon-slot_we8pe_35"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="_icon_1i355_2 _icon--size-12_1i355_30"
+                        >
+                          <div
+                            class="_icon__glyph-area_1i355_9"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="14"
+                              version="1.1"
+                              viewBox="0 0 24 24"
+                              width="14"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </span>
+                      <span
+                        class="_button__label_we8pe_31"
+                      >
+                        Filters
+                      </span>
                     </button>
                     <div
                       class="Filter_content"
@@ -551,11 +588,15 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
                         </div>
                       </div>
                       <button
-                        class="btn btn-primary btn-sm Filter_apply"
+                        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
                         disabled=""
                         type="button"
                       >
-                        Apply
+                        <span
+                          class="_button__label_we8pe_31"
+                        >
+                          Apply
+                        </span>
                       </button>
                     </div>
                   </div>
@@ -598,21 +639,27 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
       class="admin-console-save"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
         data-testid="saveSetting"
         disabled=""
         id="saveSetting"
         type="submit"
       >
-        <span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Save
         </span>
       </button>
       <a
-        class="btn btn-tertiary"
+        class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
         href="/admin_console/compliance/data_retention_settings"
       >
-        Cancel
+        <span
+          class="_button__label_we8pe_31"
+        >
+          Cancel
+        </span>
       </a>
     </div>
   </div>
@@ -814,9 +861,14 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add teams
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add teams
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -918,9 +970,14 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
               </div>
             </div>
             <button
-              class="btn btn-primary"
+              class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
+              type="button"
             >
-              Add channels
+              <span
+                class="_button__label_we8pe_31"
+              >
+                Add channels
+              </span>
             </button>
             <hr
               class="Card__hr"
@@ -967,13 +1024,40 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
                     class="Filter"
                   >
                     <button
-                      class="Filter_button"
+                      aria-expanded="false"
+                      class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-small_we8pe_53 Filter_button"
                       type="button"
                     >
-                      <i
-                        class="Icon icon-filter-variant"
-                      />
-                      Filters
+                      <span
+                        class="_button__icon-slot_we8pe_35"
+                      >
+                        <div
+                          aria-hidden="true"
+                          class="_icon_1i355_2 _icon--size-12_1i355_30"
+                        >
+                          <div
+                            class="_icon__glyph-area_1i355_9"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="14"
+                              version="1.1"
+                              viewBox="0 0 24 24"
+                              width="14"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </span>
+                      <span
+                        class="_button__label_we8pe_31"
+                      >
+                        Filters
+                      </span>
                     </button>
                     <div
                       class="Filter_content"
@@ -1177,11 +1261,15 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
                         </div>
                       </div>
                       <button
-                        class="btn btn-primary btn-sm Filter_apply"
+                        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-small_we8pe_53 Filter_apply"
                         disabled=""
                         type="button"
                       >
-                        Apply
+                        <span
+                          class="_button__label_we8pe_31"
+                        >
+                          Apply
+                        </span>
                       </button>
                     </div>
                   </div>
@@ -1236,21 +1324,27 @@ exports[`components/admin_console/data_retention_settings/custom_policy_form sho
       class="admin-console-save"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
         data-testid="saveSetting"
         disabled=""
         id="saveSetting"
         type="submit"
       >
-        <span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Save
         </span>
       </button>
       <a
-        class="btn btn-tertiary"
+        class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
         href="/admin_console/compliance/data_retention_settings"
       >
-        Cancel
+        <span
+          class="_button__label_we8pe_31"
+        >
+          Cancel
+        </span>
       </a>
     </div>
   </div>

webapp/channels/src/components/admin_console/data_retention_settings/custom_policy_form/custom_policy_form.tsx

@@ -5,7 +5,7 @@ import React, {type JSX} from 'react';
 import {defineMessages, FormattedMessage, injectIntl} from 'react-intl';
 import type {WrappedComponentProps} from 'react-intl';
 
-import {buttonClassNames} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import type {ChannelWithTeamData} from '@mattermost/types/channels';
 import type {
     DataRetentionCustomPolicy,
@@ -536,15 +536,17 @@ class CustomPolicyForm extends React.PureComponent<Props, State> {
                             />
                         )}
                     />
-                    <BlockableLink
-                        className={buttonClassNames({emphasis: 'tertiary'})}
-                        to='/admin_console/compliance/data_retention_settings'
+                    <Button
+                        asChild={true}
+                        emphasis='tertiary'
                     >
-                        <FormattedMessage
-                            id='admin.data_retention.custom_policy.cancel'
-                            defaultMessage='Cancel'
-                        />
-                    </BlockableLink>
+                        <BlockableLink to='/admin_console/compliance/data_retention_settings'>
+                            <FormattedMessage
+                                id='admin.data_retention.custom_policy.cancel'
+                                defaultMessage='Cancel'
+                            />
+                        </BlockableLink>
+                    </Button>
                     {serverError &&
                         <span className='CustomPolicy__error'>
                             <i className='icon icon-alert-outline'/>

webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/__snapshots__/global_policy_form.test.tsx.snap

@@ -239,21 +239,27 @@ exports[`components/PluginManagement should match snapshot 1`] = `
       class="admin-console-save"
     >
       <button
-        class="btn btn-primary"
+        class="_button_we8pe_2 _button--emphasis-primary_we8pe_87 _button--size-medium_we8pe_64"
         data-testid="saveSetting"
         disabled=""
         id="saveSetting"
         type="submit"
       >
-        <span>
+        <span
+          class="_button__label_we8pe_31"
+        >
           Save
         </span>
       </button>
       <a
-        class="btn btn-tertiary"
+        class="_button_we8pe_2 _button--emphasis-tertiary_we8pe_117 _button--size-medium_we8pe_64"
         href="/admin_console/compliance/data_retention_settings"
       >
-        Cancel
+        <span
+          class="_button__label_we8pe_31"
+        >
+          Cancel
+        </span>
       </a>
     </div>
   </div>

webapp/channels/src/components/admin_console/data_retention_settings/global_policy_form/global_policy_form.tsx

@@ -4,7 +4,7 @@
 import React, {type JSX} from 'react';
 import {defineMessages, FormattedMessage} from 'react-intl';
 
-import {buttonClassNames} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import type {AdminConfig, EnvironmentConfig} from '@mattermost/types/config';
 import type {DeepPartial} from '@mattermost/types/utilities';
 
@@ -273,15 +273,17 @@ export default class GlobalPolicyForm extends React.PureComponent<Props, State>
                             />
                         )}
                     />
-                    <BlockableLink
-                        className={buttonClassNames({emphasis: 'tertiary'})}
-                        to='/admin_console/compliance/data_retention_settings'
+                    <Button
+                        asChild={true}
+                        emphasis='tertiary'
                     >
-                        <FormattedMessage
-                            id='admin.data_retention.custom_policy.cancel'
-                            defaultMessage='Cancel'
-                        />
-                    </BlockableLink>
+                        <BlockableLink to='/admin_console/compliance/data_retention_settings'>
+                            <FormattedMessage
+                                id='admin.data_retention.custom_policy.cancel'
+                                defaultMessage='Cancel'
+                            />
+                        </BlockableLink>
+                    </Button>
                     {this.state.serverError &&
                         <span className='CustomPolicy__error'>
                             <i className='icon icon-alert-outline'/>

webapp/channels/src/components/admin_console/file_upload_setting.tsx

@@ -4,7 +4,7 @@
 import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import * as Utils from 'utils/utils';
 

webapp/channels/src/components/admin_console/filter/filter.scss

@@ -3,29 +3,14 @@
     display: inline-block;
     padding-left: 8px;
 
-    .Filter_button {
-        width: auto;
-        height: 32px;
-        padding: 0 10px;
-        border: 0;
-        border-radius: 4px;
-        background: var(--sys-center-channel-bg);
-        color: var(--sys-button-bg);
-        font-size: 12px;
-
-        &.Filter__active,
-        &:focus {
-            background: rgba(var(--sys-button-bg-rgb), 0.12);
-        }
-
-        &:hover {
-            background: rgba(var(--sys-button-bg-rgb), 0.06);
-        }
-    }
-
-    .Icon {
-        margin-right: 2px;
-        font-size: 14px;
+    // Held-open state. Compass's :active is momentary, so drive this off
+    // aria-expanded, which is already the source of truth for the popover.
+    // The :hover variant is spelled out because Compass's own hover rule has
+    // the same specificity as the bare one and would otherwise win on order,
+    // and the tint has to clear the 8% resting tertiary to read as a state.
+    .Filter_button[aria-expanded='true'],
+    .Filter_button[aria-expanded='true']:hover {
+        background-color: rgba(var(--link-color-rgb), 0.24);
     }
 
     .Filter_content {

webapp/channels/src/components/admin_console/filter/filter.tsx

@@ -5,7 +5,9 @@ import classNames from 'classnames';
 import React, {type JSX} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {FilterVariantIcon} from '@mattermost/compass-icons/components';
+import {Button} from '@mattermost/compass-ui/components/button';
+import {Icon} from '@mattermost/compass-ui/components/icon';
 
 import FilterList from './filter_list';
 
@@ -190,20 +192,22 @@ class Filter extends React.PureComponent<Props, State> {
                 className='Filter'
                 ref={this.filterRef}
             >
-                <button
+                <Button
                     type='button'
-                    className={classNames('Filter_button', {Filter__active: this.state.show})}
+                    emphasis='tertiary'
+                    size='small'
+                    className='Filter_button'
+                    aria-expanded={this.state.show}
                     onClick={this.togglePopover}
                     ref={this.buttonRef}
+                    leadingIcon={<Icon glyph={<FilterVariantIcon/>}/>}
                 >
-                    <i className='Icon icon-filter-variant'/>
-
                     <FormattedMessage
                         id='admin.filter.filters'
                         defaultMessage='Filters'
                     />
                     {filterCount > 0 && ` (${filterCount})`}
-                </button>
+                </Button>
 
                 <div
                     className={classNames('Filter_content', {Filter__show: this.state.show})}
@@ -236,7 +240,7 @@ class Filter extends React.PureComponent<Props, State> {
                     <Button
                         type='button'
                         emphasis='primary'
-                        size='sm'
+                        size='small'
                         className='Filter_apply'
                         disabled={!this.state.optionsModified}
                         onClick={this.onFilter}

webapp/channels/src/components/admin_console/generated_setting.tsx

@@ -5,7 +5,7 @@ import crypto from 'crypto';
 import React, {memo, useCallback} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import SetByEnv from './set_by_env';
 

webapp/channels/src/components/admin_console/global_attributes/applies_to/applies_to_card.scss

@@ -43,13 +43,9 @@
     margin-top: 12px;
 }
 
-// Shell comes from buttonClassNames({emphasis: 'tertiary'}); this only aligns
-// the icon and opts out of the flex parent stretching it to the full row width.
-// Setting `display` here would fight .btn's own inline-flex.
+// Align the leading icon; compass-ui Button owns display/padding.
 .AppliesToCard__addResource {
-    align-items: center;
     align-self: flex-start;
-    gap: 6px;
 }
 
 // Rows this card only reports on, so they sit flat above the editable Channels

webapp/channels/src/components/admin_console/global_attributes/applies_to/applies_to_card.tsx

@@ -1,12 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import classNames from 'classnames';
 import React from 'react';
 import {defineMessages, FormattedMessage} from 'react-intl';
 
 import {PlusIcon} from '@mattermost/compass-icons/components';
-import {buttonClassNames} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
+import {Icon} from '@mattermost/compass-ui/components/icon';
 
 import Card from 'components/card/card';
 
@@ -109,16 +109,17 @@ const AppliesToCard = ({channelResource, onChannelResourceChange, onChannelResou
                 )}
                 {!channelResource && (
                     <div className='AppliesToCard__footer'>
-                        <button
+                        <Button
                             type='button'
-                            className={classNames(buttonClassNames({emphasis: 'tertiary'}), 'AppliesToCard__addResource')}
+                            emphasis='tertiary'
+                            className='AppliesToCard__addResource'
                             onClick={() => onChannelResourceChange({...DEFAULT_CHANNEL_RESOURCE_CONFIG})}
                             disabled={disabled}
                             data-testid='appliesToAddResource'
+                            leadingIcon={<Icon glyph={<PlusIcon/>}/>}
                         >
-                            <PlusIcon size={16}/>
                             <FormattedMessage {...messages.addResource}/>
-                        </button>
+                        </Button>
                     </div>
                 )}
             </Card.Body>

webapp/channels/src/components/admin_console/global_attributes/applies_to/channels/channels_resource_row.scss

@@ -54,7 +54,7 @@
     }
 }
 
-.btn.btn-sm.ChannelsResourceRow__remove {
+.ChannelsResourceRow__remove {
     height: 32px;
     flex-shrink: 0;
     align-self: center;

webapp/channels/src/components/admin_console/global_attributes/applies_to/channels/channels_resource_row.tsx

@@ -6,7 +6,7 @@ import React, {useMemo, useState} from 'react';
 import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
 
 import {ChevronDownIcon, ChevronRightIcon} from '@mattermost/compass-icons/components';
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 
 import ChannelsResourceSettings from './channels_resource_settings';
 import {summarizeChannelResource} from './summary';
@@ -79,8 +79,8 @@ const ChannelsResourceRow = ({value, onChange, onRemove, ordered, disabled}: Pro
                     <Button
                         type='button'
                         emphasis='tertiary'
-                        variant='destructive'
-                        size='sm'
+                        destructive={true}
+                        size='small'
                         className='ChannelsResourceRow__remove'
                         onClick={onRemove}
                         disabled={disabled}

webapp/channels/src/components/admin_console/global_attributes/attribute_details/attribute_applies_to.tsx

@@ -7,8 +7,7 @@ import React, {useMemo} from 'react';
 import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
 
 import {PlusIcon} from '@mattermost/compass-icons/components';
-import type {ButtonEmphasis} from '@mattermost/shared/components/button';
-import {buttonClassNames} from '@mattermost/shared/components/button';
+import {buttonClassNames, type ButtonEmphasis} from '@mattermost/shared/components/button';
 import type {FieldVisibility} from '@mattermost/types/properties';
 
 import Card from 'components/card/card';

webapp/channels/src/components/admin_console/global_attributes/attribute_details/attribute_applies_to_channel_item.tsx

@@ -6,7 +6,7 @@ import React, {useMemo, useState, type JSX} from 'react';
 import {defineMessages, FormattedMessage, useIntl} from 'react-intl';
 
 import {ChevronDownIcon} from '@mattermost/compass-icons/components';
-import {Button} from '@mattermost/shared/components/button';
+import {Button} from '@mattermost/compass-ui/components/button';
 import {WithTooltip} from '@mattermost/shared/components/tooltip';
 
 import {resourceTypeLabels, type AttributeAppliesToChannelItemProps} from './attribute_applies_to_constants';
@@ -71,8 +71,8 @@ function AttributeAppliesToChannelItem({config, onConfigChange, ordered, disable
         <Button
             type='button'
             emphasis='tertiary'
-            variant='destructive'
-            size='sm'
+            destructive={true}
+            size='small'
             className='AttributeAppliesToItem__remove'
             onClick={onRemove}
             disabled={disabled || Boolean(removeLockedTooltip)}

webapp/channels/src/components/admin_console/global_attributes/attribute_details/attribute_applies_to_item.scss

@@ -25,11 +25,6 @@
     background: rgba(var(--center-channel-color-rgb), 0.03);
 }
 
-// Header already uses gap; Compass .btn + .btn would add a second 8px.
-.AttributeAppliesToItem__header .btn + .btn {
-    margin-left: 0;
-}
-
 .AttributeAppliesToItem__toggle {
     display: flex;
     min-width: 0;
@@ -105,7 +100,7 @@
     white-space: nowrap;
 }
 
-.btn.btn-sm.AttributeAppliesToItem__remove {
+.AttributeAppliesToItem__remove {
     height: 32px;
     flex-shrink: 0;
     align-self: center;