From bb2193b6f5786d4c29bb14ee1e3d85622fa5f7f4 Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Tue, 4 Aug 2026 21:54:04 +0100
Subject: [PATCH] refactor: Button components (#6929)

* feat: refactor button components

* fix: qa

* fix: storybook

* a11y: pass

* fix: build

* fix: rename default ->md

* fix: lint

* docs: buttons.md

* refactor part 1

* refactor part 2

* fix: undo refactor for fresh restart

* refactor

* Revert "refactor"

This reverts commit 96d65902d75fa766aafef3a3ef03746b9aa4ab70.

* refactor: part 1

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: remove text-contrast

* fix: qa

* fix: v-tooltip

* fix: lint

* fix: split broken

* fix: passkey qa

* fix: qa

* fix: qa

* fix: prepr

* fix: splitbutton

* improve button group seam

---------

Signed-off-by: Calum H. <calum@modrinth.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
---
 apps/app-frontend/src/App.vue                 | 106 ++-
 .../src/components/ui/AccountsCard.vue        |  49 +-
 .../src/components/ui/AddContentButton.vue    |  45 +-
 .../src/components/ui/AppActionBar.vue        |  44 +-
 .../src/components/ui/ErrorModal.vue          |  37 +-
 .../src/components/ui/ExportModal.vue         |  22 +-
 .../src/components/ui/Instance.vue            | 123 +--
 .../src/components/ui/InstanceIndicator.vue   |   6 +-
 .../src/components/ui/JavaDetectionModal.vue  |  45 +-
 .../src/components/ui/JavaSelector.vue        | 109 ++-
 .../src/components/ui/ModpackVersionModal.vue |  22 +-
 .../src/components/ui/SurveyPopup.vue         |  22 +-
 .../src/components/ui/URLConfirmModal.vue     |   6 +-
 .../src/components/ui/WindowControls.vue      |  48 +-
 .../components/ui/app-update-button/index.vue |  45 +-
 .../src/components/ui/friends/FriendsList.vue |  97 +-
 .../components/ui/friends/FriendsSection.vue  |  56 +-
 .../install_flow/AddServerToInstanceModal.vue |  24 +-
 .../MinecraftAuthErrorModal.vue               |  43 +-
 .../MinecraftRequiredModal.vue                |  61 +-
 .../ui/modal/ConfirmDeleteInstanceModal.vue   |  22 +-
 .../ui/modal/InstallToPlayModal.vue           |  60 +-
 .../ui/modal/ModpackAlreadyInstalledModal.vue |  32 +-
 .../ui/modal/ModrinthAccountRequiredModal.vue |  58 +-
 .../ui/settings/account/PrivacySettings.vue   |  12 +-
 .../settings/display/FeatureFlagSettings.vue  |  17 +-
 .../instances/ResourceManagementSettings.vue  |  29 +-
 .../SharedInstanceAlreadyInstalledModal.vue   |  32 +-
 .../shared-instance-install-modal/index.vue   |  62 +-
 .../shared-instance-install-summary.vue       |  12 +-
 .../src/components/ui/skin/EditSkinModal.vue  |  38 +-
 .../ui/skin/VirtualSkinSectionList.vue        |  99 +-
 .../src/components/ui/world/InstanceItem.vue  |  99 +-
 .../src/components/ui/world/WorldItem.vue     | 345 +++----
 .../ui/world/modal/AddServerModal.vue         |  32 +-
 .../world/modal/ConfirmRemoveWorldModal.vue   |  27 +-
 .../ui/world/modal/EditServerModal.vue        |  22 +-
 .../modal/EditSingleplayerWorldModal.vue      |  32 +-
 .../app-frontend/src/locales/en-US/index.json |   3 +
 apps/app-frontend/src/pages/Skins.vue         |  88 +-
 apps/app-frontend/src/pages/User.vue          |  86 +-
 .../admonitions/shared-instance-stale.vue     |  40 +-
 .../shared-instance-unavailable.vue           |  12 +-
 .../shared-instance-update-available.vue      |  12 +-
 .../instance/components/page-header/index.vue | 171 ++--
 ...rm-revoke-shared-instance-invite-modal.vue |  22 +-
 .../settings-modal/general-settings.vue       |  81 +-
 .../settings-modal/java-settings.vue          |  77 +-
 ...nstance-installation-settings-controls.vue |  57 +-
 .../settings-modal/sharing-settings.vue       |  45 +-
 .../src/pages/instance/content/index.vue      |   6 +-
 .../src/pages/instance/share/index.vue        |  38 +-
 .../share/shared-instance-members-table.vue   |  65 +-
 .../shared-instance-remove-member-modal.vue   |  18 +-
 .../src/pages/instance/worlds/index.vue       |  63 +-
 apps/app-frontend/src/pages/library/Index.vue |  22 +-
 .../src/pages/project/Gallery.vue             |  70 +-
 apps/app-frontend/src/pages/project/Index.vue | 186 ++--
 .../src/pages/project/Version.vue             | 111 ++-
 .../src/pages/project/Versions.vue            |  95 +-
 .../src/assets/styles/components.scss         |   2 +-
 .../AnalyticsChartRenderLimitModal.vue        |  18 +-
 .../analytics-table/index.vue                 |  42 +-
 .../components/analytics-dashboard/index.vue  |  38 +-
 .../query-builder/QueryFilter.vue             |   3 +
 .../query-builder/TimeframePicker.vue         |   9 +
 .../query-builder/index.vue                   |  37 +-
 .../stat-cards/StatCards.vue                  |  18 +-
 apps/frontend/src/components/ui/Accordion.vue |  29 +-
 .../src/components/ui/AuthorizationCard.vue   |  12 +-
 .../components/ui/ConfirmTransferOrgModal.vue |  22 +-
 .../ui/ConfirmTransferProjectModal.vue        |  22 +-
 .../src/components/ui/ModrinthFooter.vue      |  41 +-
 .../src/components/ui/NewsletterButton.vue    |  22 +-
 .../src/components/ui/NotificationItem.vue    | 183 ++--
 .../components/ui/OrganizationPageHeader.vue  |  40 +-
 .../ui/OrganizationProjectTransferModal.vue   |  45 +-
 .../ui/ProjectCollectionSaveButton.vue        | 102 +-
 .../CompatibleVersionCard.vue                 |  52 +-
 .../DownloadDependency.vue                    |  44 +-
 .../InstallWithModrinthApp.vue                |  26 +-
 .../ui/ProjectDownloadModal/index.vue         |  92 +-
 .../src/components/ui/ProjectMemberHeader.vue |  22 +-
 .../src/components/ui/ShareArticleButtons.vue | 103 +-
 .../ui/SharedInstanceInviteOpenInAppModal.vue |  34 +-
 .../ui/admin/AdminBillingChargeCard.vue       |  34 +-
 .../components/ui/admin/AssignNoticeModal.vue |  47 +-
 .../components/ui/admin/BatchCreditModal.vue  |  37 +-
 .../src/components/ui/admin/TransferModal.vue |  57 +-
 .../src/components/ui/auth/CreateAccount.vue  |  22 +-
 .../components/ui/auth/PasskeySettings.vue    | 131 ++-
 .../src/components/ui/auth/SignIn.vue         | 108 ++-
 .../src/components/ui/auth/SignUp.vue         | 123 ++-
 .../ui/banner/GeneratedStateErrorsBanner.vue  |  27 +-
 .../components/ui/banner/PreviewBanner.vue    |  14 +-
 .../src/components/ui/banner/RussiaBanner.vue |  38 +-
 .../components/ui/banner/StagingBanner.vue    |  20 +-
 .../SubscriptionPaymentFailedBanner.vue       |  12 +-
 .../ui/banner/TaxComplianceBanner.vue         |  14 +-
 .../ui/banner/TaxIdMismatchBanner.vue         |  18 +-
 .../ui/banner/VerifyEmailBanner.vue           |  19 +-
 .../components/AddedDependencyRow.vue         |  10 +-
 .../components/McVersionPicker.vue            |  68 +-
 .../SuggestedDependency.vue                   |  10 +-
 .../components/VersionFileRow.vue             |  63 +-
 .../stages/LoadersStage.vue                   |   6 +-
 .../stages/McVersionsStage.vue                |   6 +-
 .../stages/MetadataStage.vue                  |  82 +-
 .../ui/create/CollectionCreateModal.vue       |  22 +-
 .../components/ui/create/CreateLimitAlert.vue |  23 +-
 .../ui/create/OrganizationCreateModal.vue     |  22 +-
 .../ui/create/ProjectCreateModal.vue          |  28 +-
 .../ui/dashboard/CreatorTaxFormModal.vue      |  43 +-
 .../ui/dashboard/CreatorWithdrawModal.vue     |  65 +-
 .../ui/dashboard/RevenueInputField.vue        |  10 +-
 .../ui/dashboard/RevenueTransaction.vue       |  14 +-
 .../LegacyPaypalDetailsStage.vue              |  56 +-
 .../withdraw-stages/MethodSelectionStage.vue  |  39 +-
 .../withdraw-stages/TaxFormStage.vue          |  10 +-
 .../ui/moderation/BatchScanProgressAlert.vue  |  11 +-
 .../moderation/GlobalDetailLocalTraceCard.vue |  12 +-
 .../ui/moderation/GlobalDetailTracesList.vue  |  42 +-
 .../ui/moderation/MaliciousSummaryModal.vue   |  51 +-
 .../ui/moderation/ModerationProjectNags.vue   |  35 +-
 .../ui/moderation/ModerationQueueCard.vue     |  32 +-
 .../ui/moderation/ModerationReportCard.vue    |  79 +-
 .../ui/moderation/ModerationTechRevCard.vue   | 228 +++--
 .../ui/moderation/ModpackScanModal.vue        |  74 +-
 .../SharedInstanceReportContext.vue           |  49 +-
 .../checklist/ModerationChecklist.vue         | 358 +++----
 .../checklist/ModpackPermissionsFlow.vue      | 108 ++-
 .../ui/moderation/checklist/NodeRenderer.vue  | 146 ++-
 .../moderation/settings/ModerationKeybind.vue |  17 +-
 .../src/components/ui/news/LatestNewsRow.vue  |  12 +-
 .../ui/project-settings/CompatibilityCard.vue |  46 +-
 .../stages/UploadCustomModpack.vue            |  29 +-
 .../servers/marketing/MedalPlanPromotion.vue  |  18 +-
 .../servers/marketing/ServerPlanSelector.vue  |  30 +-
 .../ui/thread/ConversationThread.vue          | 583 ++++++------
 .../components/ui/thread/ThreadMessage.vue    |  36 +-
 .../src/components/ui/thread/ThreadView.vue   |  66 +-
 apps/frontend/src/error.vue                   |  21 +-
 apps/frontend/src/layouts/default.vue         | 895 ++++++++++--------
 apps/frontend/src/pages/[type]/[project].vue  | 354 +++----
 .../src/pages/[type]/[project]/changelog.vue  |  25 +-
 .../src/pages/[type]/[project]/gallery.vue    | 260 ++---
 .../[type]/[project]/settings/environment.vue |  18 +-
 .../[type]/[project]/settings/gallery.vue     | 260 ++---
 .../pages/[type]/[project]/settings/index.vue | 133 +--
 .../[type]/[project]/settings/license.vue     |  34 +-
 .../pages/[type]/[project]/settings/links.vue |  54 +-
 .../[type]/[project]/settings/members.vue     | 190 ++--
 .../[type]/[project]/settings/permissions.vue |  62 +-
 .../[type]/[project]/settings/server.vue      |  28 +-
 .../[type]/[project]/settings/versions.vue    | 388 ++++----
 .../[type]/[project]/version/[version].vue    | 502 +++++-----
 .../src/pages/[type]/[project]/versions.vue   | 384 ++++----
 apps/frontend/src/pages/admin/affiliates.vue  |  12 +-
 .../src/pages/admin/analytics/events.vue      |  90 +-
 .../src/pages/admin/billing/[user].vue        | 100 +-
 apps/frontend/src/pages/admin/docs.vue        |  35 +-
 apps/frontend/src/pages/admin/emails.vue      |  34 +-
 .../src/pages/admin/servers/notices.vue       |  62 +-
 .../src/pages/admin/servers/transfers.vue     |  28 +-
 apps/frontend/src/pages/admin/user_email.vue  |  12 +-
 apps/frontend/src/pages/app.vue               |  35 +-
 apps/frontend/src/pages/auth/authorize.vue    |  29 +-
 .../src/pages/auth/reset-password.vue         |  28 +-
 apps/frontend/src/pages/auth/verify-email.vue |  75 +-
 .../src/pages/collection/[collection].vue     | 142 +--
 apps/frontend/src/pages/dashboard.vue         |  12 +-
 .../src/pages/dashboard/affiliate-links.vue   |  12 +-
 .../src/pages/dashboard/collections.vue       |  17 +-
 apps/frontend/src/pages/dashboard/index.vue   |  12 +-
 .../src/pages/dashboard/notifications.vue     |  22 +-
 .../src/pages/dashboard/organizations.vue     |  12 +-
 .../frontend/src/pages/dashboard/projects.vue | 179 ++--
 .../src/pages/dashboard/revenue/transfers.vue |  21 +-
 apps/frontend/src/pages/hosting/index.vue     |  45 +-
 apps/frontend/src/pages/index.vue             |  36 +-
 .../pages/moderation/external-projects.vue    |  54 +-
 .../pages/moderation/global-traces/[key].vue  |  23 +-
 apps/frontend/src/pages/moderation/index.vue  |  33 +-
 .../src/pages/moderation/reports/index.vue    |  19 +-
 .../moderation/technical-review/[project].vue |  12 +-
 .../moderation/technical-review/index.vue     |  15 +-
 .../src/pages/news/article/[slug].vue         |  29 +-
 apps/frontend/src/pages/news/index.vue        |  29 +-
 .../src/pages/organization/[organization].vue |  22 +-
 .../[organization]/settings/index.vue         |  53 +-
 .../[organization]/settings/members.vue       | 151 +--
 .../[organization]/settings/projects.vue      | 181 ++--
 apps/frontend/src/pages/plus.vue              |  44 +-
 apps/frontend/src/pages/report.vue            |  61 +-
 apps/frontend/src/pages/settings/account.vue  | 306 +++---
 .../src/pages/settings/applications.vue       | 182 ++--
 .../src/pages/settings/billing/index.vue      | 329 +++----
 apps/frontend/src/pages/settings/flags.vue    |  14 +-
 apps/frontend/src/pages/settings/index.vue    |  28 +-
 apps/frontend/src/pages/settings/pats.vue     | 124 +--
 apps/frontend/src/pages/settings/sessions.vue |  10 +-
 apps/frontend/src/pages/share/[inviteId].vue  |  12 +-
 packages/assets/styles/classes.scss           |   2 +-
 packages/ui/.storybook/main.ts                |   7 +-
 packages/ui/CLAUDE.md                         |   2 +-
 .../affiliate/AffiliateLinkCard.vue           |  20 +-
 .../affiliate/AffiliateLinkCreateModal.vue    |  21 +-
 .../ui/src/components/base/Admonition.vue     |  26 +-
 .../ui/src/components/base/BaseTerminal.vue   |  10 +-
 packages/ui/src/components/base/Button.vue    | 142 ---
 .../ui/src/components/base/ButtonStyled.vue   | 397 --------
 packages/ui/src/components/base/Card.vue      |  10 +-
 packages/ui/src/components/base/Chips.vue     |   8 +-
 .../components/base/CollapsibleAdmonition.vue |  36 +-
 .../src/components/base/CollapsibleRegion.vue |  18 +-
 packages/ui/src/components/base/Combobox.vue  |  45 +-
 .../ui/src/components/base/DatePicker.vue     |  68 +-
 .../src/components/base/DropdownFilterBar.vue |  44 +-
 .../components/base/ErrorInformationCard.vue  |  40 +-
 .../ui/src/components/base/FloatingPanel.vue  |  27 +-
 .../ui/src/components/base/I18nDebugPanel.vue |  63 +-
 .../ui/src/components/base/IconSelect.vue     |  19 +-
 .../ui/src/components/base/JoinedButtons.vue  | 151 ---
 .../ui/src/components/base/ManySelect.vue     |  49 +-
 .../ui/src/components/base/MarkdownEditor.vue | 126 ++-
 .../ui/src/components/base/MultiSelect.vue    |  68 +-
 .../src/components/base/MultiStageModal.vue   |  89 +-
 .../ui/src/components/base/OverflowMenu.vue   | 149 ---
 .../ui/src/components/base/Pagination.vue     |  67 +-
 .../ui/src/components/base/ServerNotice.vue   |  20 +-
 .../components/base/StackedAdmonitions.vue    |  55 +-
 .../components/base/TeleportOverflowMenu.vue  | 522 ----------
 .../src/components/base/TimeFramePicker.vue   |  39 +-
 .../components/base/UnsavedChangesPopup.vue   |  23 +-
 .../ui/src/components/base/buttons/Button.vue |  35 +
 .../components/base/buttons/ButtonFrame.vue   | 165 ++++
 .../components/base/buttons/ButtonGroup.vue   |  85 ++
 .../components/base/buttons/ButtonLink.vue    |  67 ++
 .../components/base/buttons/FileButton.vue    |  85 ++
 .../components/base/buttons/IconButton.vue    |  58 ++
 .../components/base/buttons/SplitButton.vue   |  88 ++
 .../base/buttons/TeleportOverflowMenu.vue     | 469 +++++++++
 .../base/buttons/TeleportPopoutMenu.vue       | 149 +++
 .../ui/src/components/base/buttons/index.ts   |  23 +
 .../ui/src/components/base/buttons/types.ts   | 105 ++
 packages/ui/src/components/base/index.ts      |  32 +-
 .../billing/AddPaymentMethodModal.vue         |  24 +-
 .../billing/ModrinthServersPurchaseModal.vue  |  85 +-
 .../components/billing/ResubscribeModal.vue   |  23 +-
 .../billing/ServersGuestPlanModal.vue         |  21 +-
 .../billing/ServersPurchase0Plan.vue          |  89 +-
 .../billing/ServersPurchase3Review.vue        |  13 +-
 packages/ui/src/components/chart/Chart.vue    |  14 +-
 .../AddFilesToAttributionGroupModal.vue       |  35 +-
 .../AddToExistingExternalProjectModal.vue     |  77 +-
 .../AddToGlobalPermissionsDatabaseModal.vue   |  46 +-
 .../external_files/AttributionEditor.vue      |  66 +-
 .../ExternalProjectLookupCard.vue             |  18 +-
 .../ExternalProjectPermissionsCard.vue        | 230 ++---
 .../components/CustomSetupStage.vue           |  22 +-
 .../components/ImportInstanceStage.vue        |  38 +-
 .../components/ModpackStage.vue               |  45 +-
 .../components/modal/ConfirmLeaveModal.vue    |  22 +-
 .../ui/src/components/modal/ConfirmModal.vue  |  28 +-
 packages/ui/src/components/modal/NewModal.vue |  40 +-
 .../src/components/modal/OpenInAppModal.vue   |  36 +-
 .../ui/src/components/modal/ShareModal.vue    | 171 ++--
 .../modal/UnknownFileWarningModal.vue         |  21 +-
 .../src/components/nav/NotificationPanel.vue  |  59 +-
 .../components/nav/PopupNotificationPanel.vue |  43 +-
 .../notifications/NotificationToast.vue       | 106 ++-
 .../ui/src/components/page/NormalPage.vue     |   6 +
 .../project/ProjectPageVersions.vue           |  14 +-
 .../server/ServerModpackContentCard.vue       |  17 +-
 .../environment/ProjectEnvironmentModal.vue   |  34 +-
 .../components/search/SearchSidebarFilter.vue |  63 +-
 .../components/servers/InstallingBanner.vue   |  25 +-
 .../ui/src/components/servers/SaveBanner.vue  |  41 +-
 .../src/components/servers/ServerListing.vue  |  84 +-
 .../src/components/servers/ServersPromo.vue   |  24 +-
 .../components/servers/access/AccessTable.vue | 119 ++-
 .../servers/access/AuditLogTable.vue          |   3 +-
 .../servers/access/GrantAccessModal.vue       |  29 +-
 .../servers/access/RemoveAccessModal.vue      |  35 +-
 .../servers/admonitions/BackupAdmonition.vue  |  48 +-
 .../admonitions/FileOperationAdmonition.vue   |  24 +-
 .../servers/admonitions/UploadAdmonition.vue  |  16 +-
 .../servers/backups/BackupCreateModal.vue     |  33 +-
 .../servers/backups/BackupDeleteModal.vue     |  33 +-
 .../components/servers/backups/BackupItem.vue |  75 +-
 .../servers/backups/BackupRenameModal.vue     |  45 +-
 .../servers/backups/BackupRestoreModal.vue    |  35 +-
 .../edit-server-icon/EditServerIcon.vue       |  16 +-
 .../marketing/MedalServerCountdown.vue        |   9 +-
 .../servers/marketing/MedalServerListing.vue  |  19 +-
 .../server-header/PanelServerActionButton.vue | 110 ++-
 .../server-list-empty/ServerListEmpty.vue     |  22 +-
 .../sharing/invite-players-modal/index.vue    |  48 +-
 ...nvite-players-modal-invite-link-editor.vue |  51 +-
 .../invite-players-modal-user-row.vue         |  42 +-
 .../ui/src/components/user/UserPageHeader.vue |  58 +-
 .../version/VersionFilterControl.vue          |  12 +-
 .../src/components/version/VersionSummary.vue |  44 +-
 .../SelectedProjectsFloatingBar.vue           |  37 +-
 .../components/SelectedProjectsLeaveModal.vue |  32 +-
 .../src/layouts/shared/browse-tab/header.vue  |  21 +-
 .../src/layouts/shared/browse-tab/layout.vue  | 104 +-
 .../src/layouts/shared/browse-tab/sidebar.vue |  10 +-
 .../components/ConsoleActionButtons.vue       |  78 +-
 .../ui/src/layouts/shared/console/layout.vue  |  23 +-
 .../components/ContentCardItem.vue            | 153 +--
 .../components/ContentModpackCard.vue         | 129 +--
 .../components/ContentSelectionBar.vue        |  89 +-
 .../modals/ConfirmBulkUpdateModal.vue         |  32 +-
 .../modals/ConfirmDeletionModal.vue           |  32 +-
 .../components/modals/ConfirmDisableModal.vue |  32 +-
 .../modals/ConfirmModpackUpdateModal.vue      |  36 +-
 .../modals/ConfirmReinstallModal.vue          |  22 +-
 .../components/modals/ConfirmRepairModal.vue  |  22 +-
 .../components/modals/ConfirmUnlinkModal.vue  |  32 +-
 .../modals/ContentDependencyWarningModal.vue  |  32 +-
 .../components/modals/ContentInstallModal.vue | 118 ++-
 .../components/modals/InlineBackupCreator.vue |  40 +-
 .../components/modals/ModpackContentModal.vue |  30 +-
 .../modals/content-updater-modal/index.vue    | 111 ++-
 .../src/layouts/shared/content-tab/layout.vue | 339 ++++---
 .../content-tab/providers/content-manager.ts  |   2 +-
 .../src/layouts/shared/content-tab/types.ts   |   2 +-
 .../files-tab/components/FileContextMenu.vue  |  89 +-
 .../files-tab/components/FileManagerError.vue |  22 +-
 .../files-tab/components/FileNavbar.vue       | 239 ++---
 .../files-tab/components/FileTableRow.vue     |  98 +-
 .../components/editor/EditorFindReplace.vue   | 116 ++-
 .../components/editor/FileImageViewer.vue     |  26 +-
 .../components/modals/FileCreateItemModal.vue |  30 +-
 .../components/modals/FileDeleteItemModal.vue |  22 +-
 .../components/modals/FileMoveItemModal.vue   |  22 +-
 .../components/modals/FileRenameItemModal.vue |  22 +-
 .../modals/FileUnsavedChangesModal.vue        |  32 +-
 .../modals/FileUploadConflictModal.vue        |  22 +-
 .../modals/FileUploadZipUrlModal.vue          |  52 +-
 .../components/upload/FileUploadDropdown.vue  |   8 +-
 .../src/layouts/shared/files-tab/layout.vue   |  54 +-
 .../components/ContentDiffModal.vue           |  75 +-
 .../components/IncompatibleContentModal.vue   |  80 +-
 .../shared/installation-settings/layout.vue   | 216 ++---
 .../shared/server-settings/pages/advanced.vue | 194 ++--
 .../server-settings/pages/installation.vue    |  44 +-
 .../shared/server-settings/pages/network.vue  | 123 +--
 .../layouts/shared/user-profile/layout.vue    | 109 +--
 .../wrapped/AccountProfileSettings.vue        |  64 +-
 .../layouts/wrapped/AccountSocialSettings.vue |  57 +-
 .../hosting/manage/[id]/access/access.vue     |  28 +-
 .../hosting/manage/[id]/onboarding.vue        |  34 +-
 .../wrapped/hosting/manage/backups.vue        | 100 +-
 .../layouts/wrapped/hosting/manage/index.vue  |  32 +-
 .../layouts/wrapped/hosting/manage/root.vue   | 106 +--
 packages/ui/src/stories/add-stories.md        |  10 +-
 .../ui/src/stories/base/Admonition.stories.ts |  22 +-
 .../ui/src/stories/base/Button.stories.ts     |  83 --
 .../src/stories/base/ButtonStyled.stories.ts  | 226 -----
 .../ui/src/stories/base/EmptyState.stories.ts |   8 +-
 .../src/stories/base/JoinedButtons.stories.ts | 122 ---
 .../src/stories/base/OverflowMenu.stories.ts  |  81 --
 .../ui/src/stories/base/PageHeader.stories.ts | 154 ++-
 .../ui/src/stories/base/PopoutMenu.stories.ts |  94 --
 .../base/StackedAdmonitions.stories.ts        |  12 +-
 packages/ui/src/stories/base/Table.stories.ts | 150 ++-
 .../ui/src/stories/buttons/Button.stories.ts  | 213 +++++
 .../stories/buttons/ButtonGroup.stories.ts    |  82 ++
 .../src/stories/buttons/FileButton.stories.ts |  61 ++
 .../buttons/TeleportOverflowMenu.stories.ts   | 104 ++
 .../buttons/TeleportPopoutMenu.stories.ts     |  50 +
 .../instances/ContentCardTable.stories.ts     |  48 +-
 .../ContentDependencyWarningModal.stories.ts  |  20 +-
 .../instances/ContentUpdaterModal.stories.ts  |  26 +-
 .../instances/ModpackContentModal.stories.ts  |  50 +-
 .../modal/ConfirmLeaveModal.stories.ts        |  20 +-
 .../ui/src/stories/modal/NewModal.stories.ts  |  86 +-
 .../src/stories/modal/ShareModal.stories.ts   |  14 +-
 .../src/stories/modal/TabbedModal.stories.ts  |  50 +-
 .../modal/UnknownFileWarningModal.stories.ts  |  14 +-
 .../modal/UpdateToPlayModal.stories.ts        |   8 +-
 .../modal/UploadProgressModal.stories.ts      |  14 +-
 .../stories/nav/NotificationPanel.stories.ts  |  50 +-
 .../nav/PopupNotificationPanel.stories.ts     |  48 +-
 .../project/ProjectPageVersions.stories.ts    |  22 +-
 .../servers/CreationFlowModal.stories.ts      |  20 +-
 .../servers/GrantAccessModal.stories.ts       |  14 +-
 .../servers/RemoveAccessModal.stories.ts      |  14 +-
 .../ServerPanelAdmonitionCopyDraft.stories.ts |  34 +-
 .../sharing/InvitePlayersModal.stories.ts     |   8 +-
 .../ui/src/stories/skin/SkinButton.stories.ts |  20 +-
 packages/ui/src/utils/index.ts                |   1 +
 .../ui/src/utils/use-anchored-teleport.ts     | 162 ++++
 standards/README.md                           |   2 +-
 standards/frontend/BUTTONS.md                 | 375 ++++++++
 standards/frontend/MODALS.md                  |  10 +-
 398 files changed, 13688 insertions(+), 13133 deletions(-)
 delete mode 100644 packages/ui/src/components/base/Button.vue
 delete mode 100644 packages/ui/src/components/base/ButtonStyled.vue
 delete mode 100644 packages/ui/src/components/base/JoinedButtons.vue
 delete mode 100644 packages/ui/src/components/base/OverflowMenu.vue
 delete mode 100644 packages/ui/src/components/base/TeleportOverflowMenu.vue
 create mode 100644 packages/ui/src/components/base/buttons/Button.vue
 create mode 100644 packages/ui/src/components/base/buttons/ButtonFrame.vue
 create mode 100644 packages/ui/src/components/base/buttons/ButtonGroup.vue
 create mode 100644 packages/ui/src/components/base/buttons/ButtonLink.vue
 create mode 100644 packages/ui/src/components/base/buttons/FileButton.vue
 create mode 100644 packages/ui/src/components/base/buttons/IconButton.vue
 create mode 100644 packages/ui/src/components/base/buttons/SplitButton.vue
 create mode 100644 packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
 create mode 100644 packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
 create mode 100644 packages/ui/src/components/base/buttons/index.ts
 create mode 100644 packages/ui/src/components/base/buttons/types.ts
 delete mode 100644 packages/ui/src/stories/base/Button.stories.ts
 delete mode 100644 packages/ui/src/stories/base/ButtonStyled.stories.ts
 delete mode 100644 packages/ui/src/stories/base/JoinedButtons.stories.ts
 delete mode 100644 packages/ui/src/stories/base/OverflowMenu.stories.ts
 delete mode 100644 packages/ui/src/stories/base/PopoutMenu.stories.ts
 create mode 100644 packages/ui/src/stories/buttons/Button.stories.ts
 create mode 100644 packages/ui/src/stories/buttons/ButtonGroup.stories.ts
 create mode 100644 packages/ui/src/stories/buttons/FileButton.stories.ts
 create mode 100644 packages/ui/src/stories/buttons/TeleportOverflowMenu.stories.ts
 create mode 100644 packages/ui/src/stories/buttons/TeleportPopoutMenu.stories.ts
 create mode 100644 packages/ui/src/utils/use-anchored-teleport.ts
 create mode 100644 standards/frontend/BUTTONS.md

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 3e766fcc8e..6ef972120b 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -29,24 +29,25 @@ import {
 import {
 	Admonition,
 	Avatar,
-	ButtonStyled,
+	ButtonLink,
 	commonMessages,
 	ContentInstallModal,
 	ContentUpdaterModal,
 	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
+	IconButton,
 	IntlFormatted,
 	LoadingBar,
 	NewsArticleCard,
 	NotificationPanel,
-	OverflowMenu,
 	PopupNotificationPanel,
 	provideModalBehavior,
 	provideModrinthClient,
 	provideNotificationManager,
 	providePageContext,
 	providePopupNotificationManager,
+	TeleportOverflowMenu,
 	TextLogo,
 	useDebugLogger,
 	useFormatBytes,
@@ -1592,22 +1593,29 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<SettingsIcon />
 			</NavButton>
-			<OverflowMenu
+			<TeleportOverflowMenu
 				v-if="credentials?.user"
 				v-tooltip.right="formatMessage(messages.modrinthAccount)"
-				class="w-12 h-12 text-primary rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast border-0 cursor-pointer"
+				type="quiet"
+				size="xl"
+				label="More options"
 				:options="[
 					{
 						id: 'view-profile',
+						label: formatMessage(messages.signedInAs, {
+							username: credentials.user.username,
+						}),
 						action: () => router.push(`/user/${encodeURIComponent(credentials.user.username)}`),
 					},
 					{
 						id: 'sign-out',
+						label: formatMessage(commonMessages.signOutButton),
+						tone: 'red',
 						action: () => logOut(),
-						color: 'danger',
 					},
 				]"
 				placement="right-end"
+				:distance="4"
 			>
 				<Avatar :src="credentials?.user?.avatar_url" alt="" size="32px" circle />
 				<template #view-profile>
@@ -1630,7 +1638,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					<LogOutIcon />
 					{{ formatMessage(commonMessages.signOutButton) }}
 				</template>
-			</OverflowMenu>
+			</TeleportOverflowMenu>
 			<NavButton
 				v-else
 				v-tooltip.right="formatMessage(messages.signInToModrinthAccount)"
@@ -1643,49 +1651,44 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<div data-tauri-drag-region class="flex min-w-0 flex-1 items-center overflow-hidden p-2">
 				<TextLogo class="h-7 w-auto shrink-0 text-contrast pointer-events-none" />
 				<div data-tauri-drag-region class="ml-2 flex shrink-0 items-center gap-2">
-					<ButtonStyled type="outlined" circular>
-						<button
-							class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
-							:disabled="!canNavigateBack"
-							aria-label="Go back"
-							@click="router.back()"
-						>
-							<ChevronLeftIcon
-								class="!size-4 !text-primary"
-								:class="{ 'opacity-20': !canNavigateBack }"
-							/>
-						</button>
-					</ButtonStyled>
-					<ButtonStyled type="outlined" circular>
-						<button
-							class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
-							:disabled="!canNavigateForward"
-							aria-label="Go forward"
-							@click="router.forward()"
-						>
-							<ChevronRightIcon
-								class="!size-4 !text-primary"
-								:class="{ 'opacity-20': !canNavigateForward }"
-							/>
-						</button>
-					</ButtonStyled>
+					<IconButton
+						type="outlined"
+						label="Go back"
+						class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
+						:disabled="!canNavigateBack"
+						@click="router.back()"
+					>
+						<ChevronLeftIcon
+							class="!size-4 !text-primary"
+							:class="{ 'opacity-20': !canNavigateBack }"
+						/>
+					</IconButton>
+					<IconButton
+						type="outlined"
+						label="Go forward"
+						class="!h-7 !min-w-7 !w-7 !border !border-surface-4 !p-0 !opacity-100"
+						:disabled="!canNavigateForward"
+						@click="router.forward()"
+					>
+						<ChevronRightIcon
+							class="!size-4 !text-primary"
+							:class="{ 'opacity-20': !canNavigateForward }"
+						/>
+					</IconButton>
 				</div>
 				<Breadcrumbs />
 			</div>
 			<section data-tauri-drag-region class="flex shrink-0 ml-auto items-center">
-				<ButtonStyled
+				<IconButton
 					v-if="!forceSidebar && themeStore.toggleSidebar"
-					:type="sidebarToggled ? 'standard' : 'transparent'"
-					circular
+					:type="sidebarToggled ? 'base' : 'quiet'"
+					label="Next image"
+					class="mr-3 transition-transform"
+					:class="{ 'rotate-180': !sidebarToggled }"
+					@click="sidebarToggled = !sidebarToggled"
 				>
-					<button
-						class="mr-3 transition-transform"
-						:class="{ 'rotate-180': !sidebarToggled }"
-						@click="sidebarToggled = !sidebarToggled"
-					>
-						<RightArrowIcon />
-					</button>
-				</ButtonStyled>
+					<RightArrowIcon />
+				</IconButton>
 				<div class="flex mr-3">
 					<Suspense>
 						<AppActionBar />
@@ -1794,12 +1797,17 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 								:key="`news-${index}`"
 								:article="item"
 							/>
-							<ButtonStyled color="brand" size="large">
-								<a href="https://modrinth.com/news" target="_blank" class="my-4">
-									<NewspaperIcon />
-									{{ formatMessage(messages.viewAllNews) }}
-								</a>
-							</ButtonStyled>
+							<ButtonLink
+								type="colored"
+								color="brand"
+								size="xl"
+								href="https://modrinth.com/news"
+								target="_blank"
+								class="my-4"
+							>
+								<NewspaperIcon />
+								{{ formatMessage(messages.viewAllNews) }}
+							</ButtonLink>
 						</div>
 					</div>
 				</div>
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index 9c0611ef63..766f234026 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -4,13 +4,11 @@
 		class="flex flex-col gap-3 bg-button-bg border border-solid border-surface-5 rounded-xl p-3 mt-2"
 	>
 		<span>{{ formatMessage(messages.notSignedIn) }}</span>
-		<ButtonStyled color="brand">
-			<button color="primary" :disabled="loginDisabled" @click="login()">
-				<LogInIcon v-if="!loginDisabled" />
-				<SpinnerIcon v-else class="animate-spin" />
-				{{ formatMessage(messages.signInToMinecraft) }}
-			</button>
-		</ButtonStyled>
+		<Button type="colored" color="brand" :disabled="loginDisabled" @click="login()">
+			<LogInIcon v-if="!loginDisabled" />
+			<SpinnerIcon v-else class="animate-spin" />
+			{{ formatMessage(messages.signInToMinecraft) }}
+		</Button>
 	</div>
 	<Accordion
 		v-else
@@ -60,24 +58,28 @@
 							{{ account.profile.name }}
 						</p>
 					</button>
-					<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
-						<button
-							v-tooltip="formatMessage(messages.removeAccount)"
-							class="mr-2"
-							@click="logout(account.profile.id)"
-						>
-							<TrashIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-tooltip="formatMessage(messages.removeAccount)"
+						type="quiet"
+						color="red"
+						:label="formatMessage(messages.removeAccount)"
+						class="mr-2 !bg-button-bg !text-primary ![box-shadow:var(--shadow-button)] hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+						@click="logout(account.profile.id)"
+					>
+						<TrashIcon />
+					</IconButton>
 				</div>
 			</template>
 			<div class="flex flex-col gap-2 px-2 pt-2">
-				<ButtonStyled v-if="accounts.length > 0" class="w-full">
-					<button :disabled="loginDisabled" @click="login()">
-						<PlusIcon />
-						{{ formatMessage(messages.addAccount) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="accounts.length > 0"
+					class="w-full !bg-button-bg !text-primary ![box-shadow:var(--shadow-button)]"
+					:disabled="loginDisabled"
+					@click="login()"
+				>
+					<PlusIcon />
+					{{ formatMessage(messages.addAccount) }}
+				</Button>
 			</div>
 		</div>
 	</Accordion>
@@ -95,8 +97,9 @@ import {
 import {
 	Accordion,
 	Avatar,
-	ButtonStyled,
+	Button,
 	defineMessages,
+	IconButton,
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/app-frontend/src/components/ui/AddContentButton.vue b/apps/app-frontend/src/components/ui/AddContentButton.vue
index cdea116e87..65f6397a9e 100644
--- a/apps/app-frontend/src/components/ui/AddContentButton.vue
+++ b/apps/app-frontend/src/components/ui/AddContentButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { DropdownIcon, FolderOpenIcon, PlusIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, OverflowMenu } from '@modrinth/ui'
+import { Button, injectNotificationManager, TeleportOverflowMenu } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { useRouter } from 'vue-router'
 
@@ -36,27 +36,26 @@ const handleSearchContent = async () => {
 
 <template>
 	<div class="joined-buttons">
-		<ButtonStyled>
-			<button @click="handleSearchContent">
-				<PlusIcon />
-				Install content
-			</button>
-		</ButtonStyled>
-		<ButtonStyled>
-			<OverflowMenu
-				:options="[
-					{
-						id: 'from_file',
-						action: handleAddContentFromFile,
-					},
-				]"
-			>
-				<DropdownIcon />
-				<template #from_file>
-					<FolderOpenIcon />
-					<span class="no-wrap"> Add from file </span>
-				</template>
-			</OverflowMenu>
-		</ButtonStyled>
+		<Button @click="handleSearchContent">
+			<PlusIcon />
+			Install content
+		</Button>
+		<TeleportOverflowMenu
+			label="More options"
+			:options="[
+				{
+					id: 'from_file',
+					label: 'Add from file',
+					action: handleAddContentFromFile,
+				},
+			]"
+			class="!w-auto !px-2.5 !rounded-xl"
+		>
+			<DropdownIcon />
+			<template #from_file>
+				<FolderOpenIcon />
+				<span class="no-wrap"> Add from file </span>
+			</template>
+		</TeleportOverflowMenu>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/components/ui/AppActionBar.vue b/apps/app-frontend/src/components/ui/AppActionBar.vue
index 380a78a5c5..11c172b71e 100644
--- a/apps/app-frontend/src/components/ui/AppActionBar.vue
+++ b/apps/app-frontend/src/components/ui/AppActionBar.vue
@@ -1,15 +1,15 @@
 <template>
 	<div class="flex gap-2 items-center">
-		<ButtonStyled
+		<IconButton
 			v-if="hasActiveLoadingBars && !hasVisibleActiveDownloadToasts"
+			v-tooltip="formatMessage(messages.viewActiveDownloads)"
+			type="quiet"
 			color="brand"
-			type="transparent"
-			circular
+			:label="formatMessage(messages.viewActiveDownloads)"
+			@click="openDownloadToast()"
 		>
-			<button v-tooltip="formatMessage(messages.viewActiveDownloads)" @click="openDownloadToast()">
-				<DownloadIcon />
-			</button>
-		</ButtonStyled>
+			<DownloadIcon />
+		</IconButton>
 		<div v-if="offline" class="flex items-center gap-1">
 			<UnplugIcon class="text-secondary" />
 			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
@@ -36,17 +36,23 @@
 						@show="showInstances = true"
 						@hide="showInstances = false"
 					>
-						<ButtonStyled type="transparent" circular size="small">
-							<button
-								v-tooltip="
-									showInstances
-										? formatMessage(messages.hideMoreRunningInstances)
-										: formatMessage(messages.showMoreRunningInstances)
-								"
-							>
-								<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="
+								showInstances
+									? formatMessage(messages.hideMoreRunningInstances)
+									: formatMessage(messages.showMoreRunningInstances)
+							"
+							class="!size-6"
+							type="quiet"
+							size="xs"
+							:label="
+								showInstances
+									? formatMessage(messages.hideMoreRunningInstances)
+									: formatMessage(messages.showMoreRunningInstances)
+							"
+						>
+							<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
+						</IconButton>
 						<template #popper>
 							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
 								<div
@@ -125,8 +131,8 @@ import {
 	TerminalSquareIcon,
 	UnplugIcon,
 } from '@modrinth/assets'
+import { IconButton } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
 	injectPopupNotificationManager,
diff --git a/apps/app-frontend/src/components/ui/ErrorModal.vue b/apps/app-frontend/src/components/ui/ErrorModal.vue
index 385c503f11..475c1f3f76 100644
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -9,7 +9,13 @@ import {
 	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import {
+	Button,
+	ButtonLink,
+	Collapsible,
+	IconButton,
+	injectNotificationManager,
+} from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { ChatIcon } from '@/assets/icons'
@@ -273,12 +279,10 @@ async function copyToClipboard(text) {
 				</template>
 			</div>
 			<div class="flex items-center gap-2">
-				<ButtonStyled>
-					<a :href="supportLink" @click="errorModal.hide()"><ChatIcon /> Get support</a>
-				</ButtonStyled>
-				<ButtonStyled v-if="closable">
-					<button @click="errorModal.hide()"><XIcon /> Close</button>
-				</ButtonStyled>
+				<ButtonLink :href="supportLink" @click="errorModal.hide()"
+					><ChatIcon /> Get support</ButtonLink
+				>
+				<Button v-if="closable" @click="errorModal.hide()"><XIcon /> Close</Button>
 			</div>
 			<template v-if="hasDebugInfo">
 				<div class="flex flex-col gap-2">
@@ -307,16 +311,15 @@ async function copyToClipboard(text) {
 								>
 									{{ debugInfo }}
 								</div>
-								<ButtonStyled circular>
-									<button
-										v-tooltip="'Copy debug info'"
-										:disabled="copied"
-										@click="copyToClipboard(debugInfo)"
-									>
-										<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-										<template v-else> <CopyIcon /> </template>
-									</button>
-								</ButtonStyled>
+								<IconButton
+									v-tooltip="'Copy debug info'"
+									:label="'Copy debug info'"
+									:disabled="copied"
+									@click="copyToClipboard(debugInfo)"
+								>
+									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+									<template v-else> <CopyIcon /> </template>
+								</IconButton>
 							</div>
 						</Collapsible>
 					</div>
diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue
index 314d171c1d..718a602acf 100644
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	FileTreeSelect,
@@ -208,18 +208,14 @@ function normalizeExportPath(path) {
 		</div>
 		<template #actions>
 			<div class="flex items-center justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="exportModal.hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button @click="exportPack">
-						<PackageIcon />
-						{{ formatMessage(messages.exportButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="exportModal.hide">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" @click="exportPack">
+					<PackageIcon />
+					{{ formatMessage(messages.exportButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
diff --git a/apps/app-frontend/src/components/ui/Instance.vue b/apps/app-frontend/src/components/ui/Instance.vue
index 6845a00f2b..7c82504eb1 100644
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -7,7 +7,7 @@ import {
 	StopCircleIcon,
 	TimerIcon,
 } from '@modrinth/assets'
-import { Avatar, ButtonStyled, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
+import { Avatar, IconButton, injectNotificationManager, useRelativeTime } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
@@ -168,30 +168,37 @@ onUnmounted(() => unlisten())
 				<span class="line-clamp-2">{{ instance.name }}</span>
 			</div>
 			<div class="flex items-center">
-				<ButtonStyled v-if="playing" color="red" circular @mousehover="checkProcess">
-					<button v-tooltip="'Stop'" @click="(e) => stop(e, 'InstanceCard')">
-						<StopCircleIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="modLoading" color="standard" circular>
-					<button v-tooltip="'Instance is loading...'" disabled>
-						<SpinnerIcon class="animate-spin" />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled
-					v-else-if="!instance.quarantined"
-					:color="first ? 'brand' : 'standard'"
-					circular
+				<IconButton
+					v-if="playing"
+					v-tooltip="'Stop'"
+					type="colored"
+					color="red"
+					:label="'Stop'"
+					@mouseenter="checkProcess"
+					@click="(e) => stop(e, 'InstanceCard')"
 				>
-					<button
-						v-tooltip="'Play'"
-						@click="(e) => play(e, 'InstanceCard')"
-						@mousehover="checkProcess"
-					>
-						<!-- Translate for optical centering -->
-						<PlayIcon class="translate-x-[1px]" />
-					</button>
-				</ButtonStyled>
+					<StopCircleIcon />
+				</IconButton>
+				<IconButton
+					v-else-if="modLoading"
+					v-tooltip="'Instance is loading...'"
+					:label="'Instance is loading...'"
+					disabled
+				>
+					<SpinnerIcon class="animate-spin" />
+				</IconButton>
+				<IconButton
+					v-else-if="!instance.quarantined"
+					v-tooltip="'Play'"
+					:type="first ? 'colored' : 'base'"
+					:color="first ? 'brand' : undefined"
+					label="Play"
+					@click="(e) => play(e, 'InstanceCard')"
+					@mouseenter="checkProcess"
+				>
+					<!-- Translate for optical centering -->
+					<PlayIcon class="translate-x-[1px]" />
+				</IconButton>
 			</div>
 			<div class="flex items-center col-span-3 gap-1 text-secondary font-semibold">
 				<TimerIcon />
@@ -219,47 +226,51 @@ onUnmounted(() => unlisten())
 					:class="`transition-all ${modLoading || installing ? `brightness-[0.25] scale-[0.85]` : `group-hover:brightness-75`}`"
 				/>
 				<div class="absolute inset-0 flex items-center justify-center">
-					<ButtonStyled v-if="playing" size="large" color="red" circular>
-						<button
-							v-tooltip="'Stop'"
-							:class="{ 'scale-100 opacity-100': playing }"
-							class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
-							@click="(e) => stop(e, 'InstanceCard')"
-							@mousehover="checkProcess"
-						>
-							<StopCircleIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-if="playing"
+						v-tooltip="'Stop'"
+						type="colored"
+						color="red"
+						size="xl"
+						:label="'Stop'"
+						:class="{ 'scale-100 opacity-100': playing }"
+						class="transition-all scale-75 origin-bottom opacity-0 card-shadow"
+						@click="(e) => stop(e, 'InstanceCard')"
+						@mouseenter="checkProcess"
+					>
+						<StopCircleIcon />
+					</IconButton>
 					<SpinnerIcon
 						v-else-if="modLoading || installing"
 						v-tooltip="modLoading ? 'Instance is loading...' : 'Installing...'"
 						class="animate-spin w-8 h-8"
 						tabindex="-1"
 					/>
-					<ButtonStyled
+					<IconButton
 						v-else-if="!installed && !instance.quarantined"
-						size="large"
+						v-tooltip="'Repair'"
+						type="colored"
 						color="brand"
-						circular
+						size="xl"
+						:label="'Repair'"
+						class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+						@click="(e) => repair(e)"
 					>
-						<button
-							v-tooltip="'Repair'"
-							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
-							@click="(e) => repair(e)"
-						>
-							<DownloadIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else-if="!instance.quarantined" size="large" color="brand" circular>
-						<button
-							v-tooltip="'Play'"
-							class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
-							@click="(e) => play(e, 'InstanceCard')"
-							@mousehover="checkProcess"
-						>
-							<PlayIcon class="translate-x-[2px]" />
-						</button>
-					</ButtonStyled>
+						<DownloadIcon />
+					</IconButton>
+					<IconButton
+						v-else-if="!instance.quarantined"
+						v-tooltip="'Play'"
+						type="colored"
+						color="brand"
+						size="xl"
+						:label="'Play'"
+						class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+						@click="(e) => play(e, 'InstanceCard')"
+						@mouseenter="checkProcess"
+					>
+						<PlayIcon class="translate-x-[2px]" />
+					</IconButton>
 				</div>
 			</div>
 			<div class="flex flex-col gap-1">
diff --git a/apps/app-frontend/src/components/ui/InstanceIndicator.vue b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
index 2787635117..cb077c4bfb 100644
--- a/apps/app-frontend/src/components/ui/InstanceIndicator.vue
+++ b/apps/app-frontend/src/components/ui/InstanceIndicator.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, FormattedTag } from '@modrinth/ui'
+import { Avatar, ButtonLink, FormattedTag } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed } from 'vue'
 
@@ -48,9 +48,7 @@ const instanceLink = computed(() => {
 				</span>
 			</span>
 		</router-link>
-		<ButtonStyled>
-			<router-link :to="instanceLink"> <LeftArrowIcon /> Back to instance </router-link>
-		</ButtonStyled>
+		<ButtonLink :to="instanceLink"> <LeftArrowIcon /> Back to instance </ButtonLink>
 	</div>
 </template>
 
diff --git a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
index 31e481431f..87858c7f6e 100644
--- a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
+++ b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
@@ -14,18 +14,14 @@
 				</template>
 				<template #cell-actions="{ row }">
 					<div class="flex items-center justify-end">
-						<ButtonStyled v-if="currentSelected.path === row.path">
-							<button class="!shadow-none" disabled>
-								<CheckIcon aria-hidden="true" />
-								{{ formatMessage(messages.selected) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-else>
-							<button class="!shadow-none" @click="setJavaInstall(row)">
-								<PlusIcon aria-hidden="true" />
-								{{ formatMessage(messages.select) }}
-							</button>
-						</ButtonStyled>
+						<Button v-if="currentSelected.path === row.path" disabled>
+							<CheckIcon aria-hidden="true" />
+							{{ formatMessage(messages.selected) }}
+						</Button>
+						<Button v-else @click="setJavaInstall(row)">
+							<PlusIcon aria-hidden="true" />
+							{{ formatMessage(messages.select) }}
+						</Button>
 					</div>
 				</template>
 				<template #empty-state>
@@ -35,28 +31,21 @@
 				</template>
 			</Table>
 			<div class="flex justify-end">
-				<ButtonStyled type="outlined">
-					<button
-						class="!shadow-none !border-surface-4 !border"
-						@click="$refs.detectJavaModal.hide()"
-					>
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(messages.cancel) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="outlined"
+					class="!border-surface-4 !border"
+					@click="$refs.detectJavaModal.hide()"
+				>
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(messages.cancel) }}
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	defineMessages,
-	injectNotificationManager,
-	Table,
-	useVIntl,
-} from '@modrinth/ui'
+import { Button, defineMessages, injectNotificationManager, Table, useVIntl } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
diff --git a/apps/app-frontend/src/components/ui/JavaSelector.vue b/apps/app-frontend/src/components/ui/JavaSelector.vue
index e29aa2d6f0..a46f4347b1 100644
--- a/apps/app-frontend/src/components/ui/JavaSelector.vue
+++ b/apps/app-frontend/src/components/ui/JavaSelector.vue
@@ -17,64 +17,73 @@
 					}
 				"
 			/>
-			<ButtonStyled
+			<Button
+				type="quiet"
 				:color="
 					!hoveringTest && !testingJava
 						? testingJavaSuccess === true
 							? 'green'
 							: 'red'
-						: 'standard'
+						: undefined
 				"
-				color-fill="text"
+				:aria-label="formatMessage(messages.testJavaInstallation)"
+				class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
+				:disabled="testingJava || props.disabled"
+				:style="{
+					'--legacy-button-color':
+						(!hoveringTest && !testingJava
+							? testingJavaSuccess === true
+								? 'green'
+								: 'red'
+							: 'standard') &&
+						(!hoveringTest && !testingJava
+							? testingJavaSuccess === true
+								? 'green'
+								: 'red'
+							: 'standard') !== 'standard'
+							? `var(--color-${
+									!hoveringTest && !testingJava
+										? testingJavaSuccess === true
+											? 'green'
+											: 'red'
+										: 'standard'
+								})`
+							: undefined,
+				}"
+				@click="runTest(props.modelValue?.path)"
+				@mouseenter="!props.disabled && (hoveringTest = true)"
+				@mouseleave="hoveringTest = false"
 			>
-				<button
-					:aria-label="formatMessage(messages.testJavaInstallation)"
-					class="!shadow-none"
-					:disabled="testingJava || props.disabled"
-					@click="runTest(props.modelValue?.path)"
-					@mouseenter="!props.disabled && (hoveringTest = true)"
-					@mouseleave="hoveringTest = false"
-				>
-					<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-					<CheckCircleIcon
-						v-else-if="testingJavaSuccess === true && !hoveringTest"
-						class="h-4 w-4"
-					/>
-					<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
-					<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
-				</button>
-			</ButtonStyled>
+				<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+				<CheckCircleIcon v-else-if="testingJavaSuccess === true && !hoveringTest" class="h-4 w-4" />
+				<XCircleIcon v-else-if="testingJavaSuccess !== true && !hoveringTest" class="h-4 w-4" />
+				<RefreshCwIcon v-else-if="!props.disabled" class="h-4 w-4" />
+			</Button>
 		</div>
 		<span class="installation-buttons">
-			<ButtonStyled v-if="props.version">
-				<button
-					v-tooltip="
-						testingJavaSuccess === true ? formatMessage(messages.alreadyInstalled) : undefined
-					"
-					class="!shadow-none"
-					:disabled="props.disabled || installingJava || testingJavaSuccess === true"
-					@click="reinstallJava"
-				>
-					<DownloadIcon />
-					{{
-						installingJava
-							? formatMessage(messages.installing)
-							: formatMessage(messages.installRecommended)
-					}}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="autoDetect">
-					<SearchIcon />
-					{{ formatMessage(messages.detect) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button class="!shadow-none" :disabled="props.disabled" @click="handleJavaFileInput()">
-					<FolderSearchIcon />
-					{{ formatMessage(messages.browse) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				v-if="props.version"
+				v-tooltip="
+					testingJavaSuccess === true ? formatMessage(messages.alreadyInstalled) : undefined
+				"
+				:disabled="props.disabled || installingJava || testingJavaSuccess === true"
+				@click="reinstallJava"
+			>
+				<DownloadIcon />
+				{{
+					installingJava
+						? formatMessage(messages.installing)
+						: formatMessage(messages.installRecommended)
+				}}
+			</Button>
+			<Button :disabled="props.disabled" @click="autoDetect">
+				<SearchIcon />
+				{{ formatMessage(messages.detect) }}
+			</Button>
+			<Button :disabled="props.disabled" @click="handleJavaFileInput()">
+				<FolderSearchIcon />
+				{{ formatMessage(messages.browse) }}
+			</Button>
 		</span>
 	</div>
 </template>
@@ -90,7 +99,7 @@ import {
 	XCircleIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	defineMessages,
 	injectNotificationManager,
 	StyledInput,
diff --git a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
index 9e1a79a64c..20763d30f5 100644
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, ButtonStyled } from '@modrinth/ui'
+import { Badge, IconButton } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { SwapIcon } from '@/assets/icons/index.js'
@@ -74,18 +74,16 @@ const onHide = () => {
 							@click="$router.push(`/project/${version.project_id}/version/${version.id}`)"
 						>
 							<div class="table-cell table-text">
-								<ButtonStyled
-									circular
-									:color="version.id === installedVersion ? 'standard' : 'brand'"
+								<IconButton
+									:type="version.id === installedVersion ? 'base' : 'colored'"
+									:color="version.id === installedVersion ? undefined : 'brand'"
+									label="Switch version"
+									:disabled="inProgress || installing || version.id === installedVersion"
+									@click.stop="() => switchVersion(version.id)"
 								>
-									<button
-										:disabled="inProgress || installing || version.id === installedVersion"
-										@click.stop="() => switchVersion(version.id)"
-									>
-										<SwapIcon v-if="version.id !== installedVersion" />
-										<CheckIcon v-else />
-									</button>
-								</ButtonStyled>
+									<SwapIcon v-if="version.id !== installedVersion" />
+									<CheckIcon v-else />
+								</IconButton>
 							</div>
 							<div class="name-cell table-cell table-text">
 								<div class="version-link">
diff --git a/apps/app-frontend/src/components/ui/SurveyPopup.vue b/apps/app-frontend/src/components/ui/SurveyPopup.vue
index cd6fe819e4..5199c000c9 100644
--- a/apps/app-frontend/src/components/ui/SurveyPopup.vue
+++ b/apps/app-frontend/src/components/ui/SurveyPopup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NotepadTextIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
+import { Button, defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 import { type } from '@tauri-apps/plugin-os'
 import { $fetch } from 'ofetch'
 import { onMounted, ref } from 'vue'
@@ -193,18 +193,14 @@ onMounted(async () => {
 				{{ formatMessage(messages.surveyFooter) }}
 			</p>
 			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button @click="openSurvey">
-						<NotepadTextIcon />
-						{{ formatMessage(messages.takeSurvey) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="dismissSurvey">
-						<XIcon />
-						{{ formatMessage(messages.surveyNoThanks) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openSurvey">
+					<NotepadTextIcon />
+					{{ formatMessage(messages.takeSurvey) }}
+				</Button>
+				<Button @click="dismissSurvey">
+					<XIcon />
+					{{ formatMessage(messages.surveyNoThanks) }}
+				</Button>
 			</div>
 		</div>
 	</transition>
diff --git a/apps/app-frontend/src/components/ui/URLConfirmModal.vue b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
index 8a48cab8cf..749bdfa1fa 100644
--- a/apps/app-frontend/src/components/ui/URLConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { Button, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
@@ -69,9 +69,7 @@ async function install() {
 					</p>
 				</div>
 				<div class="button-group">
-					<ButtonStyled color="brand">
-						<button @click="install">Install</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" @click="install">Install</Button>
 				</div>
 			</div>
 		</div>
diff --git a/apps/app-frontend/src/components/ui/WindowControls.vue b/apps/app-frontend/src/components/ui/WindowControls.vue
index ebed90ee51..38f00cd1fb 100644
--- a/apps/app-frontend/src/components/ui/WindowControls.vue
+++ b/apps/app-frontend/src/components/ui/WindowControls.vue
@@ -4,34 +4,38 @@
 		class="flex items-center gap-2 mr-1.5"
 		data-tauri-drag-region-exclude
 	>
-		<ButtonStyled type="transparent" circular>
-			<button class="relative expanded-button" @click="() => getCurrentWindow().minimize()">
-				<MinimizeIcon />
-			</button>
-		</ButtonStyled>
-		<ButtonStyled type="transparent" circular>
-			<button class="relative expanded-button" @click="() => getCurrentWindow().toggleMaximize()">
-				<RestoreIcon v-if="isMaximized" />
-				<MaximizeIcon v-else />
-			</button>
-		</ButtonStyled>
-		<ButtonStyled
-			type="transparent"
-			color="red"
-			color-fill="none"
-			hover-color-fill="background"
-			circular
+		<IconButton
+			type="quiet"
+			label="Minimize window"
+			class="relative expanded-button"
+			@click="() => getCurrentWindow().minimize()"
 		>
-			<button class="relative expanded-button close-button" @click="handleClose">
-				<XIcon />
-			</button>
-		</ButtonStyled>
+			<MinimizeIcon />
+		</IconButton>
+		<IconButton
+			type="quiet"
+			label="Toggle maximize window"
+			class="relative expanded-button"
+			@click="() => getCurrentWindow().toggleMaximize()"
+		>
+			<RestoreIcon v-if="isMaximized" />
+			<MaximizeIcon v-else />
+		</IconButton>
+		<IconButton
+			type="quiet"
+			color="red"
+			label="Close window"
+			class="relative expanded-button close-button hover:!bg-red focus-visible:!bg-red"
+			@click="handleClose"
+		>
+			<XIcon />
+		</IconButton>
 	</section>
 </template>
 
 <script setup>
 import { MaximizeIcon, MinimizeIcon, RestoreIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import { IconButton } from '@modrinth/ui'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { saveWindowState, StateFlags } from '@tauri-apps/plugin-window-state'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
diff --git a/apps/app-frontend/src/components/ui/app-update-button/index.vue b/apps/app-frontend/src/components/ui/app-update-button/index.vue
index 6abf2532db..f5098e0187 100644
--- a/apps/app-frontend/src/components/ui/app-update-button/index.vue
+++ b/apps/app-frontend/src/components/ui/app-update-button/index.vue
@@ -1,31 +1,30 @@
 <template>
-	<ButtonStyled color="brand" type="outlined" hover-color-fill="background">
-		<button
-			v-if="showUpdatePill"
-			type="button"
-			class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out"
-			:class="{
-				'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill,
-				'opacity-100 scale-100': finishedDownloading && animateReadyPill,
-			}"
-			:disabled="isUpdateDownloading"
-			:aria-busy="isUpdateDownloading"
-			@click="handleUpdateClick"
-		>
-			<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
-			<DownloadIcon v-else />
-			<span v-if="isUpdateDownloading">
-				{{ formatMessage(messages.downloadingUpdate) }}
-				<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
-			</span>
-			<span v-else>{{ updateLabel }}</span>
-		</button>
-	</ButtonStyled>
+	<Button
+		v-if="showUpdatePill"
+		type="outlined"
+		native-type="button"
+		class="!h-[34px] text-sm !transition-[opacity,transform,background-color,color,filter] !duration-200 ease-out !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] hover:!bg-brand focus-visible:!bg-brand hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+		:class="{
+			'opacity-0 scale-[0.96]': finishedDownloading && !animateReadyPill,
+			'opacity-100 scale-100': finishedDownloading && animateReadyPill,
+		}"
+		:disabled="isUpdateDownloading"
+		:aria-busy="isUpdateDownloading"
+		@click="handleUpdateClick"
+	>
+		<RefreshCwIcon v-if="finishedDownloading" :class="{ 'animate-spin': restarting }" />
+		<DownloadIcon v-else />
+		<span v-if="isUpdateDownloading">
+			{{ formatMessage(messages.downloadingUpdate) }}
+			<span class="inline-block w-[3ch] text-right tabular-nums">{{ downloadPercent }}%</span>
+		</span>
+		<span v-else>{{ updateLabel }}</span>
+	</Button>
 </template>
 
 <script setup lang="ts">
 import { DownloadIcon, RefreshCwIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+import { Button, defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import {
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index 1b954325ac..705b3c16a1 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -2,8 +2,9 @@
 import { MailIcon, SearchIcon, SendIcon, UserIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	defineMessages,
+	IconButton,
 	injectNotificationManager,
 	IntlFormatted,
 	StyledInput,
@@ -220,26 +221,20 @@ const messages = defineMessages({
 					</div>
 					<div class="flex gap-2">
 						<template v-if="friend.id === userCredentials?.user_id">
-							<ButtonStyled color="brand">
-								<button @click="addFriend(friend)">
-									<UserPlusIcon />
-									Accept
-								</button>
-							</ButtonStyled>
-							<ButtonStyled>
-								<button @click="removeFriend(friend)">
-									<XIcon />
-									Ignore
-								</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" @click="addFriend(friend)">
+								<UserPlusIcon />
+								Accept
+							</Button>
+							<Button @click="removeFriend(friend)">
+								<XIcon />
+								Ignore
+							</Button>
 						</template>
 						<template v-else>
-							<ButtonStyled>
-								<button @click="removeFriend(friend)">
-									<XIcon />
-									Cancel
-								</button>
-							</ButtonStyled>
+							<Button @click="removeFriend(friend)">
+								<XIcon />
+								Cancel
+							</Button>
 						</template>
 					</div>
 				</div>
@@ -263,26 +258,28 @@ const messages = defineMessages({
 					wrapper-class="flex-1"
 					@keyup.enter="addFriendFromModal"
 				/>
-				<ButtonStyled color="brand">
-					<button :disabled="username.length === 0" @click="addFriendFromModal">
-						<SendIcon />
-						{{ formatMessage(messages.sendFriendRequest) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="username.length === 0"
+					@click="addFriendFromModal"
+				>
+					<SendIcon />
+					{{ formatMessage(messages.sendFriendRequest) }}
+				</Button>
 			</div>
 		</div>
 	</ModalWrapper>
 	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
 		<template v-if="sortedFriends.length > 0">
-			<ButtonStyled circular type="transparent">
-				<button
-					v-tooltip="formatMessage(messages.addFriend)"
-					:aria-label="formatMessage(messages.addFriend)"
-					@click="addFriendModal.show"
-				>
-					<UserPlusIcon />
-				</button>
-			</ButtonStyled>
+			<IconButton
+				v-tooltip="formatMessage(messages.addFriend)"
+				type="quiet"
+				:label="formatMessage(messages.addFriend)"
+				@click="addFriendModal.show"
+			>
+				<UserPlusIcon />
+			</IconButton>
 			<StyledInput
 				v-model="search"
 				:icon="SearchIcon"
@@ -297,23 +294,23 @@ const messages = defineMessages({
 		<h3 v-else class="w-full text-base text-primary font-medium m-0">
 			{{ formatMessage(messages.friends) }}
 		</h3>
-		<ButtonStyled v-if="incomingRequests.length > 0" circular type="transparent">
-			<button
-				v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
-				class="relative"
-				:aria-label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
-				@click="friendInvitesModal.show"
+		<IconButton
+			v-if="incomingRequests.length > 0"
+			v-tooltip="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+			type="quiet"
+			:label="formatMessage(messages.viewFriendRequests, { count: incomingRequests.length })"
+			class="relative"
+			@click="friendInvitesModal.show"
+		>
+			<MailIcon />
+			<span
+				v-if="incomingRequests.length > 0"
+				aria-hidden="true"
+				class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
 			>
-				<MailIcon />
-				<span
-					v-if="incomingRequests.length > 0"
-					aria-hidden="true"
-					class="absolute bg-brand text-brand-inverted text-[8px] top-0.5 px-1 right-0.5 min-w-3 h-3 rounded-full flex items-center justify-center font-bold"
-				>
-					{{ incomingRequests.length }}
-				</span>
-			</button>
-		</ButtonStyled>
+				{{ incomingRequests.length }}
+			</span>
+		</IconButton>
 	</div>
 	<div class="flex flex-col gap-3">
 		<h3 v-if="loading" class="text-base text-primary font-medium m-0">
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsSection.vue b/apps/app-frontend/src/components/ui/friends/FriendsSection.vue
index ec453e6c38..e53e7cc0f6 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsSection.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsSection.vue
@@ -3,9 +3,9 @@ import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
 import {
 	Accordion,
 	Avatar,
-	ButtonStyled,
 	defineMessages,
-	OverflowMenu,
+	IconButton,
+	TeleportOverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { useTemplateRef } from 'vue'
@@ -166,29 +166,35 @@ const messages = defineMessages({
 							<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
 						</div>
 					</RouterLink>
-					<ButtonStyled v-if="friend.accepted" circular type="transparent">
-						<OverflowMenu
-							class="opacity-0 group-hover:opacity-100 transition-opacity"
-							:options="[
-								{
-									id: 'remove-friend',
-									action: () => removeFriend(friend),
-									color: 'red',
-								},
-							]"
-						>
-							<MoreVerticalIcon />
-							<template #remove-friend>
-								<TrashIcon />
-								{{ formatMessage(messages.removeFriend) }}
-							</template>
-						</OverflowMenu>
-					</ButtonStyled>
-					<ButtonStyled v-else type="transparent" circular>
-						<button v-tooltip="formatMessage(messages.cancelRequest)" @click="removeFriend(friend)">
-							<XIcon />
-						</button>
-					</ButtonStyled>
+					<TeleportOverflowMenu
+						v-if="friend.accepted"
+						type="quiet"
+						label="More options"
+						class="opacity-0 group-hover:opacity-100 transition-opacity"
+						:options="[
+							{
+								id: 'remove-friend',
+								label: formatMessage(messages.removeFriend),
+								action: () => removeFriend(friend),
+								tone: 'red',
+							},
+						]"
+					>
+						<MoreVerticalIcon />
+						<template #remove-friend>
+							<TrashIcon />
+							{{ formatMessage(messages.removeFriend) }}
+						</template>
+					</TeleportOverflowMenu>
+					<IconButton
+						v-else
+						v-tooltip="formatMessage(messages.cancelRequest)"
+						type="quiet"
+						:label="formatMessage(messages.cancelRequest)"
+						@click="removeFriend(friend)"
+					>
+						<XIcon />
+					</IconButton>
 				</div>
 			</div>
 		</template>
diff --git a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
index 17114ed83a..9845331baf 100644
--- a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
@@ -1,12 +1,6 @@
 <script setup>
 import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	Avatar,
-	ButtonStyled,
-	injectNotificationManager,
-	StyledInput,
-} from '@modrinth/ui'
+import { Admonition, Avatar, Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, ref } from 'vue'
@@ -110,19 +104,15 @@ async function addServer(instance) {
 						/>
 						{{ instance.name }}
 					</router-link>
-					<ButtonStyled>
-						<button :disabled="instance.added || instance.adding" @click="addServer(instance)">
-							<PlusIcon v-if="!instance.added && !instance.adding" />
-							<CheckIcon v-else-if="instance.added" />
-							{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
-						</button>
-					</ButtonStyled>
+					<Button :disabled="instance.added || instance.adding" @click="addServer(instance)">
+						<PlusIcon v-if="!instance.added && !instance.adding" />
+						<CheckIcon v-else-if="instance.added" />
+						{{ instance.adding ? 'Adding...' : instance.added ? 'Added' : 'Add' }}
+					</Button>
 				</div>
 			</div>
 			<div class="input-group push-right">
-				<ButtonStyled>
-					<button @click="modal.hide()">Cancel</button>
-				</ButtonStyled>
+				<Button @click="modal.hide()">Cancel</Button>
 			</div>
 		</div>
 	</ModalWrapper>
diff --git a/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue b/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
index 40267f14f5..a08649009f 100644
--- a/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
@@ -7,7 +7,7 @@ import {
 	MessagesSquareIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, Collapsible, NewModal } from '@modrinth/ui'
+import { Admonition, Button, ButtonLink, Collapsible, IconButton, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
@@ -137,16 +137,18 @@ async function copyToClipboard(text: string) {
 
 			<!-- Action buttons -->
 			<div class="flex items-center gap-2">
-				<ButtonStyled>
-					<a href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
-						<MessagesSquareIcon /> Contact support
-					</a>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="loadingSignIn" class="!w-full" @click="signInAgain">
-						<LogInIcon /> Sign in again
-					</button>
-				</ButtonStyled>
+				<ButtonLink href="https://support.modrinth.com" class="!w-full" @click="modal?.hide()">
+					<MessagesSquareIcon /> Contact support
+				</ButtonLink>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="loadingSignIn"
+					class="!w-full"
+					@click="signInAgain"
+				>
+					<LogInIcon /> Sign in again
+				</Button>
 			</div>
 
 			<div class="flex flex-col gap-2">
@@ -176,16 +178,15 @@ async function copyToClipboard(text: string) {
 							>
 								{{ debugInfo }}
 							</div>
-							<ButtonStyled circular>
-								<button
-									v-tooltip="'Copy debug info'"
-									:disabled="copied"
-									@click="copyToClipboard(debugInfo)"
-								>
-									<template v-if="copied"> <CheckIcon class="text-green" /> </template>
-									<template v-else> <CopyIcon /> </template>
-								</button>
-							</ButtonStyled>
+							<IconButton
+								v-tooltip="'Copy debug info'"
+								:label="'Copy debug info'"
+								:disabled="copied"
+								@click="copyToClipboard(debugInfo)"
+							>
+								<template v-if="copied"> <CheckIcon class="text-green" /> </template>
+								<template v-else> <CopyIcon /> </template>
+							</IconButton>
 						</div>
 					</Collapsible>
 				</div>
diff --git a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
index c82c174a45..4472906316 100644
--- a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
+++ b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
@@ -21,38 +21,33 @@
 
 		<div class="flex flex-col gap-6 px-6 pb-6">
 			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<a class="w-full !shadow-none" href="https://support.modrinth.com" @click="modal?.hide()">
-						<MessagesSquareIcon />
-						{{ formatMessage(messages.getSupport) }}
-					</a>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button class="w-full !shadow-none" :disabled="loadingSignIn" @click="signIn">
-						<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
-						<svg
-							v-else
-							width="20"
-							height="20"
-							viewBox="0 0 20 20"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<rect width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect x="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
-							<rect
-								x="10.75"
-								y="10.75"
-								width="9.25"
-								height="9.25"
-								fill="black"
-								fill-opacity="0.9"
-							/>
-						</svg>
-						{{ formatMessage(messages.signIn) }}
-					</button>
-				</ButtonStyled>
+				<ButtonLink class="w-full" href="https://support.modrinth.com" @click="modal?.hide()">
+					<MessagesSquareIcon />
+					{{ formatMessage(messages.getSupport) }}
+				</ButtonLink>
+				<Button
+					type="colored"
+					color="brand"
+					class="w-full"
+					:disabled="loadingSignIn"
+					@click="signIn"
+				>
+					<SpinnerIcon v-if="loadingSignIn" class="animate-spin" />
+					<svg
+						v-else
+						width="20"
+						height="20"
+						viewBox="0 0 20 20"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<rect width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect x="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+						<rect x="10.75" y="10.75" width="9.25" height="9.25" fill="black" fill-opacity="0.9" />
+					</svg>
+					{{ formatMessage(messages.signIn) }}
+				</Button>
 			</div>
 			<p class="m-0 text-center text-sm text-secondary">
 				{{ formatMessage(messages.dontHaveAccount) }}
@@ -69,7 +64,7 @@
 
 <script setup lang="ts">
 import { MessagesSquareIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
+import { Button, ButtonLink, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
 import { inject, type Ref, ref } from 'vue'
 
 import steveImage from '@/assets/steve-look-up-left.webp'
diff --git a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
index d6c869ba13..4ebef1803e 100644
--- a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
@@ -6,18 +6,14 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="confirm">
-						<TrashIcon />
-						{{ formatMessage(messages.deleteButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="confirm">
+					<TrashIcon />
+					{{ formatMessage(messages.deleteButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -27,7 +23,7 @@
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	NewModal,
diff --git a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
index 912725f5e8..16c229706f 100644
--- a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
@@ -18,12 +18,10 @@
 						{{ formatMessage(messages.sharedInstance) }}
 					</span>
 
-					<ButtonStyled type="transparent">
-						<button @click="openViewContents">
-							<EyeIcon />
-							{{ formatMessage(messages.viewContents) }}
-						</button>
-					</ButtonStyled>
+					<Button type="quiet" @click="openViewContents">
+						<EyeIcon />
+						{{ formatMessage(messages.viewContents) }}
+					</Button>
 				</div>
 
 				<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
@@ -113,40 +111,30 @@
 			</p>
 
 			<div class="flex w-full items-center justify-between gap-2">
-				<ButtonStyled type="transparent" color="red">
-					<button @click="handleReport">
-						<ReportIcon />
-						{{ formatMessage(commonMessages.reportButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" color="red" @click="handleReport">
+					<ReportIcon />
+					{{ formatMessage(commonMessages.reportButton) }}
+				</Button>
 
 				<div class="flex items-center gap-2">
 					<template v-if="hasExternalFiles">
-						<ButtonStyled type="transparent" color="orange">
-							<button @click="handleAccept">
-								{{ formatMessage(messages.installAnyway) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleDecline">
-								<BanIcon />
-								{{ formatMessage(messages.dontInstall) }}
-							</button>
-						</ButtonStyled>
+						<Button type="quiet" color="orange" @click="handleAccept">
+							{{ formatMessage(messages.installAnyway) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleDecline">
+							<BanIcon />
+							{{ formatMessage(messages.dontInstall) }}
+						</Button>
 					</template>
 					<template v-else>
-						<ButtonStyled>
-							<button @click="handleDecline">
-								<XIcon />
-								{{ formatMessage(commonMessages.cancelButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleAccept">
-								<DownloadIcon />
-								{{ formatMessage(messages.installButton) }}
-							</button>
-						</ButtonStyled>
+						<Button @click="handleDecline">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleAccept">
+							<DownloadIcon />
+							{{ formatMessage(messages.installButton) }}
+						</Button>
 					</template>
 				</div>
 			</div>
@@ -163,10 +151,10 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { BanIcon, DownloadIcon, EyeIcon, ReportIcon, XIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
 	Admonition,
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	type ContentItem,
 	defineMessages,
diff --git a/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue b/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
index 007a4a84e2..20ad5d881c 100644
--- a/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
@@ -10,24 +10,18 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="handleGoToInstance">
-						{{ formatMessage(messages.instance) }}
-						<RightArrowIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button @click="handleCreateAnyway">
-						<PlusIcon />
-						{{ formatMessage(messages.create) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button @click="handleGoToInstance">
+					{{ formatMessage(messages.instance) }}
+					<RightArrowIcon />
+				</Button>
+				<Button type="colored" color="orange" @click="handleCreateAnyway">
+					<PlusIcon />
+					{{ formatMessage(messages.create) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -36,7 +30,7 @@
 <script setup lang="ts">
 import { PlusIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
diff --git a/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue b/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
index db5dbc880c..18b832278d 100644
--- a/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
@@ -19,18 +19,20 @@
 
 			<div class="flex flex-col gap-6">
 				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-					<ButtonStyled>
-						<button class="w-full !shadow-none" type="button" @click="authenticate('sign-up')">
-							<UserPlusIcon aria-hidden="true" />
-							{{ formatMessage(messages.createAccountButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button class="w-full" type="button" @click="authenticate('sign-in')">
-							<LogInIcon aria-hidden="true" />
-							{{ formatMessage(messages.signInButton) }}
-						</button>
-					</ButtonStyled>
+					<Button class="w-full" native-type="button" @click="authenticate('sign-up')">
+						<UserPlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createAccountButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						class="w-full"
+						native-type="button"
+						@click="authenticate('sign-in')"
+					>
+						<LogInIcon aria-hidden="true" />
+						{{ formatMessage(messages.signInButton) }}
+					</Button>
 				</div>
 
 				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
@@ -69,23 +71,19 @@
 
 			<div class="flex flex-col gap-6">
 				<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-					<ButtonStyled type="outlined">
-						<button class="w-full" type="button" @click="modal?.hide()">
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(messages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button
-							class="w-full !shadow-none"
-							type="button"
-							:disabled="reopeningBrowser"
-							@click="reopenBrowser"
-						>
-							<RefreshCwIcon aria-hidden="true" />
-							{{ formatMessage(messages.openBrowserAgainButton) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" class="w-full" native-type="button" @click="modal?.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.cancelButton) }}
+					</Button>
+					<Button
+						class="w-full"
+						native-type="button"
+						:disabled="reopeningBrowser"
+						@click="reopenBrowser"
+					>
+						<RefreshCwIcon aria-hidden="true" />
+						{{ formatMessage(messages.openBrowserAgainButton) }}
+					</Button>
 				</div>
 
 				<p class="m-0 text-center text-base font-medium leading-6 text-primary">
@@ -108,7 +106,7 @@
 
 <script setup lang="ts">
 import { LogInIcon, RefreshCwIcon, SpinnerIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
+import { Button, defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { ref } from 'vue'
 
diff --git a/apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue b/apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue
index b945942ae6..2a309d8fa7 100644
--- a/apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/account/PrivacySettings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Settings2Icon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	defineMessages,
 	injectNotificationManager,
 	injectPageContext,
@@ -78,12 +78,10 @@ watch(
 			{{ formatMessage(messages.adsConsentTitle) }}
 		</h2>
 		<div class="mt-2 flex flex-col gap-2.5 items-start">
-			<ButtonStyled>
-				<button class="!shadow-none" @click="manageAdsPreferences">
-					<Settings2Icon aria-hidden="true" />
-					{{ formatMessage(messages.adsConsentManage) }}
-				</button>
-			</ButtonStyled>
+			<Button @click="manageAdsPreferences">
+				<Settings2Icon aria-hidden="true" />
+				{{ formatMessage(messages.adsConsentManage) }}
+			</Button>
 			<div>
 				{{ formatMessage(messages.adsConsentIntro) }}
 			</div>
diff --git a/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue b/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
index 65a0276b37..29f314f140 100644
--- a/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/display/FeatureFlagSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ButtonStyled, Toggle } from '@modrinth/ui'
+import { Button, Toggle } from '@modrinth/ui'
 import { ref, watch } from 'vue'
 
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
@@ -33,14 +33,13 @@ watch(
 				</h2>
 			</div>
 			<div class="flex items-center gap-2">
-				<ButtonStyled type="transparent">
-					<button
-						:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
-						@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
-					>
-						Reset to default
-					</button>
-				</ButtonStyled>
+				<Button
+					type="quiet"
+					:disabled="themeStore.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
+					@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
+				>
+					Reset to default
+				</Button>
 				<Toggle
 					id="advanced-rendering"
 					:model-value="themeStore.getFeatureFlag(option)"
diff --git a/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
index 9b6aa92062..0fc1a131f6 100644
--- a/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { BoxIcon, FolderOpenIcon, FolderSearchIcon, TrashIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	defineMessages,
+	IconButton,
 	injectNotificationManager,
 	Slider,
 	StyledInput,
@@ -183,16 +184,14 @@ async function findLauncherDir() {
 				wrapper-class="w-full"
 			>
 				<template #right>
-					<ButtonStyled circular>
-						<button
-							v-tooltip="formatMessage(messages.browseAppDirectory)"
-							:aria-label="formatMessage(messages.browseAppDirectory)"
-							class="ml-1.5"
-							@click="findLauncherDir"
-						>
-							<FolderSearchIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-tooltip="formatMessage(messages.browseAppDirectory)"
+						:label="formatMessage(messages.browseAppDirectory)"
+						class="ml-1.5"
+						@click="findLauncherDir"
+					>
+						<FolderSearchIcon aria-hidden="true" />
+					</IconButton>
 				</template>
 			</StyledInput>
 			<p class="m-0 leading-tight text-secondary">
@@ -235,10 +234,10 @@ async function findLauncherDir() {
 			<h2 class="m-0 text-lg font-semibold text-contrast">
 				{{ formatMessage(messages.appCacheTitle) }}
 			</h2>
-			<button id="purge-cache" class="btn min-w-max" @click="handlePurgeCacheClick">
+			<Button id="purge-cache" class="w-fit" @click="handlePurgeCacheClick">
 				<TrashIcon aria-hidden="true" />
 				{{ formatMessage(messages.purgeCache) }}
-			</button>
+			</Button>
 			<p class="m-0 leading-tight text-secondary">
 				{{ formatMessage(messages.appCacheDescription) }}
 			</p>
@@ -280,10 +279,10 @@ async function findLauncherDir() {
 			<h2 class="mt-0 m-0 text-lg font-semibold text-contrast">
 				{{ formatMessage(messages.appDatabaseBackupsTitle) }}
 			</h2>
-			<button id="open-db-backups-folder" class="btn min-w-max" @click="openDbBackupsFolder">
+			<Button id="open-db-backups-folder" class="w-fit" @click="openDbBackupsFolder">
 				<FolderOpenIcon aria-hidden="true" />
 				{{ formatMessage(messages.openBackupsFolder) }}
-			</button>
+			</Button>
 			<p class="m-0 leading-tight text-secondary">
 				{{ formatMessage(messages.appDatabaseBackupsDescription) }}
 			</p>
diff --git a/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue b/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue
index 3e59220273..092bf5e019 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue
@@ -10,24 +10,18 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="handleGoToInstance">
-						{{ formatMessage(messages.instance) }}
-						<RightArrowIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button @click="handleInstallAnyway">
-						<DownloadIcon />
-						{{ formatMessage(messages.installAnyway) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button @click="handleGoToInstance">
+					{{ formatMessage(messages.instance) }}
+					<RightArrowIcon />
+				</Button>
+				<Button type="colored" color="orange" @click="handleInstallAnyway">
+					<DownloadIcon />
+					{{ formatMessage(messages.installAnyway) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -36,7 +30,7 @@
 <script setup lang="ts">
 import { DownloadIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
diff --git a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue
index 2c63720be5..9ffa818bcb 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue
@@ -193,53 +193,39 @@
 				{{ formatMessage(messages.reviewedFiles) }}
 			</p>
 			<div v-if="!reportMode" class="flex w-full items-center justify-between gap-2">
-				<ButtonStyled color="red" type="transparent">
-					<button @click="reportMode = true">
-						<ReportIcon />{{ formatMessage(commonMessages.reportButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" color="red" @click="reportMode = true">
+					<ReportIcon />{{ formatMessage(commonMessages.reportButton) }}
+				</Button>
 				<div class="flex items-center gap-2">
 					<template v-if="hasExternalFiles">
-						<ButtonStyled type="transparent" color="orange">
-							<button @click="accept">
-								{{ formatMessage(messages.installAnyway) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleCancel">
-								<BanIcon />{{ formatMessage(messages.dontInstall) }}
-							</button>
-						</ButtonStyled>
+						<Button type="quiet" color="orange" @click="accept">
+							{{ formatMessage(messages.installAnyway) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleCancel">
+							<BanIcon />{{ formatMessage(messages.dontInstall) }}
+						</Button>
 					</template>
 					<template v-else>
-						<ButtonStyled type="outlined">
-							<button class="!border" @click="handleCancel">
-								<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="accept">
-								<DownloadIcon />{{ formatMessage(messages.installButton) }}
-							</button>
-						</ButtonStyled>
+						<Button type="outlined" class="!border" @click="handleCancel">
+							<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+						</Button>
+						<Button type="colored" color="brand" @click="accept">
+							<DownloadIcon />{{ formatMessage(messages.installButton) }}
+						</Button>
 					</template>
 				</div>
 			</div>
 		</div>
 		<template v-if="reportMode" #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button class="!border" :disabled="submitLoading" @click="handleCancel">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!canSubmitReport" @click="submitReport">
-						<SpinnerIcon v-if="submitLoading" class="animate-spin" />
-						<SendIcon v-else />
-						{{ formatMessage(commonMessages.reportButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" class="!border" :disabled="submitLoading" @click="handleCancel">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!canSubmitReport" @click="submitReport">
+					<SpinnerIcon v-if="submitLoading" class="animate-spin" />
+					<SendIcon v-else />
+					{{ formatMessage(commonMessages.reportButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -254,12 +240,12 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { BanIcon, DownloadIcon, ReportIcon, SendIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
 	Admonition,
 	AutoLink,
 	Avatar,
 	blockedUsersQueryKey,
-	ButtonStyled,
 	Checkbox,
 	Combobox,
 	type ComboboxOption,
diff --git a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue
index 8db6f7abb2..7733b6f6ce 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/shared-instance-install-summary.vue
@@ -4,12 +4,10 @@
 			<span class="font-semibold text-contrast">{{
 				heading ?? formatMessage(messages.sharedInstance)
 			}}</span>
-			<ButtonStyled type="transparent">
-				<button @click="emit('viewContents')">
-					<EyeIcon />
-					{{ formatMessage(messages.viewContents) }}
-				</button>
-			</ButtonStyled>
+			<Button type="quiet" @click="emit('viewContents')">
+				<EyeIcon />
+				{{ formatMessage(messages.viewContents) }}
+			</Button>
 		</div>
 		<div class="flex items-center gap-3 rounded-2xl bg-surface-2 p-3">
 			<Avatar
@@ -34,7 +32,7 @@
 
 <script setup lang="ts">
 import { EyeIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, defineMessages, formatLoader, useVIntl } from '@modrinth/ui'
+import { Avatar, Button, defineMessages, formatLoader, useVIntl } from '@modrinth/ui'
 import { computed, toRefs } from 'vue'
 
 import type { SharedInstanceInstallPreview } from '@/helpers/install'
diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index 7993ef2034..fe7968a3f7 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -22,11 +22,9 @@
 			<div class="flex flex-col gap-4 w-full min-h-[20rem]">
 				<section v-if="mode === 'edit' && canEditTextureAndModel">
 					<h2 class="text-base font-semibold mb-2">{{ formatMessage(messages.textureSection) }}</h2>
-					<ButtonStyled>
-						<button class="!shadow-none" @click="openTextureFileBrowser">
-							<UploadIcon /> {{ formatMessage(messages.replaceTextureButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="openTextureFileBrowser">
+						<UploadIcon /> {{ formatMessage(messages.replaceTextureButton) }}
+					</Button>
 					<input
 						ref="textureFileInput"
 						type="file"
@@ -112,19 +110,21 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button :disabled="isSaving" @click="hide">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button v-tooltip="saveTooltip" :disabled="disableSave || isSaving" @click="save">
-						<SpinnerIcon v-if="isSaving" class="animate-spin" />
-						<CheckIcon v-else-if="mode === 'new'" />
-						<SaveIcon v-else />
-						{{ formatMessage(mode === 'new' ? messages.addSkinButton : messages.saveSkinButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" :disabled="isSaving" @click="hide">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="saveTooltip"
+					type="colored"
+					color="brand"
+					:disabled="disableSave || isSaving"
+					@click="save"
+				>
+					<SpinnerIcon v-if="isSaving" class="animate-spin" />
+					<CheckIcon v-else-if="mode === 'new'" />
+					<SaveIcon v-else />
+					{{ formatMessage(mode === 'new' ? messages.addSkinButton : messages.saveSkinButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -133,7 +133,7 @@
 <script setup lang="ts">
 import { CheckIcon, SaveIcon, SpinnerIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	CapeButton,
 	CapeLikeTextButton,
 	commonMessages,
diff --git a/apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue b/apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue
index 2d0eda22e0..9856d76013 100644
--- a/apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue
+++ b/apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue
@@ -2,9 +2,10 @@
 import { DropdownIcon, EditIcon, PlusIcon, TrashIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	Accordion,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
+	IconButton,
 	SkinButton,
 	SkinLikeTextButton,
 	useScrollViewport,
@@ -463,25 +464,26 @@ defineExpose({ getAddSkinButtonElement })
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
-									<ButtonStyled color="brand">
-										<button
-											:aria-label="formatMessage(messages.editSkinButton)"
-											class="pointer-events-auto"
-											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-										>
-											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-										<button
-											v-tooltip="formatMessage(messages.deleteSkinButton)"
-											:aria-label="formatMessage(messages.deleteSkinButton)"
-											class="!rounded-[100%] pointer-events-auto"
-											@click.stop="emit('delete', skin)"
-										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
+									<Button
+										type="colored"
+										color="brand"
+										:aria-label="formatMessage(messages.editSkinButton)"
+										class="pointer-events-auto"
+										@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+									>
+										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+									</Button>
+									<IconButton
+										v-show="!skin.is_equipped"
+										v-tooltip="formatMessage(messages.deleteSkinButton)"
+										type="colored"
+										color="red"
+										:label="formatMessage(messages.deleteSkinButton)"
+										class="!rounded-[100%] pointer-events-auto"
+										@click.stop="emit('delete', skin)"
+									>
+										<TrashIcon />
+									</IconButton>
 								</template>
 							</SkinButton>
 						</div>
@@ -503,25 +505,26 @@ defineExpose({ getAddSkinButtonElement })
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
-									<ButtonStyled color="brand">
-										<button
-											:aria-label="formatMessage(messages.editSkinButton)"
-											class="pointer-events-auto"
-											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-										>
-											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-										<button
-											v-tooltip="formatMessage(messages.deleteSkinButton)"
-											:aria-label="formatMessage(messages.deleteSkinButton)"
-											class="!rounded-[100%] pointer-events-auto"
-											@click.stop="emit('delete', skin)"
-										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
+									<Button
+										type="colored"
+										color="brand"
+										:aria-label="formatMessage(messages.editSkinButton)"
+										class="pointer-events-auto"
+										@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+									>
+										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+									</Button>
+									<IconButton
+										v-show="!skin.is_equipped"
+										v-tooltip="formatMessage(messages.deleteSkinButton)"
+										type="colored"
+										color="red"
+										:label="formatMessage(messages.deleteSkinButton)"
+										class="!rounded-[100%] pointer-events-auto"
+										@click.stop="emit('delete', skin)"
+									>
+										<TrashIcon />
+									</IconButton>
 								</template>
 							</SkinButton>
 						</div>
@@ -545,15 +548,15 @@ defineExpose({ getAddSkinButtonElement })
 						@select="emit('select', skin)"
 					>
 						<template #overlay-buttons>
-							<ButtonStyled color="brand">
-								<button
-									:aria-label="formatMessage(messages.editSkinButton)"
-									class="pointer-events-auto"
-									@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-								>
-									<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-								</button>
-							</ButtonStyled>
+							<Button
+								type="colored"
+								color="brand"
+								:aria-label="formatMessage(messages.editSkinButton)"
+								class="pointer-events-auto"
+								@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+							>
+								<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+							</Button>
 						</template>
 					</SkinButton>
 				</div>
diff --git a/apps/app-frontend/src/components/ui/world/InstanceItem.vue b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
index d2c2388ae3..58f6c81195 100644
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -9,11 +9,11 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	injectNotificationManager,
-	OverflowMenu,
 	SmartClickable,
+	TeleportOverflowMenu,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
@@ -185,54 +185,53 @@ onUnmounted(() => {
 				</div>
 			</div>
 			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<ButtonStyled v-if="playing && !loading" color="red">
-					<button @click="stop">
-						<StopCircleIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.stopButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button
-						v-tooltip="
-							instance.quarantined
-								? 'This instance has been locked'
-								: playing
-									? 'Instance is already open'
-									: null
-						"
-						:disabled="instance.quarantined || playing || loading"
-						@click="play"
-					>
-						<SpinnerIcon v-if="loading" class="animate-spin" />
-						<PlayIcon v-else aria-hidden="true" />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
-						:options="[
-							{
-								id: 'open-instance',
-								shown: !!instance.id,
-								action: () => router.push(encodeURI(`/instance/${instance.id}`)),
-							},
-							{
-								id: 'open-folder',
-								action: () => showInstanceInFolder(instance.id),
-							},
-						]"
-					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #open-instance>
-							<EyeIcon aria-hidden="true" />
-							View instance
-						</template>
-						<template #open-folder>
-							<FolderOpenIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.openFolderButton) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+				<Button v-if="playing && !loading" type="colored" color="red" @click="stop">
+					<StopCircleIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.stopButton) }}
+				</Button>
+				<Button
+					v-else
+					v-tooltip="
+						instance.quarantined
+							? 'This instance has been locked'
+							: playing
+								? 'Instance is already open'
+								: null
+					"
+					:disabled="instance.quarantined || playing || loading"
+					@click="play"
+				>
+					<SpinnerIcon v-if="loading" class="animate-spin" />
+					<PlayIcon v-else aria-hidden="true" />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<TeleportOverflowMenu
+					type="quiet"
+					label="More options"
+					:options="[
+						{
+							id: 'open-instance',
+							label: 'View instance',
+							shown: !!instance.id,
+							action: () => router.push(encodeURI(`/instance/${instance.id}`)),
+						},
+						{
+							id: 'open-folder',
+							label: formatMessage(commonMessages.openFolderButton),
+							action: () => showInstanceInFolder(instance.id),
+						},
+					]"
+				>
+					<MoreVerticalIcon aria-hidden="true" />
+					<template #open-instance>
+						<EyeIcon aria-hidden="true" />
+						View instance
+					</template>
+					<template #open-folder>
+						<FolderOpenIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.openFolderButton) }}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 		</div>
 	</SmartClickable>
diff --git a/apps/app-frontend/src/components/ui/world/WorldItem.vue b/apps/app-frontend/src/components/ui/world/WorldItem.vue
index 5e509c57a2..7d53d27b5d 100644
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -21,13 +21,13 @@ import {
 import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	OverflowMenu,
 	SmartClickable,
 	TagItem,
+	TeleportOverflowMenu,
 	useFormatDateTime,
 	useFormatNumber,
 	useRelativeTime,
@@ -412,177 +412,184 @@ const messages = defineMessages({
 				</template>
 			</div>
 			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<ButtonStyled
+				<Button
 					v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
+					type="colored"
 					color="red"
+					@click="emit('stop')"
 				>
-					<button @click="emit('stop')">
-						<StopCircleIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.stopButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button
-						v-tooltip="
-							quarantined
-								? 'This instance has been locked'
-								: world.type === 'server'
-									? !supportsServerQuickPlay
-										? formatMessage(messages.noServerQuickPlay)
-										: playingOtherWorld
-											? formatMessage(messages.gameAlreadyOpen)
-											: !serverStatus
-												? formatMessage(messages.noContact)
-												: serverIncompatible
-													? formatMessage(messages.incompatibleServer)
-													: null
-									: !supportsWorldQuickPlay
-										? formatMessage(messages.noSingleplayerQuickPlay)
-										: playingOtherWorld || locked
-											? formatMessage(messages.gameAlreadyOpen)
-											: null
-						"
-						:disabled="
-							quarantined ||
-							playingOtherWorld ||
-							startingInstance ||
-							(world.type == 'server' && !supportsServerQuickPlay) ||
-							(world.type == 'singleplayer' && !supportsWorldQuickPlay)
-						"
-						@click="emit('play')"
-					>
-						<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-						<PlayIcon v-else aria-hidden="true" />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
-						:options="[
-							{
-								id: 'play-instance',
-								shown: !!instanceId,
-								disabled: playingInstance || quarantined,
-								action: () => emit('play-instance'),
+					<StopCircleIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.stopButton) }}
+				</Button>
+				<Button
+					v-else
+					v-tooltip="
+						quarantined
+							? 'This instance has been locked'
+							: world.type === 'server'
+								? !supportsServerQuickPlay
+									? formatMessage(messages.noServerQuickPlay)
+									: playingOtherWorld
+										? formatMessage(messages.gameAlreadyOpen)
+										: !serverStatus
+											? formatMessage(messages.noContact)
+											: serverIncompatible
+												? formatMessage(messages.incompatibleServer)
+												: null
+								: !supportsWorldQuickPlay
+									? formatMessage(messages.noSingleplayerQuickPlay)
+									: playingOtherWorld || locked
+										? formatMessage(messages.gameAlreadyOpen)
+										: null
+					"
+					:disabled="
+						quarantined ||
+						playingOtherWorld ||
+						startingInstance ||
+						(world.type == 'server' && !supportsServerQuickPlay) ||
+						(world.type == 'singleplayer' && !supportsWorldQuickPlay)
+					"
+					@click="emit('play')"
+				>
+					<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+					<PlayIcon v-else aria-hidden="true" />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<TeleportOverflowMenu
+					type="quiet"
+					label="More options"
+					:options="[
+						{
+							id: 'play-instance',
+							label: formatMessage(messages.playInstance),
+							shown: !!instanceId,
+							disabled: playingInstance || quarantined,
+							action: () => emit('play-instance'),
+						},
+						{
+							id: 'open-instance',
+							label: formatMessage(messages.viewInstance),
+							shown: !!instanceId,
+							action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
+						},
+						{
+							id: 'refresh',
+							label: formatMessage(commonMessages.refreshButton),
+							shown: world.type === 'server',
+							action: () => emit('refresh'),
+						},
+						{
+							id: 'copy-address',
+							label: formatMessage(messages.copyAddress),
+							shown: world.type === 'server',
+							action: () => copyToClipboard((world as ServerWorld).address),
+						},
+						{
+							id: 'edit',
+							label: formatMessage(commonMessages.editButton),
+							action: () => emit('edit'),
+							shown: !instanceId,
+							disabled: locked || managed,
+							tooltip: locked
+								? formatMessage(messages.worldInUse)
+								: managed
+									? formatMessage(messages.linkedServer)
+									: undefined,
+						},
+						{
+							id: 'open-folder',
+							label: formatMessage(commonMessages.openFolderButton),
+							shown: world.type === 'singleplayer',
+							action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
+						},
+						{
+							type: 'divider',
+							shown: !!instanceId,
+						},
+						{
+							id: 'dont-show-on-home',
+							label: formatMessage(messages.dontShowOnHome),
+							shown: !!instanceId,
+							action: () => {
+								set_world_display_status(
+									instanceId,
+									world.type,
+									getWorldIdentifier(world),
+									'hidden',
+								).then(() => {
+									emit('update')
+								})
 							},
-							{
-								id: 'open-instance',
-								shown: !!instanceId,
-								action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
-							},
-							{
-								id: 'refresh',
-								shown: world.type === 'server',
-								action: () => emit('refresh'),
-							},
-							{
-								id: 'copy-address',
-								shown: world.type === 'server',
-								action: () => copyToClipboard((world as ServerWorld).address),
-							},
-							{
-								id: 'edit',
-								action: () => emit('edit'),
-								shown: !instanceId,
-								disabled: locked || managed,
-								tooltip: locked
-									? formatMessage(messages.worldInUse)
-									: managed
-										? formatMessage(messages.linkedServer)
-										: undefined,
-							},
-							{
-								id: 'open-folder',
-								shown: world.type === 'singleplayer',
-								action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
-							},
-							{
-								divider: true,
-								shown: !!instanceId,
-							},
-							{
-								id: 'dont-show-on-home',
-								shown: !!instanceId,
-								action: () => {
-									set_world_display_status(
-										instanceId,
-										world.type,
-										getWorldIdentifier(world),
-										'hidden',
-									).then(() => {
-										emit('update')
-									})
-								},
-							},
-							{
-								id: 'create-shortcut',
-								shown: !!shortcutInstanceId && !quarantined,
-								action: () => createShortcut(),
-							},
-							{
-								divider: true,
-								shown: !instanceId,
-							},
-							{
-								id: 'delete',
-								color: 'red',
-								hoverFilled: true,
-								action: () => emit('delete'),
-								shown: !instanceId,
-								disabled: locked || managed,
-								tooltip: locked
-									? formatMessage(messages.worldInUse)
-									: managed
-										? formatMessage(messages.linkedServer)
-										: undefined,
-							},
-						]"
-					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #play-instance>
-							<PlayIcon aria-hidden="true" />
-							{{ formatMessage(messages.playInstance) }}
-						</template>
-						<template #open-instance>
-							<EyeIcon aria-hidden="true" />
-							{{ formatMessage(messages.viewInstance) }}
-						</template>
-						<template #edit>
-							<EditIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.editButton) }}
-						</template>
-						<template #open-folder>
-							<FolderOpenIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.openFolderButton) }}
-						</template>
-						<template #copy-address>
-							<ClipboardCopyIcon aria-hidden="true" />
-							{{ formatMessage(messages.copyAddress) }}
-						</template>
-						<template #refresh>
-							<UpdatedIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.refreshButton) }}
-						</template>
-						<template #create-shortcut>
-							<ExternalIcon aria-hidden="true" />
-							{{ formatMessage(messages.createShortcut) }}
-						</template>
-						<template #dont-show-on-home>
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(messages.dontShowOnHome) }}
-						</template>
-						<template #delete>
-							<TrashIcon aria-hidden="true" />
-							{{
-								formatMessage(
-									world.type === 'server'
-										? commonMessages.removeButton
-										: commonMessages.deleteLabel,
-								)
-							}}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+						},
+						{
+							id: 'create-shortcut',
+							label: formatMessage(messages.createShortcut),
+							shown: !!shortcutInstanceId && !quarantined,
+							action: () => createShortcut(),
+						},
+						{
+							type: 'divider',
+							shown: !instanceId,
+						},
+						{
+							id: 'delete',
+							label: formatMessage(
+								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
+							),
+							tone: 'red',
+							action: () => emit('delete'),
+							shown: !instanceId,
+							disabled: locked || managed,
+							tooltip: locked
+								? formatMessage(messages.worldInUse)
+								: managed
+									? formatMessage(messages.linkedServer)
+									: undefined,
+						},
+					]"
+				>
+					<MoreVerticalIcon aria-hidden="true" />
+					<template #play-instance>
+						<PlayIcon aria-hidden="true" />
+						{{ formatMessage(messages.playInstance) }}
+					</template>
+					<template #open-instance>
+						<EyeIcon aria-hidden="true" />
+						{{ formatMessage(messages.viewInstance) }}
+					</template>
+					<template #edit>
+						<EditIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.editButton) }}
+					</template>
+					<template #open-folder>
+						<FolderOpenIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.openFolderButton) }}
+					</template>
+					<template #copy-address>
+						<ClipboardCopyIcon aria-hidden="true" />
+						{{ formatMessage(messages.copyAddress) }}
+					</template>
+					<template #refresh>
+						<UpdatedIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.refreshButton) }}
+					</template>
+					<template #create-shortcut>
+						<ExternalIcon aria-hidden="true" />
+						{{ formatMessage(messages.createShortcut) }}
+					</template>
+					<template #dont-show-on-home>
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.dontShowOnHome) }}
+					</template>
+					<template #delete>
+						<TrashIcon aria-hidden="true" />
+						{{
+							formatMessage(
+								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
+							)
+						}}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 		</div>
 	</SmartClickable>
diff --git a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
index c1679ae0b5..335b0b85eb 100644
--- a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -96,24 +96,18 @@ defineExpose({ show, hide })
 		/>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button :disabled="!address" @click="addServer(false)">
-						<PlusIcon />
-						{{ formatMessage(messages.addServer) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!address" @click="addServer(true)">
-						<PlayIcon />
-						{{ formatMessage(messages.addAndPlay) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button :disabled="!address" @click="addServer(false)">
+					<PlusIcon />
+					{{ formatMessage(messages.addServer) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!address" @click="addServer(true)">
+					<PlayIcon />
+					{{ formatMessage(messages.addAndPlay) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
diff --git a/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
index d82bf82607..685ce81fcb 100644
--- a/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
@@ -2,7 +2,7 @@
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	NewModal,
@@ -106,18 +106,19 @@ defineExpose({ show, hide })
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="!isServer && !isSingleplayer" @click="confirm">
-						<TrashIcon />
-						{{ formatMessage(actionMessage) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="red"
+					:disabled="!isServer && !isSingleplayer"
+					@click="confirm"
+				>
+					<TrashIcon />
+					{{ formatMessage(actionMessage) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
index ce541cce4e..9564d12f99 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessage,
 	injectNotificationManager,
@@ -105,18 +105,14 @@ const titleMessage = defineMessage({
 		<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!address" @click="saveServer">
-						<SaveIcon />
-						{{ formatMessage(commonMessages.saveChangesButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!address" @click="saveServer">
+					<SaveIcon />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
index b611ce4a5f..5a518b5dbd 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -2,7 +2,7 @@
 import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -113,24 +113,18 @@ const messages = defineMessages({
 			<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		</div>
 		<div class="flex gap-2 mt-4">
-			<ButtonStyled color="brand">
-				<button @click="saveWorld">
-					<SaveIcon />
-					{{ formatMessage(commonMessages.saveChangesButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button :disabled="removeIcon || !icon" @click="removeIcon = true">
-					<UndoIcon />
-					{{ formatMessage(messages.resetIcon) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button @click="hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" @click="saveWorld">
+				<SaveIcon />
+				{{ formatMessage(commonMessages.saveChangesButton) }}
+			</Button>
+			<Button :disabled="removeIcon || !icon" @click="removeIcon = true">
+				<UndoIcon />
+				{{ formatMessage(messages.resetIcon) }}
+			</Button>
+			<Button @click="hide()">
+				<XIcon />
+				{{ formatMessage(commonMessages.cancelButton) }}
+			</Button>
 		</div>
 	</ModalWrapper>
 </template>
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 475e1027ca..43b1bbefde 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -1229,6 +1229,9 @@
   "app.update.complete-toast.title": {
     "message": "Version {version} was successfully installed!"
   },
+  "app.user.project.install-to-instance": {
+    "message": "Install to instance"
+  },
   "app.world.server-modal.placeholder-address": {
     "message": "example.modrinth.gg"
   },
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index f6a9282bf6..14394ca444 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -10,7 +10,7 @@ import {
 	SpinnerIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	ConfirmModal,
 	defineMessages,
@@ -1112,13 +1112,15 @@ await loadSkins()
 								class="skin-preview-actions flex w-full items-center justify-center gap-1.5"
 								:class="selectedSkinHasEarsFeatures ? 'flex-nowrap' : 'flex-wrap'"
 							>
-								<button
+								<Button
 									v-tooltip="
 										selectedSkinHasEarsFeatures
 											? formatMessage(commonMessages.resetButton)
 											: undefined
 									"
-									class="skin-preview-action-button flex h-10 min-w-0 cursor-pointer items-center justify-center gap-2 rounded-[14px] border-0 bg-surface-4 px-4 py-2.5 text-base font-semibold leading-5 text-contrast shadow-md transition-[filter,transform] duration-200 enabled:hover:brightness-[--hover-brightness] enabled:focus-visible:brightness-[--hover-brightness] enabled:active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-5 [&>svg]:shrink-0"
+									type="base"
+									size="lg"
+									class="skin-preview-action-button"
 									:disabled="isApplyingSkin || isSkinManagementReadOnly"
 									:aria-label="formatMessage(commonMessages.resetButton)"
 									@click="resetSelectedSkin"
@@ -1127,12 +1129,15 @@ await loadSkins()
 									<span class="skin-preview-action-label">
 										{{ formatMessage(commonMessages.resetButton) }}
 									</span>
-								</button>
-								<button
+								</Button>
+								<Button
 									v-tooltip="
 										selectedSkinHasEarsFeatures ? formatMessage(messages.applyButton) : undefined
 									"
-									class="skin-preview-action-button flex h-10 min-w-0 cursor-pointer items-center justify-center gap-2 rounded-[14px] border-0 bg-brand px-4 py-2.5 text-base font-semibold leading-5 text-[rgba(0,0,0,0.9)] shadow-md transition-[filter,transform] duration-200 enabled:hover:brightness-[--hover-brightness] enabled:focus-visible:brightness-[--hover-brightness] enabled:active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-5 [&>svg]:shrink-0"
+									type="colored"
+									color="brand"
+									size="lg"
+									class="skin-preview-action-button"
 									:disabled="isApplyingSkin || isSkinManagementReadOnly"
 									:aria-label="formatMessage(messages.applyButton)"
 									@click="applySelectedSkin"
@@ -1142,17 +1147,18 @@ await loadSkins()
 									<span class="skin-preview-action-label">
 										{{ formatMessage(messages.applyButton) }}
 									</span>
-								</button>
+								</Button>
 							</div>
-							<button
+							<Button
 								v-else
-								class="flex h-10 min-w-0 cursor-pointer items-center justify-center gap-2 rounded-[14px] border-0 bg-surface-4 px-4 py-2.5 text-base font-semibold leading-5 shadow-md transition-[filter,transform] duration-200 enabled:hover:brightness-[--hover-brightness] enabled:focus-visible:brightness-[--hover-brightness] enabled:active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-5 [&>svg]:shrink-0"
+								type="base"
+								size="lg"
 								:disabled="!selectedSkin || isSkinManagementReadOnly"
 								@click="(e: MouseEvent) => selectedSkin && editSkinModal?.show(e, selectedSkin)"
 							>
 								<EditIcon />
 								{{ formatMessage(messages.editSkinButton) }}
-							</button>
+							</Button>
 
 							<div
 								v-if="selectedSkinHasEarsFeatures"
@@ -1181,28 +1187,28 @@ await loadSkins()
 										>Ears</router-link
 									>
 								</div>
-								<ButtonStyled type="outlined">
-									<button
-										class="ears-feature-toggle-button !h-10 !rounded-[14px] !px-4 shadow-md"
-										:aria-pressed="earsFeaturesEnabled"
-										:aria-label="
-											formatMessage(
-												earsFeaturesEnabled
-													? messages.toggleEarsFeaturesOff
-													: messages.toggleEarsFeaturesOn,
-											)
-										"
-										@click="earsFeaturesEnabled = !earsFeaturesEnabled"
-									>
-										{{
-											formatMessage(
-												earsFeaturesEnabled
-													? messages.toggleEarsFeaturesOff
-													: messages.toggleEarsFeaturesOn,
-											)
-										}}
-									</button>
-								</ButtonStyled>
+								<Button
+									type="outlined"
+									size="lg"
+									class="ears-feature-toggle-button shadow-md"
+									:aria-pressed="earsFeaturesEnabled"
+									:aria-label="
+										formatMessage(
+											earsFeaturesEnabled
+												? messages.toggleEarsFeaturesOff
+												: messages.toggleEarsFeaturesOn,
+										)
+									"
+									@click="earsFeaturesEnabled = !earsFeaturesEnabled"
+								>
+									{{
+										formatMessage(
+											earsFeaturesEnabled
+												? messages.toggleEarsFeaturesOff
+												: messages.toggleEarsFeaturesOn,
+										)
+									}}
+								</Button>
 								<Toggle
 									v-model="earsFeaturesEnabled"
 									v-tooltip="
@@ -1279,13 +1285,17 @@ await loadSkins()
 				<p class="text-lg m-0">
 					{{ formatMessage(messages.signInDescription) }}
 				</p>
-				<ButtonStyled v-show="accountsCard" color="brand" :disabled="accountsCard.loginDisabled">
-					<button :disabled="accountsCard.loginDisabled" @click="login">
-						<LogInIcon v-if="!accountsCard.loginDisabled" />
-						<SpinnerIcon v-else class="animate-spin" />
-						{{ formatMessage(messages.signInButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-show="accountsCard"
+					type="colored"
+					color="brand"
+					:disabled="accountsCard.loginDisabled"
+					@click="login"
+				>
+					<LogInIcon v-if="!accountsCard.loginDisabled" />
+					<SpinnerIcon v-else class="animate-spin" />
+					{{ formatMessage(messages.signInButton) }}
+				</Button>
 			</div>
 		</div>
 	</div>
diff --git a/apps/app-frontend/src/pages/User.vue b/apps/app-frontend/src/pages/User.vue
index ea2b5cf23d..e04c0da3fa 100644
--- a/apps/app-frontend/src/pages/User.vue
+++ b/apps/app-frontend/src/pages/User.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="w-full px-2 pt-2">
+	<div class="w-full p-2">
 		<UserProfilePageLayout
 			:user-id="userId"
 			:project-type="projectType"
@@ -8,16 +8,47 @@
 			project-link-mode="app"
 			:edit-profile-link="openProfileSettings"
 			external-navigation
-		/>
+		>
+			<template #project-actions="{ project }">
+				<Button
+					type="outlined"
+					class="!text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)]"
+					:disabled="isProjectInstalling(project.id)"
+					@click.stop="installProject(project)"
+				>
+					<SpinnerIcon v-if="isProjectInstalling(project.id)" class="animate-spin" />
+					<DownloadIcon v-else-if="project.project_type === 'modpack'" />
+					<PlusIcon v-else />
+					{{
+						formatMessage(
+							isProjectInstalling(project.id)
+								? commonMessages.installingLabel
+								: project.project_type === 'modpack'
+									? commonMessages.installButton
+									: messages.installToInstance,
+						)
+					}}
+				</Button>
+			</template>
+		</UserProfilePageLayout>
 	</div>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { provideUserProfile, UserProfilePageLayout } from '@modrinth/ui'
+import { DownloadIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
+import {
+	Button,
+	commonMessages,
+	defineMessages,
+	injectNotificationManager,
+	provideUserProfile,
+	UserProfilePageLayout,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, inject, ref, watch } from 'vue'
-import { onBeforeRouteUpdate, useRoute } from 'vue-router'
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 
 import {
 	block_user,
@@ -31,10 +62,57 @@ import {
 } from '@/helpers/users'
 import { appSettingsModalOpenProfileKey } from '@/providers/app-settings-modal'
 import { useBreadcrumb } from '@/providers/breadcrumbs'
+import { injectContentInstall } from '@/providers/content-install'
 
 const route = useRoute()
+const router = useRouter()
 const openProfileSettings = inject(appSettingsModalOpenProfileKey, () => {})
 const queryClient = useQueryClient()
+const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
+const { install: installVersion } = injectContentInstall()
+const installingProjectIds = ref(new Set<string>())
+
+const messages = defineMessages({
+	installToInstance: {
+		id: 'app.user.project.install-to-instance',
+		defaultMessage: 'Install to instance',
+	},
+})
+
+function isProjectInstalling(projectId: string): boolean {
+	return installingProjectIds.value.has(projectId)
+}
+
+function setProjectInstalling(projectId: string, installing: boolean): void {
+	const next = new Set(installingProjectIds.value)
+	if (installing) {
+		next.add(projectId)
+	} else {
+		next.delete(projectId)
+	}
+	installingProjectIds.value = next
+}
+
+async function installProject(project: Labrinth.Projects.v2.Project): Promise<void> {
+	if (isProjectInstalling(project.id)) return
+
+	setProjectInstalling(project.id, true)
+	try {
+		await installVersion(
+			project.id,
+			null,
+			null,
+			'UserPage',
+			() => setProjectInstalling(project.id, false),
+			(instanceId) => router.push(`/instance/${encodeURIComponent(instanceId)}`),
+		)
+	} catch (error) {
+		setProjectInstalling(project.id, false)
+		handleError(error)
+	}
+}
+
 const userProfile = provideUserProfile({
 	getUser: get_user_profile,
 	getProjects: get_user_projects,
diff --git a/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-stale.vue b/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-stale.vue
index 30a92c9044..63d053a91e 100644
--- a/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-stale.vue
+++ b/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-stale.vue
@@ -6,23 +6,27 @@
 	>
 		{{ formatMessage(messages.sharedInstanceChangesBody) }}
 		<template #actions>
-			<ButtonStyled color="blue">
-				<button class="!h-10" :disabled="isPublishButtonDisabled" @click="reviewChanges">
-					<SpinnerIcon
-						v-if="isReviewingPublish || isPublishing"
-						class="animate-spin"
-						aria-hidden="true"
-					/>
-					<UploadIcon v-else aria-hidden="true" />
-					{{
-						isPublishing
-							? formatMessage(messages.sharedInstancePublishingButton)
-							: isReviewingPublish
-								? formatMessage(messages.sharedInstanceReviewingButton)
-								: formatMessage(messages.sharedInstancePublishButton)
-					}}
-				</button>
-			</ButtonStyled>
+			<Button
+				type="colored"
+				color="blue"
+				size="lg"
+				:disabled="isPublishButtonDisabled"
+				@click="reviewChanges"
+			>
+				<SpinnerIcon
+					v-if="isReviewingPublish || isPublishing"
+					class="animate-spin"
+					aria-hidden="true"
+				/>
+				<UploadIcon v-else aria-hidden="true" />
+				{{
+					isPublishing
+						? formatMessage(messages.sharedInstancePublishingButton)
+						: isReviewingPublish
+							? formatMessage(messages.sharedInstanceReviewingButton)
+							: formatMessage(messages.sharedInstancePublishButton)
+				}}
+			</Button>
 		</template>
 	</Admonition>
 
@@ -36,7 +40,7 @@
 
 <script setup lang="ts">
 import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
+import { Admonition, Button, useVIntl } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import SharedInstancePublishModal from '@/components/ui/shared-instances/SharedInstancePublishModal.vue'
diff --git a/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-unavailable.vue b/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-unavailable.vue
index 88dc3b7152..319578a47e 100644
--- a/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-unavailable.vue
+++ b/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-unavailable.vue
@@ -8,19 +8,17 @@
 	>
 		{{ formatSharedInstanceUnavailable(reason ?? null, manager) }}
 		<template v-if="reason === 'quarantined'" #actions>
-			<ButtonStyled color="orange">
-				<button class="!h-10" @click="emit('delete')">
-					<TrashIcon aria-hidden="true" />
-					{{ formatMessage(messages.deleteInstance) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="orange" size="lg" @click="emit('delete')">
+				<TrashIcon aria-hidden="true" />
+				{{ formatMessage(messages.deleteInstance) }}
+			</Button>
 		</template>
 	</Admonition>
 </template>
 
 <script setup lang="ts">
 import { TrashIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+import { Admonition, Button, defineMessages, useVIntl } from '@modrinth/ui'
 
 import type { SharedInstanceUnavailableReason } from '@/helpers/install'
 import {
diff --git a/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-update-available.vue b/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-update-available.vue
index 172b1227c9..780b51ccec 100644
--- a/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-update-available.vue
+++ b/apps/app-frontend/src/pages/instance/components/admonitions/shared-instance-update-available.vue
@@ -6,19 +6,17 @@
 	>
 		{{ formatMessage(messages.sharedInstanceUpdateAvailableBody, { name: instanceName }) }}
 		<template #actions>
-			<ButtonStyled color="blue">
-				<button class="!h-10" @click="emit('review', $event)">
-					<DownloadIcon aria-hidden="true" />
-					{{ formatMessage(messages.sharedInstanceReviewUpdateButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="blue" size="lg" @click="emit('review', $event)">
+				<DownloadIcon aria-hidden="true" />
+				{{ formatMessage(messages.sharedInstanceReviewUpdateButton) }}
+			</Button>
 		</template>
 	</Admonition>
 </template>
 
 <script setup lang="ts">
 import { DownloadIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, useVIntl } from '@modrinth/ui'
+import { Admonition, Button, useVIntl } from '@modrinth/ui'
 
 import { instanceAdmonitionsMessages as messages } from './messages'
 
diff --git a/apps/app-frontend/src/pages/instance/components/page-header/index.vue b/apps/app-frontend/src/pages/instance/components/page-header/index.vue
index 59eea07309..50c0f4e4fe 100644
--- a/apps/app-frontend/src/pages/instance/components/page-header/index.vue
+++ b/apps/app-frontend/src/pages/instance/components/page-header/index.vue
@@ -85,66 +85,98 @@
 
 		<template #actions>
 			<PageHeaderActions>
-				<ButtonStyled v-if="isInstalling" color="brand" size="large">
-					<button type="button" disabled>
-						{{ formatMessage(commonMessages.installingLabel) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="playing" color="red" size="large">
-					<button type="button" :disabled="stopping" @click="emit('stop')">
-						<StopCircleIcon />
-						{{
-							stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
-						}}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="instance.quarantined" color="brand" size="large">
-					<button v-tooltip="formatMessage(messages.lockedPlayTooltip)" type="button" disabled>
-						<PlayIcon />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else-if="instance.install_stage !== 'installed'" color="brand" size="large">
-					<button type="button" @click="emit('repair')">
-						<DownloadIcon />
-						{{ formatMessage(messages.repair) }}
-					</button>
-				</ButtonStyled>
-				<JoinedButtons
-					v-else-if="!loading && isServerInstance"
-					:actions="serverPlayActions"
+				<Button
+					v-if="isInstalling"
+					type="colored"
 					color="brand"
-					size="large"
-				/>
-				<ButtonStyled v-else-if="!loading" color="brand" size="large">
-					<button type="button" @click="emit('play')">
-						<PlayIcon />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else color="brand" size="large">
-					<button type="button" disabled>{{ formatMessage(messages.starting) }}</button>
-				</ButtonStyled>
+					size="xl"
+					native-type="button"
+					disabled
+				>
+					{{ formatMessage(commonMessages.installingLabel) }}
+				</Button>
+				<Button
+					v-else-if="playing"
+					type="colored"
+					color="red"
+					size="xl"
+					native-type="button"
+					:disabled="stopping"
+					@click="emit('stop')"
+				>
+					<StopCircleIcon />
+					{{
+						stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
+					}}
+				</Button>
+				<Button
+					v-else-if="instance.quarantined"
+					v-tooltip="formatMessage(messages.lockedPlayTooltip)"
+					type="colored"
+					color="brand"
+					size="xl"
+					native-type="button"
+					disabled
+				>
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<Button
+					v-else-if="instance.install_stage !== 'installed'"
+					type="colored"
+					color="brand"
+					size="xl"
+					native-type="button"
+					@click="emit('repair')"
+				>
+					<DownloadIcon />
+					{{ formatMessage(messages.repair) }}
+				</Button>
+				<SplitButton
+					v-else-if="!loading && isServerInstance"
+					type="colored"
+					color="brand"
+					size="xl"
+					:options="serverPlayOptions"
+					:menu-label="formatMessage(messages.launchInstance)"
+					@click="emit('playServer')"
+				>
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</SplitButton>
+				<Button
+					v-else-if="!loading"
+					type="colored"
+					color="brand"
+					size="xl"
+					native-type="button"
+					@click="emit('play')"
+				>
+					<PlayIcon />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<Button v-else type="colored" color="brand" size="xl" native-type="button" disabled>{{
+					formatMessage(messages.starting)
+				}}</Button>
 
-				<ButtonStyled circular size="large">
-					<button
-						v-tooltip="formatMessage(messages.instanceSettings)"
-						type="button"
-						:aria-label="formatMessage(messages.instanceSettings)"
-						@click="emit('settings')"
-					>
-						<SettingsIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular size="large" type="transparent">
-					<TeleportOverflowMenu
-						:options="moreActions"
-						:tooltip="formatMessage(messages.moreActions)"
-						:aria-label="formatMessage(messages.moreActions)"
-					>
-						<MoreVerticalIcon />
-					</TeleportOverflowMenu>
-				</ButtonStyled>
+				<IconButton
+					v-tooltip="formatMessage(messages.instanceSettings)"
+					size="xl"
+					:label="formatMessage(messages.instanceSettings)"
+					native-type="button"
+					@click="emit('settings')"
+				>
+					<SettingsIcon />
+				</IconButton>
+				<TeleportOverflowMenu
+					type="quiet"
+					size="xl"
+					:label="formatMessage(messages.moreActions)"
+					:tooltip="formatMessage(messages.moreActions)"
+					:options="moreActions"
+				>
+					<MoreVerticalIcon />
+				</TeleportOverflowMenu>
 			</PageHeaderActions>
 		</template>
 	</PageHeader>
@@ -167,23 +199,20 @@ import {
 	TimerIcon,
 	UnknownIcon,
 } from '@modrinth/assets'
+import { Button, IconButton, SplitButton, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	formatLoaderLabel,
-	type JoinedButtonAction,
-	JoinedButtons,
 	LoaderIcon as ServerLoaderIcon,
+	type OverflowMenuOption,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
 	PageHeaderMetadata,
 	PageHeaderMetadataItem,
 	type ServerLoader,
-	TeleportOverflowMenu,
-	type TeleportOverflowMenuItem,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed } from 'vue'
@@ -350,13 +379,7 @@ const playtimeLabel = computed(() => {
 	const seconds = Math.floor(props.timePlayed)
 	return `${seconds} second${seconds > 1 ? 's' : ''}`
 })
-const serverPlayActions = computed<JoinedButtonAction[]>(() => [
-	{
-		id: 'join_server',
-		label: formatMessage(commonMessages.playButton),
-		icon: PlayIcon,
-		action: () => emit('playServer'),
-	},
+const serverPlayOptions = computed<OverflowMenuOption[]>(() => [
 	{
 		id: 'launch_instance',
 		label: formatMessage(messages.launchInstance),
@@ -364,8 +387,8 @@ const serverPlayActions = computed<JoinedButtonAction[]>(() => [
 		action: () => emit('play'),
 	},
 ])
-const moreActions = computed<TeleportOverflowMenuItem[]>(() => {
-	const actions: TeleportOverflowMenuItem[] = [
+const moreActions = computed<OverflowMenuOption[]>(() => {
+	const actions: OverflowMenuOption[] = [
 		{
 			id: 'open-folder',
 			label: formatMessage(messages.openFolder),
@@ -393,12 +416,12 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => {
 
 	if (props.instance.shared_instance?.role === 'member') {
 		actions.push(
-			{ divider: true },
+			{ type: 'divider' },
 			{
 				id: 'report-shared-instance',
 				label: formatMessage(commonMessages.reportButton),
 				icon: ReportIcon,
-				color: 'red',
+				tone: 'red',
 				action: (event) => emit('report', event),
 			},
 		)
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/confirm-revoke-shared-instance-invite-modal.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/confirm-revoke-shared-instance-invite-modal.vue
index e373ce7b93..89fd9f6cd8 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/confirm-revoke-shared-instance-invite-modal.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/confirm-revoke-shared-instance-invite-modal.vue
@@ -10,18 +10,14 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="confirm">
-						<XIcon />
-						{{ formatMessage(messages.revokeButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="confirm">
+					<XIcon />
+					{{ formatMessage(messages.revokeButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -31,7 +27,7 @@
 import { XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
index ef6bec1319..e3f9d8f64b 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
@@ -2,13 +2,13 @@
 import { CopyIcon, EditIcon, PlusIcon, SpinnerIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	Checkbox,
 	Chips,
 	defineMessages,
 	injectNotificationManager,
-	OverflowMenu,
 	StyledInput,
+	TeleportOverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -298,17 +298,24 @@ const messages = defineMessages({
 			<div class="flex flex-col gap-1">
 				<span class="text-lg font-semibold text-contrast">Icon</span>
 				<div class="group relative w-fit">
-					<OverflowMenu
-						v-tooltip="formatMessage(messages.editIcon)"
-						class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
+					<TeleportOverflowMenu
+						:label="formatMessage(messages.editIcon)"
+						:tooltip="formatMessage(messages.editIcon)"
+						:icon-only="false"
+						type="quiet"
+						interaction="none"
+						class="m-0 !h-auto cursor-pointer appearance-none border-none bg-transparent !p-0 transition-transform group-active:scale-95"
 						:options="[
 							{
 								id: 'select',
+								label: icon
+									? formatMessage(messages.replaceIcon)
+									: formatMessage(messages.selectIcon),
 								action: () => setIcon(),
 							},
 							{
 								id: 'remove',
-								color: 'danger',
+								label: formatMessage(messages.removeIcon),
 								action: () => resetIcon(),
 								shown: !!icon,
 							},
@@ -331,7 +338,7 @@ const messages = defineMessages({
 							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
 						</template>
 						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-					</OverflowMenu>
+					</TeleportOverflowMenu>
 				</div>
 			</div>
 		</div>
@@ -352,17 +359,15 @@ const messages = defineMessages({
 				<h2 id="duplicate-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 					{{ formatMessage(messages.duplicateInstance) }}
 				</h2>
-				<ButtonStyled>
-					<button
-						v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
-						aria-labelledby="duplicate-instance-label"
-						:disabled="installing"
-						class="w-max !shadow-none"
-						@click="duplicateInstance"
-					>
-						<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="installing ? formatMessage(messages.duplicateButtonTooltipInstalling) : null"
+					aria-labelledby="duplicate-instance-label"
+					:disabled="installing"
+					class="w-max"
+					@click="duplicateInstance"
+				>
+					<CopyIcon /> {{ formatMessage(messages.duplicateButton) }}
+				</Button>
 				<p class="m-0">
 					{{ formatMessage(messages.duplicateInstanceDescription) }}
 				</p>
@@ -388,11 +393,9 @@ const messages = defineMessages({
 						class="w-full max-w-[300px]"
 						@submit="() => addCategory"
 					/>
-					<ButtonStyled>
-						<button class="w-fit !shadow-none" @click="() => addCategory()">
-							<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
-						</button>
-					</ButtonStyled>
+					<Button class="w-fit" @click="() => addCategory()">
+						<PlusIcon /> {{ formatMessage(messages.libraryGroupsCreate) }}
+					</Button>
 				</div>
 			</div>
 			<p class="m-0">
@@ -421,22 +424,22 @@ const messages = defineMessages({
 			<h2 id="delete-instance-label" class="m-0 text-lg font-semibold text-contrast block">
 				{{ formatMessage(messages.deleteInstance) }}
 			</h2>
-			<ButtonStyled color="red">
-				<button
-					aria-labelledby="delete-instance-label"
-					:disabled="removing"
-					class="w-fit !shadow-none"
-					@click="deleteConfirmModal.show()"
-				>
-					<SpinnerIcon v-if="removing" class="animate-spin" />
-					<TrashIcon v-else />
-					{{
-						removing
-							? formatMessage(messages.deletingInstanceButton)
-							: formatMessage(messages.deleteInstanceButton)
-					}}
-				</button>
-			</ButtonStyled>
+			<Button
+				type="colored"
+				color="red"
+				aria-labelledby="delete-instance-label"
+				:disabled="removing"
+				class="w-fit"
+				@click="deleteConfirmModal.show()"
+			>
+				<SpinnerIcon v-if="removing" class="animate-spin" />
+				<TrashIcon v-else />
+				{{
+					removing
+						? formatMessage(messages.deletingInstanceButton)
+						: formatMessage(messages.deleteInstanceButton)
+				}}
+			</Button>
 			<p class="m-0">
 				{{ formatMessage(messages.deleteInstanceDescription) }}
 			</p>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
index b73d848c87..97a9ab101a 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
@@ -9,7 +9,7 @@ import {
 	XCircleIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
@@ -224,45 +224,60 @@ const messages = defineMessages({
 							wrapper-class="flex-1 min-w-0"
 							@update:model-value="(val) => (javaPath = String(val))"
 						/>
-						<ButtonStyled
+						<Button
+							type="quiet"
 							:color="
 								!hoveringTest && !testingJava
 									? javaTestResult === true
 										? 'green'
 										: 'red'
-									: 'standard'
+									: undefined
 							"
-							color-fill="text"
+							:disabled="!overrideJavaInstall || testingJava"
+							:style="{
+								'--legacy-button-color':
+									(!hoveringTest && !testingJava
+										? javaTestResult === true
+											? 'green'
+											: 'red'
+										: 'standard') &&
+									(!hoveringTest && !testingJava
+										? javaTestResult === true
+											? 'green'
+											: 'red'
+										: 'standard') !== 'standard'
+										? `var(--color-${
+												!hoveringTest && !testingJava
+													? javaTestResult === true
+														? 'green'
+														: 'red'
+													: 'standard'
+											})`
+										: undefined,
+							}"
+							class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
+							@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
+							@mouseenter="overrideJavaInstall && (hoveringTest = true)"
+							@mouseleave="hoveringTest = false"
 						>
-							<button
-								:disabled="!overrideJavaInstall || testingJava"
-								@click="testJavaInstallation(activePath, optimalJava?.parsed_version, true)"
-								@mouseenter="overrideJavaInstall && (hoveringTest = true)"
-								@mouseleave="hoveringTest = false"
-							>
-								<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
-								<CheckCircleIcon
-									v-else-if="javaTestResult === true && !hoveringTest"
-									class="h-4 w-4"
-								/>
-								<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
-								<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
-							</button>
-						</ButtonStyled>
+							<SpinnerIcon v-if="testingJava" class="animate-spin h-4 w-4" />
+							<CheckCircleIcon
+								v-else-if="javaTestResult === true && !hoveringTest"
+								class="h-4 w-4"
+							/>
+							<XCircleIcon v-else-if="javaTestResult !== true && !hoveringTest" class="h-4 w-4" />
+							<RefreshCwIcon v-else-if="overrideJavaInstall" class="h-4 w-4" />
+						</Button>
 					</div>
 					<div v-if="overrideJavaInstall" class="flex gap-2">
-						<ButtonStyled>
-							<button @click="handleDetectJava">
-								<SearchIcon />
-								Detect
-							</button>
-						</ButtonStyled>
-						<ButtonStyled>
-							<button @click="handleBrowseJava">
-								<FolderSearchIcon />
-								Browse
-							</button>
-						</ButtonStyled>
+						<Button @click="handleDetectJava">
+							<SearchIcon />
+							Detect
+						</Button>
+						<Button @click="handleBrowseJava">
+							<FolderSearchIcon />
+							Browse
+						</Button>
 					</div>
 				</div>
 			</div>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/shared-instance-installation-settings-controls.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/shared-instance-installation-settings-controls.vue
index d72f17090e..62c55c1c79 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/shared-instance-installation-settings-controls.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/shared-instance-installation-settings-controls.vue
@@ -2,13 +2,11 @@
 	<div v-if="canUnpublish" class="flex flex-col gap-2.5">
 		<span class="text-lg font-semibold text-contrast">{{ formatMessage(messages.title) }}</span>
 		<div>
-			<ButtonStyled color="orange">
-				<button :disabled="busy" @click="unpublishModal?.show()">
-					<SpinnerIcon v-if="unpublishing" class="animate-spin" />
-					<UnlinkIcon v-else class="size-5" />
-					{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="orange" :disabled="busy" @click="unpublishModal?.show()">
+				<SpinnerIcon v-if="unpublishing" class="animate-spin" />
+				<UnlinkIcon v-else class="size-5" />
+				{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
+			</Button>
 		</div>
 		<span class="text-primary">{{ formatMessage(messages.unpublishDescription) }}</span>
 	</div>
@@ -17,13 +15,11 @@
 			formatMessage(messages.linkedTitle)
 		}}</span>
 		<div>
-			<ButtonStyled color="orange">
-				<button :disabled="busy" @click="unlinkModal?.show()">
-					<SpinnerIcon v-if="unlinking" class="animate-spin" />
-					<UnlinkIcon v-else class="size-5" />
-					{{ formatMessage(unlinking ? messages.unlinkingButton : messages.unlinkButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="orange" :disabled="busy" @click="unlinkModal?.show()">
+				<SpinnerIcon v-if="unlinking" class="animate-spin" />
+				<UnlinkIcon v-else class="size-5" />
+				{{ formatMessage(unlinking ? messages.unlinkingButton : messages.unlinkButton) }}
+			</Button>
 		</div>
 		<span class="text-primary">{{ formatMessage(messages.unlinkDescription) }}</span>
 	</div>
@@ -39,15 +35,11 @@
 		}}</Admonition>
 		<template #actions
 			><div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined"
-					><button class="!border" @click="unpublishModal?.hide()">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button></ButtonStyled
-				><ButtonStyled color="orange"
-					><button :disabled="busy" @click="confirmUnpublish">
-						<UnlinkIcon />{{ formatMessage(messages.unpublishButton) }}
-					</button></ButtonStyled
-				>
+				<Button type="outlined" class="!border" @click="unpublishModal?.hide()">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }} </Button
+				><Button type="colored" color="orange" :disabled="busy" @click="confirmUnpublish">
+					<UnlinkIcon />{{ formatMessage(messages.unpublishButton) }}
+				</Button>
 			</div></template
 		>
 	</NewModal>
@@ -70,15 +62,16 @@
 		</div>
 		<template #actions
 			><div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined"
-					><button class="!border" @click="unlinkModal?.hide()">
-						<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
-					</button></ButtonStyled
-				><ButtonStyled color="orange"
-					><button :disabled="busy || backupBusy" @click="confirmUnlink">
-						<UnlinkIcon />{{ formatMessage(messages.unlinkButton) }}
-					</button></ButtonStyled
+				<Button type="outlined" class="!border" @click="unlinkModal?.hide()">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }} </Button
+				><Button
+					type="colored"
+					color="orange"
+					:disabled="busy || backupBusy"
+					@click="confirmUnlink"
 				>
+					<UnlinkIcon />{{ formatMessage(messages.unlinkButton) }}
+				</Button>
 			</div></template
 		>
 	</NewModal>
@@ -88,7 +81,7 @@
 import { SpinnerIcon, UnlinkIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	InlineBackupCreator,
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings.vue
index c2c481889f..e4f7527170 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings.vue
@@ -40,29 +40,28 @@
 				</template>
 				<template #cell-actions="{ row }">
 					<div class="flex justify-end">
-						<ButtonStyled circular type="transparent">
-							<button
-								v-tooltip="formatMessage(messages.revokeInvite)"
-								:aria-label="
-									formatMessage(messages.revokeInviteWithCode, {
-										code: row.id,
-									})
+						<IconButton
+							v-tooltip="formatMessage(messages.revokeInvite)"
+							type="quiet"
+							:label="
+								formatMessage(messages.revokeInviteWithCode, {
+									code: row.id,
+								})
+							"
+							:disabled="revokeInviteMutation.isPending.value || isBusy"
+							class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
+							@click="revokeInviteModal?.show(row.id)"
+						>
+							<SpinnerIcon
+								v-if="
+									revokeInviteMutation.isPending.value &&
+									revokeInviteMutation.variables.value?.inviteId === row.id
 								"
-								:disabled="revokeInviteMutation.isPending.value || isBusy"
-								class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
-								@click="revokeInviteModal?.show(row.id)"
-							>
-								<SpinnerIcon
-									v-if="
-										revokeInviteMutation.isPending.value &&
-										revokeInviteMutation.variables.value?.inviteId === row.id
-									"
-									class="animate-spin"
-									aria-hidden="true"
-								/>
-								<XIcon v-else aria-hidden="true" />
-							</button>
-						</ButtonStyled>
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<XIcon v-else aria-hidden="true" />
+						</IconButton>
 					</div>
 				</template>
 			</Table>
@@ -81,8 +80,8 @@
 
 <script setup lang="ts">
 import { SpinnerIcon, XIcon } from '@modrinth/assets'
+import { IconButton } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	CopyCode,
 	defineMessages,
 	Table,
diff --git a/apps/app-frontend/src/pages/instance/content/index.vue b/apps/app-frontend/src/pages/instance/content/index.vue
index 018c27b03e..572bf05758 100644
--- a/apps/app-frontend/src/pages/instance/content/index.vue
+++ b/apps/app-frontend/src/pages/instance/content/index.vue
@@ -1307,14 +1307,16 @@ function getOverflowOptions(item: ContentItem): OverflowMenuOption[] {
 	const options: OverflowMenuOption[] = []
 
 	options.push({
-		id: formatMessage(commonMessages.showFileButton),
+		id: 'show-file',
+		label: formatMessage(commonMessages.showFileButton),
 		icon: FolderOpenIcon,
 		action: () => highlightModInInstance(instance.value.id, item.file_path),
 	})
 
 	if (item.project?.slug) {
 		options.push({
-			id: formatMessage(commonMessages.copyLinkButton),
+			id: 'copy-link',
+			label: formatMessage(commonMessages.copyLinkButton),
 			icon: ClipboardCopyIcon,
 			action: async () => {
 				await navigator.clipboard.writeText(
diff --git a/apps/app-frontend/src/pages/instance/share/index.vue b/apps/app-frontend/src/pages/instance/share/index.vue
index 1c09022319..d88eed0d3c 100644
--- a/apps/app-frontend/src/pages/instance/share/index.vue
+++ b/apps/app-frontend/src/pages/instance/share/index.vue
@@ -96,11 +96,9 @@
 				</span>
 			</template>
 			<template #actions>
-				<ButtonStyled color="brand"
-					><button class="!h-10" @click="signInToShare">
-						<LogInIcon aria-hidden="true" />{{ formatMessage(lockedActionButton) }}
-					</button></ButtonStyled
-				>
+				<Button type="colored" color="brand" size="lg" @click="signInToShare">
+					<LogInIcon aria-hidden="true" />{{ formatMessage(lockedActionButton) }}
+				</Button>
 			</template>
 		</SharedInstanceShareEmptyState>
 
@@ -110,21 +108,21 @@
 			:description="formatMessage(messages.noFriendsInvitedDescription)"
 		>
 			<template #actions>
-				<ButtonStyled color="brand"
-					><button
-						class="!h-10"
-						:disabled="inviteLink.pending.value || !hasRemainingUserSlots"
-						@click="showInvitePlayers($event)"
-					>
-						<SpinnerIcon
-							v-if="inviteLink.pending.value"
-							class="animate-spin"
-							aria-hidden="true"
-						/><UserPlusIcon v-else aria-hidden="true" />{{
-							formatMessage(messages.inviteFriendsButton)
-						}}
-					</button></ButtonStyled
+				<Button
+					type="colored"
+					color="brand"
+					size="lg"
+					:disabled="inviteLink.pending.value || !hasRemainingUserSlots"
+					@click="showInvitePlayers($event)"
 				>
+					<SpinnerIcon
+						v-if="inviteLink.pending.value"
+						class="animate-spin"
+						aria-hidden="true"
+					/><UserPlusIcon v-else aria-hidden="true" />{{
+						formatMessage(messages.inviteFriendsButton)
+					}}
+				</Button>
 			</template>
 		</SharedInstanceShareEmptyState>
 	</div>
@@ -134,7 +132,7 @@
 import { LogInIcon, SpinnerIcon, UserPlusIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	ConfirmUnlinkModal,
 	defineMessages,
 	injectAuth,
diff --git a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
index b35e0f5916..756f9b0430 100644
--- a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
+++ b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
@@ -11,28 +11,29 @@
 					clearable
 				/>
 				<template v-if="!actionsLocked">
-					<ButtonStyled type="outlined">
-						<button
-							class="flex !h-10 shrink-0 items-center gap-2 !border"
-							:disabled="pushUpdateDisabled"
-							@click="management.pushUpdate($event)"
-						>
-							<SpinnerIcon v-if="pushUpdatePending" class="animate-spin" aria-hidden="true" />
-							<UploadIcon v-else aria-hidden="true" />
-							{{ formatMessage(messages.pushUpdate) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button
-							class="flex !h-10 shrink-0 items-center gap-2"
-							:disabled="invitePending || inviteDisabled"
-							@click="management.invite($event)"
-						>
-							<SpinnerIcon v-if="invitePending" class="animate-spin" aria-hidden="true" />
-							<UserPlusIcon v-else aria-hidden="true" />
-							Invite friends
-						</button>
-					</ButtonStyled>
+					<Button
+						type="outlined"
+						size="lg"
+						class="shrink-0 !border"
+						:disabled="pushUpdateDisabled"
+						@click="management.pushUpdate($event)"
+					>
+						<SpinnerIcon v-if="pushUpdatePending" class="animate-spin" aria-hidden="true" />
+						<UploadIcon v-else aria-hidden="true" />
+						{{ formatMessage(messages.pushUpdate) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						size="lg"
+						class="shrink-0"
+						:disabled="invitePending || inviteDisabled"
+						@click="management.invite($event)"
+					>
+						<SpinnerIcon v-if="invitePending" class="animate-spin" aria-hidden="true" />
+						<UserPlusIcon v-else aria-hidden="true" />
+						Invite friends
+					</Button>
 				</template>
 			</div>
 			<div v-if="hasMultipleMethods" class="flex flex-wrap items-center gap-1.5">
@@ -120,15 +121,15 @@
 			</template>
 			<template #cell-actions="{ row }">
 				<div v-if="!actionsLocked" class="flex items-center justify-end">
-					<ButtonStyled circular type="transparent"
-						><button
-							v-tooltip="'Revoke access'"
-							:aria-label="`Revoke access for ${row.username}`"
-							class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
-							@click="management.remove(row)"
-						>
-							<XIcon aria-hidden="true" /></button
-					></ButtonStyled>
+					<IconButton
+						v-tooltip="'Revoke access'"
+						type="quiet"
+						:label="`Revoke access for ${row.username}`"
+						class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
+						@click="management.remove(row)"
+					>
+						<XIcon aria-hidden="true"
+					/></IconButton>
 				</div>
 			</template>
 		</Table>
@@ -145,10 +146,10 @@ import {
 	UserPlusIcon,
 	XIcon,
 } from '@modrinth/assets'
+import { Button, IconButton } from '@modrinth/ui'
 import {
 	AutoLink,
 	Avatar,
-	ButtonStyled,
 	defineMessages,
 	type SortDirection,
 	StyledInput,
diff --git a/apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue b/apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue
index 1f7983dcdd..96d67be712 100644
--- a/apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue
+++ b/apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue
@@ -32,16 +32,12 @@
 				</ul>
 			</div>
 			<div class="flex justify-end gap-2 pt-1">
-				<ButtonStyled type="outlined"
-					><button class="!border !border-surface-5" @click="modal?.hide()">
-						<XIcon aria-hidden="true" />{{ formatMessage(commonMessages.cancelButton) }}
-					</button></ButtonStyled
-				>
-				<ButtonStyled color="orange"
-					><button :disabled="!row" @click="confirm">
-						<UserXIcon aria-hidden="true" />{{ formatMessage(messages.removeButton) }}
-					</button></ButtonStyled
-				>
+				<Button type="outlined" class="!border !border-surface-5" @click="modal?.hide()">
+					<XIcon aria-hidden="true" />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="orange" :disabled="!row" @click="confirm">
+					<UserXIcon aria-hidden="true" />{{ formatMessage(messages.removeButton) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -52,7 +48,7 @@ import { UserXIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	NewModal,
diff --git a/apps/app-frontend/src/pages/instance/worlds/index.vue b/apps/app-frontend/src/pages/instance/worlds/index.vue
index cc3a228df3..1d9adca70d 100644
--- a/apps/app-frontend/src/pages/instance/worlds/index.vue
+++ b/apps/app-frontend/src/pages/instance/worlds/index.vue
@@ -35,18 +35,14 @@
 					"
 				/>
 				<div class="flex gap-2">
-					<ButtonStyled type="outlined">
-						<button class="!h-10" @click="addServerModal?.show()">
-							<PlusIcon class="size-5" />
-							{{ formatMessage(messages.addServer) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button class="!h-10 flex items-center gap-2" @click="instancePage.browseServers">
-							<CompassIcon class="size-5" />
-							<span>{{ formatMessage(messages.browseServers) }}</span>
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" size="lg" @click="addServerModal?.show()">
+						<PlusIcon class="size-5" />
+						{{ formatMessage(messages.addServer) }}
+					</Button>
+					<Button type="colored" color="brand" size="lg" @click="instancePage.browseServers">
+						<CompassIcon class="size-5" />
+						<span>{{ formatMessage(messages.browseServers) }}</span>
+					</Button>
 				</div>
 			</div>
 			<div class="flex flex-wrap items-center justify-between gap-2">
@@ -67,16 +63,17 @@
 						{{ option.label }}
 					</button>
 				</div>
-				<ButtonStyled type="transparent" hover-color-fill="none">
-					<button :disabled="refreshingAll" @click="refreshAllWorlds">
-						<RefreshCwIcon :class="refreshingAll ? 'animate-spin' : ''" />
-						{{
-							formatMessage(
-								refreshingAll ? messages.refreshingButton : commonMessages.refreshButton,
-							)
-						}}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="quiet"
+					:disabled="refreshingAll"
+					class="hover:!bg-transparent focus-visible:!bg-transparent"
+					@click="refreshAllWorlds"
+				>
+					<RefreshCwIcon :class="refreshingAll ? 'animate-spin' : ''" />
+					{{
+						formatMessage(refreshingAll ? messages.refreshingButton : commonMessages.refreshButton)
+					}}
+				</Button>
 			</div>
 			<div class="flex flex-col w-full gap-2">
 				<WorldItem
@@ -122,26 +119,22 @@
 			:description="formatMessage(messages.noWorldsDescription)"
 		>
 			<template #actions>
-				<ButtonStyled type="outlined">
-					<button class="!h-10" @click="addServerModal?.show()">
-						<PlusIcon class="size-5" />
-						{{ formatMessage(messages.addServer) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button class="!h-10 flex items-center gap-2" @click="instancePage.browseServers">
-						<CompassIcon class="size-5" />
-						<span>{{ formatMessage(messages.browseServers) }}</span>
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" size="lg" @click="addServerModal?.show()">
+					<PlusIcon class="size-5" />
+					{{ formatMessage(messages.addServer) }}
+				</Button>
+				<Button type="colored" color="brand" size="lg" @click="instancePage.browseServers">
+					<CompassIcon class="size-5" />
+					<span>{{ formatMessage(messages.browseServers) }}</span>
+				</Button>
 			</template>
 		</EmptyState>
 	</ReadyTransition>
 </template>
 <script setup lang="ts">
 import { CompassIcon, FilterIcon, PlusIcon, RefreshCwIcon, SearchIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	EmptyState,
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index a8510edcd4..9cce03ec22 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LibraryIcon, PlusIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, NavTabs } from '@modrinth/ui'
+import { Button, injectNotificationManager, NavTabs } from '@modrinth/ui'
 import { inject, onUnmounted, ref, shallowRef } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -53,12 +53,10 @@ onUnmounted(() => {
 					{ label: 'Saved', href: `/library/saved`, shown: false },
 				]"
 			/>
-			<ButtonStyled color="brand">
-				<button :disabled="offline" @click="showCreationModal?.()">
-					<PlusIcon />
-					New instance
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" :disabled="offline" @click="showCreationModal?.()">
+				<PlusIcon />
+				New instance
+			</Button>
 		</div>
 		<template v-if="instances && instances.length > 0">
 			<RouterView v-if="route.path.startsWith('/library')" :instances="instances" />
@@ -68,12 +66,10 @@ onUnmounted(() => {
 				<NewInstanceImage />
 			</div>
 			<h3>No instances found</h3>
-			<ButtonStyled color="brand">
-				<button :disabled="offline" @click="showCreationModal?.()">
-					<PlusIcon />
-					Create new instance
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" :disabled="offline" @click="showCreationModal?.()">
+				<PlusIcon />
+				Create new instance
+			</Button>
 		</div>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/project/Gallery.vue b/apps/app-frontend/src/pages/project/Gallery.vue
index 05a771f927..14800122b9 100644
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -39,40 +39,40 @@
 				</div>
 				<div class="controls">
 					<div class="buttons">
-						<ButtonStyled circular>
-							<button class="close" @click="hideImage">
-								<XIcon aria-hidden="true" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<a
-								class="open btn icon-only"
-								target="_blank"
-								:href="
-									expandedGalleryItem.raw_url
-										? expandedGalleryItem.raw_url
-										: 'https://cdn.modrinth.com/placeholder-banner.svg'
-								"
-							>
-								<ExternalIcon aria-hidden="true" />
-							</a>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<button @click="zoomedIn = !zoomedIn">
-								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-								<ContractIcon v-else aria-hidden="true" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="filteredGallery.length > 1" circular>
-							<button class="previous" @click="previousImage()">
-								<LeftArrowIcon aria-hidden="true" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="filteredGallery.length > 1" circular>
-							<button class="next" @click="nextImage()">
-								<RightArrowIcon aria-hidden="true" />
-							</button>
-						</ButtonStyled>
+						<IconButton label="Close" class="close" @click="hideImage">
+							<XIcon aria-hidden="true" />
+						</IconButton>
+						<ButtonLink
+							class="open btn icon-only !w-9 !px-0 !rounded-full"
+							target="_blank"
+							:href="
+								expandedGalleryItem.raw_url
+									? expandedGalleryItem.raw_url
+									: 'https://cdn.modrinth.com/placeholder-banner.svg'
+							"
+						>
+							<ExternalIcon aria-hidden="true" />
+						</ButtonLink>
+						<IconButton label="Toggle zoom" @click="zoomedIn = !zoomedIn">
+							<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+							<ContractIcon v-else aria-hidden="true" />
+						</IconButton>
+						<IconButton
+							v-if="filteredGallery.length > 1"
+							label="Previous image"
+							class="previous"
+							@click="previousImage()"
+						>
+							<LeftArrowIcon aria-hidden="true" />
+						</IconButton>
+						<IconButton
+							v-if="filteredGallery.length > 1"
+							label="Next image"
+							class="next"
+							@click="nextImage()"
+						>
+							<RightArrowIcon aria-hidden="true" />
+						</IconButton>
 					</div>
 				</div>
 			</div>
@@ -90,7 +90,7 @@ import {
 	RightArrowIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Card, useFormatDateTime } from '@modrinth/ui'
+import { ButtonLink, Card, IconButton, useFormatDateTime } from '@modrinth/ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 2d3ee48c3a..af7eb37055 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -70,87 +70,104 @@
 				>
 					<template #actions>
 						<template v-if="isServerProject">
-							<ButtonStyled v-if="serverPlaying" color="red" size="large">
-								<button type="button" @click="handleStopServer">
-									<StopCircleIcon />
-									{{ formatMessage(commonMessages.stopButton) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-else color="brand" size="large">
-								<button type="button" :disabled="serverInstallLoading" @click="handleClickPlay">
-									<PlayIcon />
-									{{
-										serverInstallLoading
-											? formatMessage(commonMessages.installingLabel)
-											: formatMessage(commonMessages.playButton)
-									}}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled circular size="large">
-								<button
-									v-tooltip="formatMessage(commonMessages.addServerToInstanceButton)"
-									type="button"
-									:aria-label="formatMessage(commonMessages.addServerToInstanceButton)"
-									@click="handleAddServerToInstance"
-								>
-									<PlusIcon />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled circular size="large" type="transparent">
-								<TeleportOverflowMenu
-									:options="serverProjectHeaderMoreActions"
-									tooltip="More options"
-									aria-label="More options"
-								>
-									<MoreVerticalIcon />
-								</TeleportOverflowMenu>
-							</ButtonStyled>
+							<Button
+								v-if="serverPlaying"
+								type="colored"
+								color="red"
+								size="xl"
+								native-type="button"
+								@click="handleStopServer"
+							>
+								<StopCircleIcon />
+								{{ formatMessage(commonMessages.stopButton) }}
+							</Button>
+							<Button
+								v-else
+								type="colored"
+								color="brand"
+								size="xl"
+								native-type="button"
+								:disabled="serverInstallLoading"
+								@click="handleClickPlay"
+							>
+								<PlayIcon />
+								{{
+									serverInstallLoading
+										? formatMessage(commonMessages.installingLabel)
+										: formatMessage(commonMessages.playButton)
+								}}
+							</Button>
+							<IconButton
+								v-tooltip="formatMessage(commonMessages.addServerToInstanceButton)"
+								size="xl"
+								:label="formatMessage(commonMessages.addServerToInstanceButton)"
+								native-type="button"
+								@click="handleAddServerToInstance"
+							>
+								<PlusIcon />
+							</IconButton>
+							<TeleportOverflowMenu
+								type="quiet"
+								size="xl"
+								label="More options"
+								:options="serverProjectHeaderMoreActions"
+							>
+								<MoreVerticalIcon />
+							</TeleportOverflowMenu>
 						</template>
 						<template v-else>
-							<ButtonStyled v-if="showSwitchVersion && onVersionsPage" size="large">
-								<button v-tooltip="formatMessage(messages.alreadyInstalled)" type="button" disabled>
-									<CheckIcon />
-									{{ formatMessage(commonMessages.installedLabel) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-else-if="showSwitchVersion" size="large">
-								<button type="button" @click="goToVersions">
-									<SwapIcon />
-									{{ formatMessage(messages.switchVersion) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-else color="brand" size="large">
-								<button
-									v-tooltip="
-										installButtonInstalled ? formatMessage(messages.alreadyInstalled) : undefined
-									"
-									type="button"
-									:disabled="installButtonDisabled"
-									@click="install(null)"
-								>
-									<component :is="installButtonIcon" :class="installButtonIconClass" />
-									{{
-										installButtonInstalled
-											? formatMessage(commonMessages.installedLabel)
-											: installButtonValidating
-												? formatMessage(commonMessages.validatingLabel)
-												: installButtonLoading
-													? formatMessage(commonMessages.installingLabel)
-													: serverProjectSelected
-														? formatMessage(commonMessages.selectedLabel)
-														: formatMessage(commonMessages.installButton)
-									}}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled circular size="large" type="transparent">
-								<TeleportOverflowMenu
-									:options="projectHeaderMoreActions"
-									tooltip="More options"
-									aria-label="More options"
-								>
-									<MoreVerticalIcon />
-								</TeleportOverflowMenu>
-							</ButtonStyled>
+							<Button
+								v-if="showSwitchVersion && onVersionsPage"
+								v-tooltip="formatMessage(messages.alreadyInstalled)"
+								size="xl"
+								native-type="button"
+								disabled
+							>
+								<CheckIcon />
+								{{ formatMessage(commonMessages.installedLabel) }}
+							</Button>
+							<Button
+								v-else-if="showSwitchVersion"
+								size="xl"
+								native-type="button"
+								@click="goToVersions"
+							>
+								<SwapIcon />
+								{{ formatMessage(messages.switchVersion) }}
+							</Button>
+							<Button
+								v-else
+								v-tooltip="
+									installButtonInstalled ? formatMessage(messages.alreadyInstalled) : undefined
+								"
+								type="colored"
+								color="brand"
+								size="xl"
+								native-type="button"
+								:disabled="installButtonDisabled"
+								@click="install(null)"
+							>
+								<component :is="installButtonIcon" :class="installButtonIconClass" />
+								{{
+									installButtonInstalled
+										? formatMessage(commonMessages.installedLabel)
+										: installButtonValidating
+											? formatMessage(commonMessages.validatingLabel)
+											: installButtonLoading
+												? formatMessage(commonMessages.installingLabel)
+												: serverProjectSelected
+													? formatMessage(commonMessages.selectedLabel)
+													: formatMessage(commonMessages.installButton)
+								}}
+							</Button>
+							<TeleportOverflowMenu
+								type="quiet"
+								size="xl"
+								label="More options"
+								:options="projectHeaderMoreActions"
+							>
+								<MoreVerticalIcon />
+							</TeleportOverflowMenu>
 						</template>
 					</template>
 				</ProjectPageHeader>
@@ -241,11 +258,12 @@ import {
 } from '@modrinth/assets'
 import {
 	BrowseInstallHeader,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
 	getTargetInstallPreferences,
+	IconButton,
 	injectNotificationManager,
 	NavTabs,
 	ProjectBackgroundGradient,
@@ -571,13 +589,13 @@ const serverProjectHeaderMoreActions = computed(() => [
 		action: openProjectInBrowser,
 	},
 	{
-		divider: true,
+		type: 'divider',
 	},
 	{
 		id: 'report',
 		label: formatMessage(commonMessages.reportButton),
 		icon: ReportIcon,
-		color: 'red',
+		tone: 'red',
 		action: reportProject,
 	},
 ])
@@ -605,13 +623,13 @@ const projectHeaderMoreActions = computed(() => [
 		action: openProjectInBrowser,
 	},
 	{
-		divider: true,
+		type: 'divider',
 	},
 	{
 		id: 'report',
 		label: formatMessage(commonMessages.reportButton),
 		icon: ReportIcon,
-		color: 'red',
+		tone: 'red',
 		action: reportProject,
 	},
 ])
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index 85a368440b..3d3bd2a2cd 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -15,62 +15,62 @@
 			:dependency-link-creator="createDependencyLink"
 		>
 			<template #headerActions>
-				<ButtonStyled color="brand">
-					<button
-						:disabled="installing || (installed && installedVersion === version.id)"
-						@click="() => version && install(version.id)"
-					>
-						<DownloadIcon v-if="!installed" />
-						<SwapIcon v-else-if="installedVersion !== version.id" />
-						<CheckIcon v-else />
-						{{
-							installing
-								? formatMessage(messages.installing)
-								: installed && installedVersion === version.id
-									? formatMessage(commonMessages.installedLabel)
-									: installed
-										? formatMessage(commonMessages.switchToVersionButton)
-										: formatMessage(commonMessages.installButton)
-						}}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled type="outlined" circular>
-					<OverflowMenu
-						v-tooltip="formatMessage(commonMessages.moreOptionsButton)"
-						:options="[
-							{
-								id: 'open-in-browser',
-								link: `https://modrinth.com/${project.project_type}/${project.slug}/version/${version.id}`,
-								external: true,
-							},
-							{
-								id: 'report',
-								color: 'red',
-								hoverFilled: true,
-								link: `https://modrinth.com/report?item=version&itemID=${version.id}`,
-								external: true,
-							},
-						]"
-						aria-label="More options"
-					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #open-in-browser>
-							<ExternalIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.openInBrowserButton) }}
-						</template>
-						<template #report>
-							<ReportIcon aria-hidden="true" /> {{ formatMessage(commonMessages.reportButton) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="installing || (installed && installedVersion === version.id)"
+					@click="() => version && install(version.id)"
+				>
+					<DownloadIcon v-if="!installed" />
+					<SwapIcon v-else-if="installedVersion !== version.id" />
+					<CheckIcon v-else />
+					{{
+						installing
+							? formatMessage(messages.installing)
+							: installed && installedVersion === version.id
+								? formatMessage(commonMessages.installedLabel)
+								: installed
+									? formatMessage(commonMessages.switchToVersionButton)
+									: formatMessage(commonMessages.installButton)
+					}}
+				</Button>
+				<TeleportOverflowMenu
+					type="outlined"
+					label="More options"
+					:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+					:options="[
+						{
+							id: 'open-in-browser',
+							label: formatMessage(commonMessages.openInBrowserButton),
+							type: 'link',
+							href: `https://modrinth.com/${project.project_type}/${project.slug}/version/${version.id}`,
+							target: '_blank',
+						},
+						{
+							id: 'report',
+							label: formatMessage(commonMessages.reportButton),
+							type: 'link',
+							tone: 'red',
+							href: `https://modrinth.com/report?item=version&itemID=${version.id}`,
+							target: '_blank',
+						},
+					]"
+				>
+					<MoreVerticalIcon aria-hidden="true" />
+					<template #open-in-browser>
+						<ExternalIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.openInBrowserButton) }}
+					</template>
+					<template #report>
+						<ReportIcon aria-hidden="true" /> {{ formatMessage(commonMessages.reportButton) }}
+					</template>
+				</TeleportOverflowMenu>
 			</template>
 			<template #supplementaryResourceActions="{ file }">
-				<ButtonStyled>
-					<a :href="file.url" :download="file.filename" target="_blank">
-						<DownloadIcon aria-hidden="true" />
-						{{ formatMessage(messages.downloadInBrowser) }}
-					</a>
-				</ButtonStyled>
+				<ButtonLink :href="file.url" :download="file.filename" target="_blank">
+					<DownloadIcon aria-hidden="true" />
+					{{ formatMessage(messages.downloadInBrowser) }}
+				</ButtonLink>
 			</template>
 		</VersionPage>
 	</div>
@@ -87,12 +87,11 @@ import {
 	ReportIcon,
 	VersionIcon,
 } from '@modrinth/assets'
+import { Button, ButtonLink, TeleportOverflowMenu } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	type DependencyContext,
-	OverflowMenu,
 	useVIntl,
 	VersionPage,
 } from '@modrinth/ui'
diff --git a/apps/app-frontend/src/pages/project/Versions.vue b/apps/app-frontend/src/pages/project/Versions.vue
index 7d7438cf12..d723a634b8 100644
--- a/apps/app-frontend/src/pages/project/Versions.vue
+++ b/apps/app-frontend/src/pages/project/Versions.vue
@@ -9,76 +9,53 @@
 			:version-link="(version) => buildProjectHref(`/project/${project.id}/version/${version.id}`)"
 		>
 			<template #actions="{ version }">
-				<ButtonStyled
-					circular
-					type="transparent"
-					:color="installed && version.id === installedVersion ? 'standard' : 'green'"
+				<IconButton
+					v-tooltip="
+						!installed
+							? formatMessage(commonMessages.installButton)
+							: version.id !== installedVersion
+								? formatMessage(commonMessages.switchToVersionButton)
+								: formatMessage(messages.alreadyInstalled)
+					"
+					type="quiet"
+					:color="installed && version.id === installedVersion ? undefined : 'green'"
+					:label="
+						!installed
+							? formatMessage(commonMessages.installButton)
+							: version.id !== installedVersion
+								? formatMessage(commonMessages.switchToVersionButton)
+								: formatMessage(messages.alreadyInstalled)
+					"
+					:disabled="installing || (installed && version.id === installedVersion)"
+					@click.stop="() => install(version.id)"
 				>
-					<button
-						v-tooltip="
-							!installed
-								? formatMessage(commonMessages.installButton)
-								: version.id !== installedVersion
-									? formatMessage(commonMessages.switchToVersionButton)
-									: formatMessage(messages.alreadyInstalled)
-						"
-						:disabled="installing || (installed && version.id === installedVersion)"
-						@click.stop="() => install(version.id)"
-					>
-						<DownloadIcon v-if="!installed" />
-						<SwapIcon v-else-if="installed && version.id !== installedVersion" />
-						<CheckIcon v-else />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
-						v-if="false"
-						:options="[
-							{
-								id: 'install-elsewhere',
-								action: () => {},
-								shown: false && !!instance,
-								color: 'primary',
-								hoverFilled: true,
-							},
-							{
-								id: 'open-in-browser',
-								link: `https://modrinth.com/${project.project_type}/${project.slug}/version/${version.id}`,
-							},
-						]"
-						aria-label="More options"
-					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #install-elsewhere>
-							<DownloadIcon aria-hidden="true" />
-							Add to another instance
-						</template>
-						<template #open-in-browser>
-							<ExternalIcon /> {{ formatMessage(commonMessages.openInBrowserButton) }}
-						</template>
-					</OverflowMenu>
-					<a
-						v-else
-						v-tooltip="formatMessage(commonMessages.openInBrowserButton)"
-						:href="`https://modrinth.com/${project.project_type}/${project.slug}/version/${version.id}`"
-						target="_blank"
-					>
-						<ExternalIcon />
-					</a>
-				</ButtonStyled>
+					<DownloadIcon v-if="!installed" />
+					<SwapIcon v-else-if="installed && version.id !== installedVersion" />
+					<CheckIcon v-else />
+				</IconButton>
+				<ButtonLink
+					v-tooltip="formatMessage(commonMessages.openInBrowserButton)"
+					type="quiet"
+					:href="`https://modrinth.com/${project.project_type}/${project.slug}/version/${version.id}`"
+					target="_blank"
+					:aria-label="formatMessage(commonMessages.openInBrowserButton)"
+					class="!w-9 !px-0 !rounded-full"
+				>
+					<ExternalIcon />
+				</ButtonLink>
 			</template>
 		</ProjectPageVersions>
 	</div>
 </template>
 
 <script setup>
-import { CheckIcon, DownloadIcon, ExternalIcon, MoreVerticalIcon } from '@modrinth/assets'
+import { CheckIcon, DownloadIcon, ExternalIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	ButtonLink,
 	commonMessages,
 	defineMessages,
+	IconButton,
 	injectNotificationManager,
-	OverflowMenu,
 	ProjectPageVersions,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
index 4458f7c307..87434d1b98 100644
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -93,7 +93,7 @@
 		}
 	}
 
-	:where(button, .button, .iconified-button) {
+	:where(button:not([data-button]), .button, .iconified-button) {
 		width: fit-content;
 	}
 
diff --git a/apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartRenderLimitModal.vue b/apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartRenderLimitModal.vue
index 9da495ce24..06147218c1 100644
--- a/apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartRenderLimitModal.vue
+++ b/apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartRenderLimitModal.vue
@@ -12,23 +12,19 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="transparent">
-					<button @click="modal?.hide()">
-						{{ formatMessage(analyticsChartMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button class="!shadow-none" @click="confirm">
-						{{ formatMessage(analyticsChartMessages.showAll) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" @click="modal?.hide()">
+					{{ formatMessage(analyticsChartMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="orange" @click="confirm">
+					{{ formatMessage(analyticsChartMessages.showAll) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled, NewModal, useVIntl } from '@modrinth/ui'
+import { Button, NewModal, useVIntl } from '@modrinth/ui'
 
 import { analyticsChartMessages } from '../../analytics-messages'
 
diff --git a/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue b/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
index 2b625b3a9b..fd26b3c292 100644
--- a/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
+++ b/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
@@ -31,23 +31,22 @@
 							wrapper-class="w-full sm:w-64"
 							@focusin="selectSearchInputText"
 						/>
-						<ButtonStyled>
-							<OverflowMenu
-								class="!shadow-none"
-								:options="csvExportOptions"
-								:disabled="isDataLoading || filteredRows.length === 0"
-							>
-								<DownloadIcon />
-								{{ formatMessage(analyticsTableMessages.exportCsvButton) }}
-								<DropdownIcon />
-								<template #cumulative-csv>
-									{{ formatMessage(analyticsTableMessages.cumulativeCsv) }}
-								</template>
-								<template #grouped-csv>
-									{{ formatMessage(analyticsTableMessages.groupedCsv, { groupBy: groupByLabel }) }}
-								</template>
-							</OverflowMenu>
-						</ButtonStyled>
+						<TeleportOverflowMenu
+							label="More options"
+							class="!w-auto !rounded-xl !px-2.5"
+							:options="csvExportOptions"
+							:disabled="isDataLoading || filteredRows.length === 0"
+						>
+							<DownloadIcon />
+							{{ formatMessage(analyticsTableMessages.exportCsvButton) }}
+							<DropdownIcon />
+							<template #cumulative-csv>
+								{{ formatMessage(analyticsTableMessages.cumulativeCsv) }}
+							</template>
+							<template #grouped-csv>
+								{{ formatMessage(analyticsTableMessages.groupedCsv, { groupBy: groupByLabel }) }}
+							</template>
+						</TeleportOverflowMenu>
 					</div>
 				</div>
 			</template>
@@ -191,9 +190,8 @@
 
 <script setup lang="ts">
 import { DownloadIcon, DropdownIcon, SearchIcon, UserIcon } from '@modrinth/assets'
+import { TeleportOverflowMenu } from '@modrinth/ui'
 import {
-	ButtonStyled,
-	OverflowMenu,
 	type OverflowMenuOption,
 	Pagination,
 	StyledInput,
@@ -370,10 +368,12 @@ const csvExportOptions = computed<OverflowMenuOption[]>(() => {
 		return [
 			{
 				id: 'cumulative-csv',
+				label: formatMessage(analyticsTableMessages.cumulativeCsv),
 				action: () => downloadCsv('breakdown_only'),
 			},
 			{
 				id: 'grouped-csv',
+				label: formatMessage(analyticsTableMessages.groupedCsv, { groupBy: groupByLabel.value }),
 				action: () => downloadCsv('date_breakdown'),
 			},
 		]
@@ -384,6 +384,10 @@ const csvExportOptions = computed<OverflowMenuOption[]>(() => {
 	return [
 		{
 			id: mode === 'date_breakdown' ? 'grouped-csv' : 'cumulative-csv',
+			label:
+				mode === 'date_breakdown'
+					? formatMessage(analyticsTableMessages.groupedCsv, { groupBy: groupByLabel.value })
+					: formatMessage(analyticsTableMessages.cumulativeCsv),
 			action: () => downloadCsv(mode),
 		},
 	]
diff --git a/apps/frontend/src/components/analytics-dashboard/index.vue b/apps/frontend/src/components/analytics-dashboard/index.vue
index 6dea6eab4a..0d00c95b35 100644
--- a/apps/frontend/src/components/analytics-dashboard/index.vue
+++ b/apps/frontend/src/components/analytics-dashboard/index.vue
@@ -6,25 +6,23 @@
 					{{ formatMessage(analyticsMessages.title) }}
 				</span>
 				<div class="flex flex-wrap items-center justify-end gap-2">
-					<ButtonStyled type="transparent">
-						<button
-							type="button"
-							:disabled="isAnalyticsQueryBuilderDefault"
-							@click="resetAnalyticsQueryBuilder"
-						>
-							{{ formatMessage(analyticsMessages.resetButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled type="outlined">
-						<button
-							type="button"
-							:disabled="projects.length === 0 || !fetchRequest || isRefetching"
-							@click="refreshAnalyticsQuery"
-						>
-							<RefreshCwIcon :class="isRefetching ? 'animate-spin' : ''" />
-							{{ formatMessage(analyticsMessages.refreshButton) }}
-						</button>
-					</ButtonStyled>
+					<Button
+						type="quiet"
+						native-type="button"
+						:disabled="isAnalyticsQueryBuilderDefault"
+						@click="resetAnalyticsQueryBuilder"
+					>
+						{{ formatMessage(analyticsMessages.resetButton) }}
+					</Button>
+					<Button
+						type="outlined"
+						native-type="button"
+						:disabled="projects.length === 0 || !fetchRequest || isRefetching"
+						@click="refreshAnalyticsQuery"
+					>
+						<RefreshCwIcon :class="isRefetching ? 'animate-spin' : ''" />
+						{{ formatMessage(analyticsMessages.refreshButton) }}
+					</Button>
 				</div>
 			</div>
 			<QueryBuilder />
@@ -37,7 +35,7 @@
 
 <script setup lang="ts">
 import { RefreshCwIcon } from '@modrinth/assets'
-import { ButtonStyled, injectProjectPageContext, useVIntl } from '@modrinth/ui'
+import { Button, injectProjectPageContext, useVIntl } from '@modrinth/ui'
 
 import {
 	createAnalyticsDashboardContext,
diff --git a/apps/frontend/src/components/analytics-dashboard/query-builder/QueryFilter.vue b/apps/frontend/src/components/analytics-dashboard/query-builder/QueryFilter.vue
index 464fc9c0c0..77c48f4daa 100644
--- a/apps/frontend/src/components/analytics-dashboard/query-builder/QueryFilter.vue
+++ b/apps/frontend/src/components/analytics-dashboard/query-builder/QueryFilter.vue
@@ -7,6 +7,7 @@
 		:show-preview-filter-icon="showPreviewFilterIcon"
 		:preview-trigger-class="previewTriggerClass"
 		:add-button-class="addButtonClass"
+		:add-button-size="addButtonSize"
 		:clear-label="formatMessage(analyticsMessages.resetButton)"
 		:add-label="resolvedAddLabel"
 		checkbox-position="right"
@@ -199,6 +200,7 @@
 import { BoxIcon, UserIcon } from '@modrinth/assets'
 import {
 	buildDependentsSearchFilters,
+	type ButtonSize,
 	DropdownFilterBar,
 	type DropdownFilterBarCategory,
 	type DropdownFilterBarOption,
@@ -273,6 +275,7 @@ const props = withDefaults(
 		showPreviewFilterIcon?: boolean
 		previewTriggerClass?: string
 		addButtonClass?: string
+		addButtonSize?: ButtonSize
 		showClearAction?: boolean
 	}>(),
 	{
diff --git a/apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue b/apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue
index 11cc668208..06a0f25464 100644
--- a/apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue
+++ b/apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue
@@ -9,6 +9,9 @@
 		:min-date="ANALYTICS_START_DATE_INPUT_VALUE"
 		:now-timestamp="queryRefreshTimestamp"
 		:trigger-class="triggerClass"
+		:trigger-type="triggerType"
+		:trigger-size="triggerSize"
+		:trigger-interaction="triggerInteraction"
 		@open="handleTimeframeOpen"
 		@commit="handleTimeframeCommit"
 		@apply="handleTimeframeApply"
@@ -23,6 +26,9 @@
 
 <script setup lang="ts">
 import {
+	type ButtonInteraction,
+	type ButtonSize,
+	type ButtonType,
 	type ComboboxOption,
 	TimeFramePicker as BaseTimeFramePicker,
 	type TimeFramePickerSelection,
@@ -58,6 +64,9 @@ const {
 
 defineProps<{
 	triggerClass?: string
+	triggerType?: ButtonType
+	triggerSize?: ButtonSize
+	triggerInteraction?: ButtonInteraction
 }>()
 
 const draftSelectedGroupBy = ref(selectedGroupBy.value)
diff --git a/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue b/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
index 1d43dbd9fb..d32a31d26e 100644
--- a/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
+++ b/apps/frontend/src/components/analytics-dashboard/query-builder/index.vue
@@ -16,6 +16,7 @@
 				:max-tag-rows="1"
 				:trigger-class="analyticsQueryChipTriggerClass"
 				fit-content
+				trigger-type="base"
 				checkbox-position="right"
 				show-selection-actions
 				@open="handleProjectSelectOpen"
@@ -32,7 +33,7 @@
 							decoding="async"
 						/>
 						<LayersIcon v-else class="size-5 shrink-0 text-primary" />
-						<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-primary">
+						<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-inherit">
 							{{ selectedProjectLabel }}
 						</span>
 						<ChevronLeftIcon
@@ -145,6 +146,7 @@
 				:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
 				:display-value="selectedGroupByLabel"
 				:trigger-class="analyticsQueryChipTriggerClass"
+				trigger-type="base"
 			>
 				<template #prefix>
 					<ClockIcon class="size-5 shrink-0 text-primary" />
@@ -160,6 +162,7 @@
 				:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
 				:trigger-class="analyticsQueryChipTriggerClass"
 				fit-content
+				trigger-type="base"
 				checkbox-position="right"
 				:placeholder="formatMessage(analyticsMessages.none)"
 				show-selection-actions
@@ -170,7 +173,7 @@
 					<div class="flex min-h-7 min-w-0 max-w-full flex-1 items-center gap-1.5 pr-1">
 						<BlocksIcon class="size-5 shrink-0 text-primary" />
 						<span
-							class="min-w-0 flex-1 truncate px-0.5 font-semibold text-primary"
+							class="min-w-0 flex-1 truncate px-0.5 font-semibold text-inherit"
 							:title="mobileSelectedBreakdownLabel"
 						>
 							{{ mobileSelectedBreakdownLabel }}
@@ -191,6 +194,7 @@
 				show-preview-filter-icon
 				:show-clear-action="false"
 				:add-button-class="analyticsQueryAddFilterButtonClass"
+				add-button-size="lg"
 			/>
 		</div>
 
@@ -214,6 +218,7 @@
 						:searchable="projectOptions.length > 6"
 						fuzzy-search
 						:max-tag-rows="1"
+						trigger-type="base"
 						checkbox-position="right"
 						show-selection-actions
 						@open="handleProjectSelectOpen"
@@ -243,7 +248,7 @@
 										class="size-5 shrink-0 text-primary"
 									/>
 									<BoxIcon v-else class="size-5 shrink-0 text-primary" />
-									<span class="min-w-0 flex-1 truncate px-1.5 font-semibold text-primary">
+									<span class="min-w-0 flex-1 truncate px-1.5 font-semibold text-inherit">
 										{{ selectedProjectLabel }}
 									</span>
 								</div>
@@ -372,18 +377,19 @@
 							:options="groupByOptions"
 							:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
 							:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
+							trigger-type="base"
 						/>
 					</div>
 				</div>
-				<ButtonStyled v-if="!isTimeframeAndGroupByDefault" type="transparent">
-					<button
-						type="button"
-						:disabled="isTimeframeAndGroupByDefault"
-						@click="resetTimeframeAndGroupBy"
-					>
-						{{ formatMessage(analyticsMessages.resetButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="!isTimeframeAndGroupByDefault"
+					type="quiet"
+					native-type="button"
+					:disabled="isTimeframeAndGroupByDefault"
+					@click="resetTimeframeAndGroupBy"
+				>
+					{{ formatMessage(analyticsMessages.resetButton) }}
+				</Button>
 			</div>
 
 			<div class="flex flex-wrap items-start gap-2">
@@ -403,6 +409,7 @@
 									:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
 									:dropdown-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
 									:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
+									trigger-type="base"
 									checkbox-position="right"
 									:placeholder="formatMessage(analyticsMessages.none)"
 									show-selection-actions
@@ -412,7 +419,7 @@
 									<template #input-content="{ isOpen, openDirection }">
 										<div class="flex min-h-7 min-w-0 flex-1 items-center gap-1.5 pr-1">
 											<span
-												class="min-w-0 flex-1 truncate font-semibold text-primary"
+												class="min-w-0 flex-1 truncate font-semibold text-inherit"
 												:title="selectedBreakdownLabel"
 											>
 												{{ selectedBreakdownLabel }}
@@ -453,8 +460,8 @@ import {
 	LayersIcon,
 	UserIcon,
 } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	Combobox,
 	type ComboboxOption,
 	MultiSelect,
@@ -504,7 +511,7 @@ import TimeFramePicker from './TimeframePicker.vue'
 const QUERY_BUILDER_DROPDOWN_MAX_HEIGHT = 500
 const QUERY_BUILDER_DROPDOWN_MIN_WIDTH = '14rem'
 const analyticsQueryChipTriggerClass = 'h-10 '
-const analyticsQueryAddFilterButtonClass = '!h-10 max-w-full !w-max !px-3.5 flex !gap-2'
+const analyticsQueryAddFilterButtonClass = 'max-w-full !w-max !px-3.5 flex !gap-2'
 const projectOptionCollator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' })
 type ProjectSelectionPreset = 'user' | 'all'
 
diff --git a/apps/frontend/src/components/analytics-dashboard/stat-cards/StatCards.vue b/apps/frontend/src/components/analytics-dashboard/stat-cards/StatCards.vue
index 601dfaf89e..324eeaa6aa 100644
--- a/apps/frontend/src/components/analytics-dashboard/stat-cards/StatCards.vue
+++ b/apps/frontend/src/components/analytics-dashboard/stat-cards/StatCards.vue
@@ -12,12 +12,16 @@
 				{{ formatMessage(analyticsStatCardMessages.monetizationBannerBody) }}
 			</div>
 			<template #actions>
-				<ButtonStyled color="blue">
-					<a href="https://modrinth.com/legal/cmp-info" target="_blank" class="w-fit !px-4">
-						{{ formatMessage(analyticsStatCardMessages.monetizationBannerLearnMore) }}
-						<RightArrowIcon aria-hidden="true" />
-					</a>
-				</ButtonStyled>
+				<ButtonLink
+					type="colored"
+					color="blue"
+					href="https://modrinth.com/legal/cmp-info"
+					target="_blank"
+					class="w-fit !px-4"
+				>
+					{{ formatMessage(analyticsStatCardMessages.monetizationBannerLearnMore) }}
+					<RightArrowIcon aria-hidden="true" />
+				</ButtonLink>
 			</template>
 		</Admonition>
 		<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
@@ -39,7 +43,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, useFormatNumber, useVIntl } from '@modrinth/ui'
+import { Admonition, ButtonLink, useFormatNumber, useVIntl } from '@modrinth/ui'
 import { useLocalStorage } from '@vueuse/core'
 
 import {
diff --git a/apps/frontend/src/components/ui/Accordion.vue b/apps/frontend/src/components/ui/Accordion.vue
index f255fb485a..b627e18169 100644
--- a/apps/frontend/src/components/ui/Accordion.vue
+++ b/apps/frontend/src/components/ui/Accordion.vue
@@ -1,13 +1,24 @@
 <template>
 	<div>
-		<ButtonStyled v-if="!!slots.title" :type="type">
-			<button class="!w-full" @click="() => (isOpen ? close() : open())">
-				<slot name="title" /><DropdownIcon
-					class="ml-auto size-5 text-contrast transition-transform duration-300"
-					:class="{ 'rotate-180': isOpen }"
-				/>
-			</button>
-		</ButtonStyled>
+		<Button
+			v-if="!!slots.title"
+			:type="
+				type === 'transparent'
+					? 'quiet'
+					: type === 'standard'
+						? 'base'
+						: type === 'highlight' || type === 'highlight-colored-text' || type === 'chip'
+							? 'base'
+							: type
+			"
+			class="!w-full"
+			@click="() => (isOpen ? close() : open())"
+		>
+			<slot name="title" /><DropdownIcon
+				class="ml-auto size-5 text-contrast transition-transform duration-300"
+				:class="{ 'rotate-180': isOpen }"
+			/>
+		</Button>
 		<div class="accordion-content" :class="{ open: isOpen }">
 			<div>
 				<div :class="{ 'mt-2': !!slots.title }" v-bind="$attrs" :inert="!isOpen">
@@ -20,7 +31,7 @@
 
 <script setup lang="ts">
 import { DropdownIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 
 const props = withDefaults(
 	defineProps<{
diff --git a/apps/frontend/src/components/ui/AuthorizationCard.vue b/apps/frontend/src/components/ui/AuthorizationCard.vue
index 58eee3d8cb..37507e272b 100644
--- a/apps/frontend/src/components/ui/AuthorizationCard.vue
+++ b/apps/frontend/src/components/ui/AuthorizationCard.vue
@@ -40,12 +40,10 @@
 					</div>
 				</div>
 				<div>
-					<ButtonStyled color="red">
-						<button @click="emit('revoke', authorization.app_id)">
-							<XCircleIcon />
-							{{ formatMessage(messages.revokeAction) }}
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="red" @click="emit('revoke', authorization.app_id)">
+						<XCircleIcon />
+						{{ formatMessage(messages.revokeAction) }}
+					</Button>
 				</div>
 			</div>
 			<div v-if="showUnofficialDisclosure" class="flex items-center gap-1 text-orange">
@@ -82,7 +80,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { BadgeCheckIcon, CheckIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
diff --git a/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue b/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
index e4f62b43f0..606be33b05 100644
--- a/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
+++ b/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
@@ -57,18 +57,14 @@
 		</div>
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<button @click="hide">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="!isConfirmEnabled" @click="onConfirmClick">
-						<TransferIcon />
-						Transfer ownership
-					</button>
-				</ButtonStyled>
+				<Button @click="hide">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button type="colored" color="red" :disabled="!isConfirmEnabled" @click="onConfirmClick">
+					<TransferIcon />
+					Transfer ownership
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -76,7 +72,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { Admonition, Avatar, Button, NewModal, StyledInput } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue b/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
index d47a619fa0..47806997c1 100644
--- a/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
+++ b/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
@@ -64,18 +64,14 @@
 		</div>
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<button @click="hide">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="!isConfirmEnabled" @click="onConfirmClick">
-						<TransferIcon />
-						Transfer ownership
-					</button>
-				</ButtonStyled>
+				<Button @click="hide">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button type="colored" color="red" :disabled="!isConfirmEnabled" @click="onConfirmClick">
+					<TransferIcon />
+					Transfer ownership
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -83,7 +79,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { Admonition, Avatar, Button, NewModal, StyledInput } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/frontend/src/components/ui/ModrinthFooter.vue b/apps/frontend/src/components/ui/ModrinthFooter.vue
index af071d7fc7..4c47ca7742 100644
--- a/apps/frontend/src/components/ui/ModrinthFooter.vue
+++ b/apps/frontend/src/components/ui/ModrinthFooter.vue
@@ -7,9 +7,9 @@ import {
 	ToggleRightIcon,
 	TwitterIcon,
 } from '@modrinth/assets'
+import { ButtonLink } from '@modrinth/ui'
 import {
 	AutoLink,
-	ButtonStyled,
 	defineMessage,
 	defineMessages,
 	injectNotificationManager,
@@ -271,31 +271,30 @@ function developerModeIncrement() {
 							class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
 							@click="developerModeIncrement()"
 						/>
-						<ButtonStyled v-if="flags.developerMode" circular type="transparent" color="brand">
-							<nuxt-link
-								v-tooltip="formatMessage(commonSettingsMessages.featureFlags)"
-								to="/settings/flags"
-							>
-								<ToggleRightIcon />
-							</nuxt-link>
-						</ButtonStyled>
+						<ButtonLink
+							v-if="flags.developerMode"
+							v-tooltip="formatMessage(commonSettingsMessages.featureFlags)"
+							type="quiet"
+							color="brand"
+							to="/settings/flags"
+							class="!w-9 !rounded-full !px-0"
+						>
+							<ToggleRightIcon />
+						</ButtonLink>
 					</div>
 					<div class="flex flex-wrap justify-center gap-px sm:-mx-2">
-						<ButtonStyled
+						<ButtonLink
 							v-for="(social, index) in socialLinks"
 							:key="`footer-social-${index}`"
-							circular
-							type="transparent"
+							v-tooltip="formatMessage(social.label)"
+							type="quiet"
+							:href="social.href"
+							target="_blank"
+							:rel="`noopener${social.rel ? ` ${social.rel}` : ''}`"
+							class="!w-9 !rounded-full !px-0"
 						>
-							<a
-								v-tooltip="formatMessage(social.label)"
-								:href="social.href"
-								target="_blank"
-								:rel="`noopener${social.rel ? ` ${social.rel}` : ''}`"
-							>
-								<component :is="social.icon" class="h-5 w-5" />
-							</a>
-						</ButtonStyled>
+							<component :is="social.icon" class="h-5 w-5" />
+						</ButtonLink>
 					</div>
 					<div class="mt-auto flex flex-wrap justify-center gap-3 md:flex-col">
 						<p class="m-0">
diff --git a/apps/frontend/src/components/ui/NewsletterButton.vue b/apps/frontend/src/components/ui/NewsletterButton.vue
index fb092bffaf..c00872c48d 100644
--- a/apps/frontend/src/components/ui/NewsletterButton.vue
+++ b/apps/frontend/src/components/ui/NewsletterButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CheckIcon, MailIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
+import { Button, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
@@ -61,12 +61,16 @@ async function subscribe() {
 </script>
 
 <template>
-	<ButtonStyled v-if="isSuccess && showSubscribeButton" color="brand" type="outlined">
-		<button v-tooltip="formatMessage(messages.tooltipSubscribe)" @click="subscribe">
-			<template v-if="!showSubscriptionConfirmation">
-				<MailIcon /> {{ formatMessage(messages.subscribe) }}
-			</template>
-			<template v-else> <CheckIcon /> {{ formatMessage(messages.subscribed) }} </template>
-		</button>
-	</ButtonStyled>
+	<Button
+		v-if="isSuccess && showSubscribeButton"
+		v-tooltip="formatMessage(messages.tooltipSubscribe)"
+		type="outlined"
+		class="!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] [&>svg]:!text-brand"
+		@click="subscribe"
+	>
+		<template v-if="!showSubscriptionConfirmation">
+			<MailIcon /> {{ formatMessage(messages.subscribe) }}
+		</template>
+		<template v-else> <CheckIcon /> {{ formatMessage(messages.subscribed) }} </template>
+	</Button>
 </template>
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 1bbac8bf38..4f3cfa001b 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -46,18 +46,18 @@
 					class="flex flex-wrap items-center gap-3"
 					:class="{ 'gap-2': compact }"
 				>
-					<ButtonStyled color="brand">
-						<button @click="performActionByTitle(notification, 'Accept')">
-							<CheckIcon />
-							Accept
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="red">
-						<button @click="performActionByTitle(notification, 'Deny')">
-							<XIcon />
-							Decline
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="brand"
+						@click="performActionByTitle(notification, 'Accept')"
+					>
+						<CheckIcon />
+						Accept
+					</Button>
+					<Button type="colored" color="red" @click="performActionByTitle(notification, 'Deny')">
+						<XIcon />
+						Decline
+					</Button>
 				</div>
 				<div
 					class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[var(--color-text-secondary)]"
@@ -276,9 +276,53 @@
 			</span>
 			<div v-if="compact" class="notification__actions">
 				<template v-if="type === 'team_invite' || type === 'organization_invite'">
-					<ButtonStyled circular color="brand" type="transparent">
-						<button
-							v-tooltip="`Accept`"
+					<IconButton
+						v-tooltip="`Accept`"
+						type="quiet"
+						color="brand"
+						:label="`Accept`"
+						@click="
+							() => {
+								acceptTeamInvite(notification.body.team_id)
+								read()
+							}
+						"
+					>
+						<CheckIcon />
+					</IconButton>
+					<IconButton
+						v-tooltip="`Decline`"
+						type="quiet"
+						color="red"
+						:label="`Decline`"
+						@click="
+							() => {
+								removeSelfFromTeam(notification.body.team_id)
+								read()
+							}
+						"
+					>
+						<XIcon />
+					</IconButton>
+				</template>
+				<IconButton
+					v-else-if="!notification.read"
+					v-tooltip="`Mark as read`"
+					type="quiet"
+					:label="`Mark as read`"
+					@click="read()"
+				>
+					<XIcon />
+				</IconButton>
+			</div>
+			<div v-else class="notification__actions">
+				<div v-if="type !== null" class="input-group">
+					<template
+						v-if="(type === 'team_invite' || type === 'organization_invite') && !notification.read"
+					>
+						<Button
+							type="colored"
+							color="brand"
 							@click="
 								() => {
 									acceptTeamInvite(notification.body.team_id)
@@ -287,11 +331,11 @@
 							"
 						>
 							<CheckIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular color="red" type="transparent">
-						<button
-							v-tooltip="`Decline`"
+							Accept
+						</Button>
+						<Button
+							type="colored"
+							color="red"
 							@click="
 								() => {
 									removeSelfFromTeam(notification.body.team_id)
@@ -300,75 +344,40 @@
 							"
 						>
 							<XIcon />
-						</button>
-					</ButtonStyled>
-				</template>
-				<ButtonStyled v-else-if="!notification.read" circular type="transparent">
-					<button v-tooltip="`Mark as read`" @click="read()">
-						<XIcon />
-					</button>
-				</ButtonStyled>
-			</div>
-			<div v-else class="notification__actions">
-				<div v-if="type !== null" class="input-group">
-					<template
-						v-if="(type === 'team_invite' || type === 'organization_invite') && !notification.read"
-					>
-						<ButtonStyled color="brand">
-							<button
-								@click="
-									() => {
-										acceptTeamInvite(notification.body.team_id)
-										read()
-									}
-								"
-							>
-								<CheckIcon />
-								Accept
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="red">
-							<button
-								@click="
-									() => {
-										removeSelfFromTeam(notification.body.team_id)
-										read()
-									}
-								"
-							>
-								<XIcon />
-								Decline
-							</button>
-						</ButtonStyled>
+							Decline
+						</Button>
 					</template>
-					<ButtonStyled v-else-if="!notification.read">
-						<button @click="read()">
-							<CheckIcon />
-							Mark as read
-						</button>
-					</ButtonStyled>
+					<Button v-else-if="!notification.read" @click="read()">
+						<CheckIcon />
+						Mark as read
+					</Button>
 					<CopyCode v-if="flags.developerMode" :text="notification.id" />
 				</div>
 				<div v-else class="input-group">
-					<ButtonStyled v-if="notification.link && notification.link !== '#'">
-						<nuxt-link :to="notification.link" target="_blank">
-							<ExternalIcon />
-							Open link
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled v-for="(action, actionIndex) in notification.actions" :key="actionIndex">
-						<button @click="performAction(notification, actionIndex)">
-							<CheckIcon v-if="action.title === 'Accept'" />
-							<XIcon v-else-if="action.title === 'Deny'" />
-							{{ action.title }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="notification.actions.length === 0 && !notification.read">
-						<button @click="performAction(notification, null)">
-							<CheckIcon />
-							Mark as read
-						</button>
-					</ButtonStyled>
+					<ButtonLink
+						v-if="notification.link && notification.link !== '#'"
+						:to="notification.link"
+						target="_blank"
+					>
+						<ExternalIcon />
+						Open link
+					</ButtonLink>
+					<Button
+						v-for="(action, actionIndex) in notification.actions"
+						:key="actionIndex"
+						@click="performAction(notification, actionIndex)"
+					>
+						<CheckIcon v-if="action.title === 'Accept'" />
+						<XIcon v-else-if="action.title === 'Deny'" />
+						{{ action.title }}
+					</Button>
+					<Button
+						v-if="notification.actions.length === 0 && !notification.read"
+						@click="performAction(notification, null)"
+					>
+						<CheckIcon />
+						Mark as read
+					</Button>
 					<CopyCode v-if="flags.developerMode" :text="notification.id" />
 				</div>
 			</div>
@@ -390,10 +399,12 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	Categories,
 	CopyCode,
 	DoubleIcon,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	ProjectStatusBadge,
diff --git a/apps/frontend/src/components/ui/OrganizationPageHeader.vue b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
index c5f74542df..6063423a50 100644
--- a/apps/frontend/src/components/ui/OrganizationPageHeader.vue
+++ b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
@@ -38,21 +38,19 @@
 
 		<template #actions>
 			<PageHeaderActions>
-				<ButtonStyled v-if="canManage" size="large">
-					<nuxt-link :to="`/organization/${organization.slug}/settings`">
-						<SettingsIcon />
-						{{ formatMessage(messages.manage) }}
-					</nuxt-link>
-				</ButtonStyled>
-				<ButtonStyled circular size="large" type="transparent">
-					<TeleportOverflowMenu
-						:options="moreActions"
-						:tooltip="formatMessage(commonMessages.moreOptionsButton)"
-						:aria-label="formatMessage(commonMessages.moreOptionsButton)"
-					>
-						<MoreVerticalIcon />
-					</TeleportOverflowMenu>
-				</ButtonStyled>
+				<ButtonLink v-if="canManage" size="xl" :to="`/organization/${organization.slug}/settings`">
+					<SettingsIcon />
+					{{ formatMessage(messages.manage) }}
+				</ButtonLink>
+				<TeleportOverflowMenu
+					type="quiet"
+					size="xl"
+					:label="formatMessage(commonMessages.moreOptionsButton)"
+					:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+					:options="moreActions"
+				>
+					<MoreVerticalIcon />
+				</TeleportOverflowMenu>
 			</PageHeaderActions>
 		</template>
 	</PageHeader>
@@ -68,18 +66,17 @@ import {
 	SettingsIcon,
 	UsersIcon,
 } from '@modrinth/assets'
+import { ButtonLink, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
+	type OverflowMenuOption,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
 	PageHeaderMetadata,
 	PageHeaderMetadataNumberItem,
-	TeleportOverflowMenu,
-	type TeleportOverflowMenuItem,
 	useFormatNumber,
 	useVIntl,
 } from '@modrinth/ui'
@@ -135,7 +132,7 @@ const emit = defineEmits<{
 const { formatMessage } = useVIntl()
 const formatNumber = useFormatNumber()
 
-const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
+const moreActions = computed<OverflowMenuOption[]>(() => [
 	{
 		id: 'manage-projects',
 		label: formatMessage(messages.manageProjects),
@@ -143,10 +140,7 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 		action: () => emit('manageProjects'),
 		shown: props.canManage,
 	},
-	{
-		divider: true,
-		shown: props.canManage,
-	},
+	{ type: 'divider', shown: props.canManage },
 	{
 		id: 'copy-id',
 		label: formatMessage(commonMessages.copyIdButton),
diff --git a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
index 6f66486fd0..46524dbff5 100644
--- a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
@@ -65,38 +65,37 @@
 			</div>
 			<template #actions>
 				<div class="flex justify-end gap-2">
-					<ButtonStyled type="outlined">
-						<button @click="hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="selectedProjects.length === 0" @click="submitTransfer()">
-							<TransferIcon />
-							{{
-								formatMessage(messages.transferSelectedProjects, {
-									count: selectedProjects.length,
-								})
-							}}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="selectedProjects.length === 0"
+						@click="submitTransfer()"
+					>
+						<TransferIcon />
+						{{
+							formatMessage(messages.transferSelectedProjects, {
+								count: selectedProjects.length,
+							})
+						}}
+					</Button>
 				</div>
 			</template>
 		</NewModal>
-		<ButtonStyled>
-			<button @click="show($event)">
-				<TransferIcon />
-				<span>{{ formatMessage(messages.transferProjectsTitle) }}</span>
-			</button>
-		</ButtonStyled>
+		<Button @click="show($event)">
+			<TransferIcon />
+			<span>{{ formatMessage(messages.transferProjectsTitle) }}</span>
+		</Button>
 	</div>
 </template>
 
 <script setup>
 import { BoxIcon, TransferIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	Checkbox,
 	commonMessages,
 	CopyCode,
diff --git a/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue b/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
index 34752468c0..d78f38c4fd 100644
--- a/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
+++ b/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
@@ -1,63 +1,67 @@
 <template>
-	<ButtonStyled size="large" circular>
-		<PopoutMenu
-			v-if="authUser"
-			:tooltip="
-				saved ? formatMessage(commonMessages.savedLabel) : formatMessage(commonMessages.saveButton)
-			"
-			from="top-right"
-			:aria-label="formatMessage(commonMessages.saveButton)"
-			:dropdown-id="`${baseId}-save`"
-		>
+	<TeleportPopoutMenu
+		v-if="authUser"
+		icon-only
+		size="xl"
+		:label="
+			saved ? formatMessage(commonMessages.savedLabel) : formatMessage(commonMessages.saveButton)
+		"
+		:tooltip="
+			saved ? formatMessage(commonMessages.savedLabel) : formatMessage(commonMessages.saveButton)
+		"
+		placement="top-end"
+	>
+		<template #trigger>
 			<BookmarkIcon aria-hidden="true" :fill="saved ? 'currentColor' : 'none'" />
-			<template #menu>
-				<StyledInput
-					v-model="displayCollectionsSearch"
-					:placeholder="formatMessage(commonMessages.searchPlaceholder)"
-					wrapper-class="menu-search"
-				/>
-				<div v-if="filteredCollections.length > 0" class="collections-list text-primary">
-					<Checkbox
-						v-for="option in filteredCollections"
-						:key="option.id"
-						:model-value="option.projects.includes(projectId)"
-						class="popout-checkbox"
-						@update:model-value="() => collectProject(option, projectId)"
-					>
-						{{ option.name }}
-					</Checkbox>
-				</div>
+		</template>
+		<template #panel>
+			<StyledInput
+				v-model="displayCollectionsSearch"
+				:placeholder="formatMessage(commonMessages.searchPlaceholder)"
+				wrapper-class="menu-search"
+			/>
+			<div v-if="filteredCollections.length > 0" class="collections-list text-primary">
+				<Checkbox
+					v-for="option in filteredCollections"
+					:key="option.id"
+					:model-value="option.projects.includes(projectId)"
+					class="popout-checkbox"
+					@update:model-value="() => collectProject(option, projectId)"
+				>
+					{{ option.name }}
+				</Checkbox>
+			</div>
 
-				<div v-else class="menu-text">
-					<p class="popout-text">{{ noCollectionsLabel }}</p>
-				</div>
-				<ButtonStyled>
-					<button class="mx-3 mb-3" @click="createCollection">
-						<PlusIcon aria-hidden="true" />
-						{{ createNewCollectionLabel }}
-					</button>
-				</ButtonStyled>
-			</template>
-		</PopoutMenu>
-		<nuxt-link
-			v-else
-			v-tooltip="formatMessage(commonMessages.saveButton)"
-			:to="signInRoute"
-			:aria-label="formatMessage(commonMessages.saveButton)"
-		>
-			<BookmarkIcon aria-hidden="true" />
-		</nuxt-link>
-	</ButtonStyled>
+			<div v-else class="menu-text">
+				<p class="popout-text">{{ noCollectionsLabel }}</p>
+			</div>
+			<Button class="mx-3 mb-3" @click="createCollection">
+				<PlusIcon aria-hidden="true" />
+				{{ createNewCollectionLabel }}
+			</Button>
+		</template>
+	</TeleportPopoutMenu>
+	<ButtonLink
+		v-else
+		v-tooltip="formatMessage(commonMessages.saveButton)"
+		size="xl"
+		:to="signInRoute"
+		:aria-label="formatMessage(commonMessages.saveButton)"
+		class="!w-12 !rounded-full !px-0"
+	>
+		<BookmarkIcon aria-hidden="true" />
+	</ButtonLink>
 </template>
 
 <script setup lang="ts">
 import { BookmarkIcon, PlusIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	Checkbox,
 	commonMessages,
-	PopoutMenu,
 	StyledInput,
+	TeleportPopoutMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/CompatibleVersionCard.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/CompatibleVersionCard.vue
index c8b5bf66c8..db6addd2de 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/CompatibleVersionCard.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/CompatibleVersionCard.vue
@@ -48,37 +48,34 @@
 				</span>
 			</div>
 		</div>
-		<ButtonStyled
+		<ButtonLink
 			v-if="primaryFile && showDownload"
-			:color="color"
-			:type="type"
-			:circular="circular"
+			v-tooltip="circular ? formatMessage(messages.download) : null"
+			:type="downloadButtonType"
+			:color="downloadButtonColor"
+			:href="primaryFileDownloadUrl"
+			:download="primaryFile.filename"
+			:aria-label="
+				formatMessage(messages.downloadVersion, {
+					version: version.version_number,
+				})
+			"
+			:class="circular ? '!w-9 !rounded-full !px-0' : undefined"
+			@click="emit('download')"
 		>
-			<a
-				v-tooltip="circular ? formatMessage(messages.download) : null"
-				:href="primaryFileDownloadUrl"
-				:download="primaryFile.filename"
-				:aria-label="
-					formatMessage(messages.downloadVersion, {
-						version: version.version_number,
-					})
-				"
-				@click="emit('download')"
-			>
-				<DownloadIcon aria-hidden="true" />
-				<template v-if="!circular">
-					{{ formatMessage(messages.download) }}
-				</template>
-			</a>
-		</ButtonStyled>
+			<DownloadIcon aria-hidden="true" />
+			<template v-if="!circular">
+				{{ formatMessage(messages.download) }}
+			</template>
+		</ButtonLink>
 	</div>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { DownloadIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
+import { ButtonLink } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	type CdnDownloadReason,
 	defineMessages,
 	truncatedTooltip,
@@ -161,6 +158,17 @@ const publishedLabel = computed(() =>
 	capitalizeString(formatRelativeTime(props.version.date_published)),
 )
 const publishedTooltip = computed(() => formatDateTime(props.version.date_published))
+const downloadButtonType = computed(() => {
+	if (props.type === 'transparent') return 'quiet'
+	return props.color === 'brand' ? 'colored' : 'base'
+})
+const downloadButtonColor = computed(() =>
+	downloadButtonType.value === 'colored' || downloadButtonType.value === 'quiet'
+		? props.color === 'brand'
+			? 'brand'
+			: undefined
+		: undefined,
+)
 const primaryFileSizeLabel = computed(() => {
 	if (!primaryFile.value) return ''
 	return formatBytes(primaryFile.value.size)
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
index e1959994ea..3623393d4b 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/DownloadDependency.vue
@@ -56,26 +56,27 @@
 					{{ metadataLabel }}
 				</span>
 			</span>
-			<ButtonStyled v-if="dependency.downloadHref" circular type="transparent">
-				<a
-					v-tooltip="downloadTooltip"
-					:href="dependency.downloadHref"
-					:download="dependency.filename"
-					:aria-label="downloadTooltip"
-					@click="emit('download')"
-				>
-					<DownloadIcon aria-hidden="true" class="size-6 text-secondary" />
-				</a>
-			</ButtonStyled>
-			<ButtonStyled v-else circular type="transparent">
-				<button
-					v-tooltip="dependency.unavailableTooltip"
-					disabled
-					:aria-label="dependency.unavailableTooltip"
-				>
-					<DownloadIcon aria-hidden="true" class="size-6 text-secondary" />
-				</button>
-			</ButtonStyled>
+			<ButtonLink
+				v-if="dependency.downloadHref"
+				v-tooltip="downloadTooltip"
+				type="quiet"
+				:href="dependency.downloadHref"
+				:download="dependency.filename"
+				:aria-label="downloadTooltip"
+				class="!w-9 !rounded-full !px-0"
+				@click="emit('download')"
+			>
+				<DownloadIcon aria-hidden="true" class="size-6 text-secondary" />
+			</ButtonLink>
+			<IconButton
+				v-else
+				v-tooltip="dependency.unavailableTooltip"
+				type="quiet"
+				:label="dependency.unavailableTooltip"
+				disabled
+			>
+				<DownloadIcon aria-hidden="true" class="size-6 text-secondary" />
+			</IconButton>
 		</div>
 		<div
 			v-for="childDependency in dependency.dependencies"
@@ -100,8 +101,9 @@
 import { DownloadIcon, PackageIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	ButtonLink,
 	defineMessages,
+	IconButton,
 	TagItem,
 	truncatedTooltip,
 	useFormatBytes,
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/InstallWithModrinthApp.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/InstallWithModrinthApp.vue
index 41480b0a67..dca290994c 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/InstallWithModrinthApp.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/InstallWithModrinthApp.vue
@@ -7,18 +7,18 @@
 		class="modrinth-app-section contents"
 	>
 		<div class="flex flex-col items-center">
-			<ButtonStyled color="brand">
-				<a
-					class="!min-h-10 w-fit no-underline"
-					:href="`modrinth://mod/${project.slug}`"
-					@click="installWithApp"
-				>
-					<ModrinthIcon aria-hidden="true" />
-					<span class="min-w-0 text-center">
-						{{ formatMessage(messages.installWithModrinthApp) }}
-					</span>
-				</a>
-			</ButtonStyled>
+			<ButtonLink
+				type="colored"
+				color="brand"
+				class="!min-h-10 w-fit no-underline"
+				:href="`modrinth://mod/${project.slug}`"
+				@click="installWithApp"
+			>
+				<ModrinthIcon aria-hidden="true" />
+				<span class="min-w-0 text-center">
+					{{ formatMessage(messages.installWithModrinthApp) }}
+				</span>
+			</ButtonLink>
 			<Accordion ref="getModrinthAppAccordion">
 				<nuxt-link class="mt-2 flex justify-center text-brand-blue hover:underline" to="/app">
 					{{ formatMessage(messages.dontHaveModrinthApp) }}
@@ -39,7 +39,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { ModrinthIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+import { ButtonLink, defineMessages, useVIntl } from '@modrinth/ui'
 import type { DisplayProjectType } from '@modrinth/utils'
 import { ref } from 'vue'
 
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
index a970e6e0d9..c0c5f6d5ef 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
@@ -49,42 +49,50 @@
 		</template>
 		<template v-if="showDependencyDownloadActions" #actions>
 			<div class="flex flex-wrap justify-end gap-2 p-2">
-				<ButtonStyled>
-					<button
-						class="!shadow-none"
-						:disabled="!!downloadingActionType || !dependencyDownloadFilesLoaded"
-						@click="downloadSelectedVersionZip"
-					>
-						<SpinnerIcon
-							v-if="downloadingActionType === 'zip'"
-							aria-hidden="true"
-							class="animate-spin"
-						/>
-						<DownloadIcon v-else aria-hidden="true" />
-						{{ formatMessage(messages.downloadAsZip) }}
-					</button>
-				</ButtonStyled>
-				<JoinedButtons
-					v-if="hasRecommendedDownloadFiles"
-					color="brand"
-					:actions="downloadWithRecommendedActions"
+				<Button
 					:disabled="!!downloadingActionType || !dependencyDownloadFilesLoaded"
-				/>
-				<ButtonStyled v-else color="brand">
-					<button
-						class="!shadow-none"
-						:disabled="!!downloadingActionType || !dependencyDownloadFilesLoaded"
-						@click="downloadFilesWithDependencies"
-					>
-						<SpinnerIcon
-							v-if="downloadingActionType === 'dependencies'"
-							aria-hidden="true"
-							class="animate-spin"
-						/>
-						<DownloadIcon v-else aria-hidden="true" />
-						{{ formatMessage(messages.downloadWithDependencies) }}
-					</button>
-				</ButtonStyled>
+					@click="downloadSelectedVersionZip"
+				>
+					<SpinnerIcon
+						v-if="downloadingActionType === 'zip'"
+						aria-hidden="true"
+						class="animate-spin"
+					/>
+					<DownloadIcon v-else aria-hidden="true" />
+					{{ formatMessage(messages.downloadAsZip) }}
+				</Button>
+				<SplitButton
+					v-if="hasRecommendedDownloadFiles"
+					type="colored"
+					color="brand"
+					:options="downloadWithRecommendedOptions"
+					:menu-label="formatMessage(messages.downloadWithRecommended)"
+					:disabled="!!downloadingActionType || !dependencyDownloadFilesLoaded"
+					@click="downloadFilesWithDependencies"
+				>
+					<SpinnerIcon
+						v-if="downloadingActionType === 'dependencies'"
+						aria-hidden="true"
+						class="animate-spin"
+					/>
+					<DownloadIcon v-else aria-hidden="true" />
+					{{ formatMessage(messages.downloadWithDependencies) }}
+				</SplitButton>
+				<Button
+					v-else
+					type="colored"
+					color="brand"
+					:disabled="!!downloadingActionType || !dependencyDownloadFilesLoaded"
+					@click="downloadFilesWithDependencies"
+				>
+					<SpinnerIcon
+						v-if="downloadingActionType === 'dependencies'"
+						aria-hidden="true"
+						class="animate-spin"
+					/>
+					<DownloadIcon v-else aria-hidden="true" />
+					{{ formatMessage(messages.downloadWithDependencies) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -95,15 +103,15 @@ import type { Labrinth } from '@modrinth/api-client'
 import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	type CdnDownloadReason,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	type JoinedButtonAction,
-	JoinedButtons,
 	NewModal,
+	type OverflowMenuOption,
 	ServersPromo,
+	SplitButton,
 	truncatedTooltip,
 	useDebugLogger,
 	useVIntl,
@@ -342,13 +350,7 @@ const showDependencyDownloadActions = computed(
 			hasRecommendedDownloadFiles.value),
 )
 
-const downloadWithRecommendedActions = computed<JoinedButtonAction[]>(() => [
-	{
-		id: 'download-with-dependencies',
-		label: formatMessage(messages.downloadWithDependencies),
-		icon: downloadingActionType.value === 'dependencies' ? SpinnerIcon : DownloadIcon,
-		action: () => void downloadFilesWithDependencies(),
-	},
+const downloadWithRecommendedOptions = computed<OverflowMenuOption[]>(() => [
 	{
 		id: 'download-with-recommended',
 		label: formatMessage(messages.downloadWithRecommended),
diff --git a/apps/frontend/src/components/ui/ProjectMemberHeader.vue b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
index d08f798c4a..9a4c0b2ee5 100644
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -6,26 +6,22 @@
 		</p>
 		<p v-else>{{ getFormattedMessage(messages.invitationNoRole) }}</p>
 		<div class="input-group">
-			<ButtonStyled color="brand">
-				<button class="brand-button" @click="acceptInvite()">
-					<CheckIcon />
-					{{ getFormattedMessage(commonMessages.acceptButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled color="red">
-				<button @click="declineInvite">
-					<XIcon />
-					{{ getFormattedMessage(commonMessages.declineButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" class="brand-button" @click="acceptInvite()">
+				<CheckIcon />
+				{{ getFormattedMessage(commonMessages.acceptButton) }}
+			</Button>
+			<Button type="colored" color="red" @click="declineInvite">
+				<XIcon />
+				{{ getFormattedMessage(commonMessages.declineButton) }}
+			</Button>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { CheckIcon, XIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
diff --git a/apps/frontend/src/components/ui/ShareArticleButtons.vue b/apps/frontend/src/components/ui/ShareArticleButtons.vue
index 386fd27325..57b47fc331 100644
--- a/apps/frontend/src/components/ui/ShareArticleButtons.vue
+++ b/apps/frontend/src/components/ui/ShareArticleButtons.vue
@@ -1,58 +1,53 @@
 <template>
 	<div class="flex gap-2">
-		<ButtonStyled circular>
-			<a
-				v-tooltip="`Share on Bluesky`"
-				:href="`https://bsky.app/intent/compose?text=${encodedUrl}`"
-				target="_blank"
-			>
-				<BlueskyIcon />
-			</a>
-		</ButtonStyled>
-		<ButtonStyled circular>
-			<a
-				v-tooltip="`Share on Mastodon`"
-				:href="`https://tootpick.org/#text=${encodedUrl}`"
-				target="_blank"
-			>
-				<MastodonIcon />
-			</a>
-		</ButtonStyled>
-		<ButtonStyled circular>
-			<a
-				v-tooltip="`Share on X`"
-				:href="`https://www.x.com/intent/post?url=${encodedUrl}`"
-				target="_blank"
-			>
-				<TwitterIcon />
-			</a>
-		</ButtonStyled>
-		<ButtonStyled circular>
-			<a
-				v-tooltip="`Share via email`"
-				:href="`mailto:${encodedTitle ? `?subject=${encodedTitle}&` : `?`}body=${encodedUrl}`"
-				target="_blank"
-			>
-				<MailIcon />
-			</a>
-		</ButtonStyled>
-		<ButtonStyled circular>
-			<button
-				v-tooltip="copied ? `Copied to clipboard` : `Copy link`"
-				:disabled="copied"
-				class="relative grid place-items-center overflow-hidden"
-				@click="copyToClipboard(url)"
-			>
-				<CheckIcon
-					class="absolute transition-all ease-in-out"
-					:class="copied ? 'translate-y-0' : 'translate-y-7'"
-				/>
-				<LinkIcon
-					class="absolute transition-all ease-in-out"
-					:class="copied ? '-translate-y-7' : 'translate-y-0'"
-				/>
-			</button>
-		</ButtonStyled>
+		<ButtonLink
+			v-tooltip="`Share on Bluesky`"
+			:href="`https://bsky.app/intent/compose?text=${encodedUrl}`"
+			target="_blank"
+			class="!w-9 !rounded-full !px-0"
+		>
+			<BlueskyIcon />
+		</ButtonLink>
+		<ButtonLink
+			v-tooltip="`Share on Mastodon`"
+			:href="`https://tootpick.org/#text=${encodedUrl}`"
+			target="_blank"
+			class="!w-9 !rounded-full !px-0"
+		>
+			<MastodonIcon />
+		</ButtonLink>
+		<ButtonLink
+			v-tooltip="`Share on X`"
+			:href="`https://www.x.com/intent/post?url=${encodedUrl}`"
+			target="_blank"
+			class="!w-9 !rounded-full !px-0"
+		>
+			<TwitterIcon />
+		</ButtonLink>
+		<ButtonLink
+			v-tooltip="`Share via email`"
+			:href="`mailto:${encodedTitle ? `?subject=${encodedTitle}&` : `?`}body=${encodedUrl}`"
+			target="_blank"
+			class="!w-9 !rounded-full !px-0"
+		>
+			<MailIcon />
+		</ButtonLink>
+		<IconButton
+			v-tooltip="copied ? `Copied to clipboard` : `Copy link`"
+			:label="copied ? `Copied to clipboard` : `Copy link`"
+			:disabled="copied"
+			class="relative grid place-items-center overflow-hidden"
+			@click="copyToClipboard(url)"
+		>
+			<CheckIcon
+				class="absolute transition-all ease-in-out"
+				:class="copied ? 'translate-y-0' : 'translate-y-7'"
+			/>
+			<LinkIcon
+				class="absolute transition-all ease-in-out"
+				:class="copied ? '-translate-y-7' : 'translate-y-0'"
+			/>
+		</IconButton>
 	</div>
 </template>
 
@@ -65,7 +60,7 @@ import {
 	MastodonIcon,
 	TwitterIcon,
 } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import { ButtonLink, IconButton } from '@modrinth/ui'
 
 const props = defineProps<{
 	title?: string
diff --git a/apps/frontend/src/components/ui/SharedInstanceInviteOpenInAppModal.vue b/apps/frontend/src/components/ui/SharedInstanceInviteOpenInAppModal.vue
index 2c6be85a6f..0a5f4b5aa6 100644
--- a/apps/frontend/src/components/ui/SharedInstanceInviteOpenInAppModal.vue
+++ b/apps/frontend/src/components/ui/SharedInstanceInviteOpenInAppModal.vue
@@ -102,23 +102,21 @@
 					formatMessage(messages.openingAutomatically)
 				}}</span>
 				<div v-else class="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
-					<ButtonStyled>
-						<button class="flex-1" type="button" @click="hide">
-							<XIcon />
-							{{ formatMessage(commonMessages.closeButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<a
-							class="flex-1"
-							href="https://modrinth.com/app"
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							<DownloadIcon />
-							{{ formatMessage(messages.getApp) }}
-						</a>
-					</ButtonStyled>
+					<Button class="flex-1" native-type="button" @click="hide">
+						<XIcon />
+						{{ formatMessage(commonMessages.closeButton) }}
+					</Button>
+					<ButtonLink
+						type="colored"
+						color="brand"
+						class="flex-1"
+						href="https://modrinth.com/app"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<DownloadIcon />
+						{{ formatMessage(messages.getApp) }}
+					</ButtonLink>
 				</div>
 			</div>
 		</div>
@@ -127,7 +125,7 @@
 
 <script setup lang="ts">
 import { CheckIcon, DownloadIcon, XIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
+import { Avatar, Button, ButtonLink, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, nextTick, onUnmounted, ref } from 'vue'
 
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/components/ui/admin/AdminBillingChargeCard.vue b/apps/frontend/src/components/ui/admin/AdminBillingChargeCard.vue
index 46f9e79277..79a702397a 100644
--- a/apps/frontend/src/components/ui/admin/AdminBillingChargeCard.vue
+++ b/apps/frontend/src/components/ui/admin/AdminBillingChargeCard.vue
@@ -87,29 +87,23 @@
 				</div>
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled v-if="isRefunded">
-					<div class="button-like disabled"><CheckIcon /> Charge refunded</div>
-				</ButtonStyled>
-				<ButtonStyled
+				<Button v-if="isRefunded" disabled><CheckIcon /> Charge refunded</Button>
+				<Button
 					v-else-if="charge.status === 'succeeded' && charge.type !== 'refund'"
-					color="red"
-					color-fill="text"
+					class="!text-red [&>svg]:!text-red"
+					@click="emit('refund', charge)"
 				>
-					<button @click="emit('refund', charge)">
-						<CurrencyIcon />
-						Refund options
-					</button>
-				</ButtonStyled>
-				<ButtonStyled
+					<CurrencyIcon />
+					Refund options
+				</Button>
+				<Button
 					v-else-if="charge.status === 'failed' || charge.status === 'open'"
-					color="red"
-					color-fill="text"
+					class="!text-red [&>svg]:!text-red"
+					@click="emit('modify', charge, subscription)"
 				>
-					<button @click="emit('modify', charge, subscription)">
-						<CurrencyIcon />
-						Modify charge
-					</button>
-				</ButtonStyled>
+					<CurrencyIcon />
+					Modify charge
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -117,7 +111,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { CheckIcon, CurrencyIcon } from '@modrinth/assets'
-import { ButtonStyled, useFormatDateTime, useFormatPrice, useRelativeTime } from '@modrinth/ui'
+import { Button, useFormatDateTime, useFormatPrice, useRelativeTime } from '@modrinth/ui'
 import dayjs from 'dayjs'
 
 import { products } from '~/generated/state.json'
diff --git a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
index a52bb5c01e..32bbb6d6f6 100644
--- a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
+++ b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
@@ -3,7 +3,7 @@ import type { Archon } from '@modrinth/api-client'
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import {
 	Accordion,
-	ButtonStyled,
+	Button,
 	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
@@ -181,24 +181,33 @@ defineExpose({ show, hide })
 						wrapper-class="w-full"
 						autocomplete="off"
 					/>
-					<ButtonStyled color="green" color-fill="text">
-						<button class="shrink-0" @click="() => assign(true)">
-							<PlusIcon />
-							Add server
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="blue" color-fill="text">
-						<button class="shrink-0" @click="() => assign(false)">
-							<PlusIcon />
-							Add node
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="red" color-fill="text">
-						<button class="shrink-0" @click="() => unassignDetect()">
-							<XIcon />
-							Remove
-						</button>
-					</ButtonStyled>
+					<Button
+						type="quiet"
+						color="green"
+						class="shrink-0 !text-green [&>svg]:!text-green"
+						@click="() => assign(true)"
+					>
+						<PlusIcon />
+						Add server
+					</Button>
+					<Button
+						type="quiet"
+						color="blue"
+						class="shrink-0 !text-blue [&>svg]:!text-blue"
+						@click="() => assign(false)"
+					>
+						<PlusIcon />
+						Add node
+					</Button>
+					<Button
+						type="quiet"
+						color="red"
+						class="shrink-0 !text-red [&>svg]:!text-red"
+						@click="() => unassignDetect()"
+					>
+						<XIcon />
+						Remove
+					</Button>
 				</div>
 			</div>
 		</div>
diff --git a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
index 587402cf1d..45f3941547 100644
--- a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
+++ b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
@@ -42,12 +42,15 @@
 							wrapper-class="w-32"
 							autocomplete="off"
 						/>
-						<ButtonStyled color="blue" color-fill="text">
-							<button class="shrink-0" @click="addNode">
-								<PlusIcon />
-								Add
-							</button>
-						</ButtonStyled>
+						<Button
+							type="quiet"
+							color="blue"
+							class="shrink-0 !text-blue [&>svg]:!text-blue"
+							@click="addNode"
+						>
+							<PlusIcon />
+							Add
+						</Button>
 					</div>
 					<div v-if="selectedNodes.length" class="mt-1 flex flex-wrap gap-2">
 						<TagItem v-for="h in selectedNodes" :key="`node-${h}`" :action="() => removeNode(h)">
@@ -111,18 +114,14 @@
 			</div>
 
 			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button :disabled="applyDisabled" @click="apply">
-						<CheckIcon aria-hidden="true" />
-						Apply credits
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="modal?.hide?.()">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="applyDisabled" @click="apply">
+					<CheckIcon aria-hidden="true" />
+					Apply credits
+				</Button>
+				<Button @click="modal?.hide?.()">
+					<XIcon aria-hidden="true" />
+					Cancel
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -131,7 +130,7 @@
 <script setup lang="ts">
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
diff --git a/apps/frontend/src/components/ui/admin/TransferModal.vue b/apps/frontend/src/components/ui/admin/TransferModal.vue
index bd0d5ce399..16e0df6de7 100644
--- a/apps/frontend/src/components/ui/admin/TransferModal.vue
+++ b/apps/frontend/src/components/ui/admin/TransferModal.vue
@@ -56,12 +56,15 @@
 							placeholder="us-vin200, us-vin201"
 							@keydown.enter.prevent="addNodes"
 						/>
-						<ButtonStyled color="blue" color-fill="text">
-							<button class="shrink-0" @click="addNodes">
-								<PlusIcon />
-								Add
-							</button>
-						</ButtonStyled>
+						<Button
+							type="quiet"
+							color="blue"
+							class="shrink-0 !text-blue [&>svg]:!text-blue"
+							@click="addNodes"
+						>
+							<PlusIcon />
+							Add
+						</Button>
 					</div>
 					<div v-if="selectedNodes.length" class="mt-1 flex flex-wrap gap-2">
 						<TagItem v-for="h in selectedNodes" :key="`node-${h}`" :action="() => removeNode(h)">
@@ -122,12 +125,15 @@
 						placeholder="ovh-gen4"
 						@keydown.enter.prevent="addTag"
 					/>
-					<ButtonStyled color="blue" color-fill="text">
-						<button class="shrink-0" @click="addTag">
-							<PlusIcon />
-							Add
-						</button>
-					</ButtonStyled>
+					<Button
+						type="quiet"
+						color="blue"
+						class="shrink-0 !text-blue [&>svg]:!text-blue"
+						@click="addTag"
+					>
+						<PlusIcon />
+						Add
+					</Button>
 				</div>
 				<div v-if="selectedTags.length" class="mt-1 flex flex-wrap gap-2">
 					<TagItem v-for="t in selectedTags" :key="`tag-${t}`" :action="() => removeTag(t)">
@@ -175,18 +181,19 @@
 			</div>
 
 			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button :disabled="submitDisabled || submitting" @click="submit">
-						<SendIcon aria-hidden="true" />
-						{{ submitting ? 'Scheduling...' : 'Schedule transfer' }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="modal?.hide?.()">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="submitDisabled || submitting"
+					@click="submit"
+				>
+					<SendIcon aria-hidden="true" />
+					{{ submitting ? 'Scheduling...' : 'Schedule transfer' }}
+				</Button>
+				<Button @click="modal?.hide?.()">
+					<XIcon aria-hidden="true" />
+					Cancel
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -195,7 +202,7 @@
 <script setup lang="ts">
 import { PlusIcon, SendIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	Chips,
 	Combobox,
 	injectModrinthClient,
diff --git a/apps/frontend/src/components/ui/auth/CreateAccount.vue b/apps/frontend/src/components/ui/auth/CreateAccount.vue
index 412883acea..9382e20e94 100644
--- a/apps/frontend/src/components/ui/auth/CreateAccount.vue
+++ b/apps/frontend/src/components/ui/auth/CreateAccount.vue
@@ -84,16 +84,16 @@
 			<label for="create-account-consent">I agree to receive account updates by email</label>
 		</div>
 
-		<ButtonStyled color="brand">
-			<button
-				class="!w-full font-bold"
-				:disabled="globals?.captcha_enabled ? !tokenModel : false"
-				@click="onCompleteSignUpClick"
-			>
-				{{ formatMessage(messages.completeSignUpButton) }}
-				<RightArrowIcon />
-			</button>
-		</ButtonStyled>
+		<Button
+			type="colored"
+			color="brand"
+			class="!w-full font-bold"
+			:disabled="globals?.captcha_enabled ? !tokenModel : false"
+			@click="onCompleteSignUpClick"
+		>
+			{{ formatMessage(messages.completeSignUpButton) }}
+			<RightArrowIcon />
+		</Button>
 	</div>
 </template>
 
@@ -101,7 +101,7 @@
 import { RightArrowIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	Checkbox,
 	DatePicker,
 	defineMessages,
diff --git a/apps/frontend/src/components/ui/auth/PasskeySettings.vue b/apps/frontend/src/components/ui/auth/PasskeySettings.vue
index 0aeb0aef2f..7156128fad 100644
--- a/apps/frontend/src/components/ui/auth/PasskeySettings.vue
+++ b/apps/frontend/src/components/ui/auth/PasskeySettings.vue
@@ -55,48 +55,42 @@
 							</div>
 						</div>
 						<div class="flex gap-2">
-							<ButtonStyled circular>
-								<button
-									v-tooltip="formatMessage(commonMessages.renameButton)"
-									@click="
-										() => {
-											passkeyToRename = { ...passkey }
-											renamePasskeyModal?.show()
-										}
-									"
-								>
-									<EditIcon />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled circular>
-								<button
-									v-tooltip="formatMessage(messages.deletePasskeyButton)"
-									@click="
-										() => {
-											passkeyToRemove = passkey
-											removePasskeyModal?.show()
-										}
-									"
-								>
-									<TrashIcon />
-								</button>
-							</ButtonStyled>
+							<IconButton
+								v-tooltip="formatMessage(commonMessages.renameButton)"
+								:label="formatMessage(commonMessages.renameButton)"
+								@click="
+									() => {
+										passkeyToRename = { ...passkey }
+										renamePasskeyModal?.show()
+									}
+								"
+							>
+								<EditIcon />
+							</IconButton>
+							<IconButton
+								v-tooltip="formatMessage(messages.deletePasskeyButton)"
+								:label="formatMessage(messages.deletePasskeyButton)"
+								@click="
+									() => {
+										passkeyToRemove = passkey
+										removePasskeyModal?.show()
+									}
+								"
+							>
+								<TrashIcon />
+							</IconButton>
 						</div>
 					</div>
 				</template>
 				<div class="input-group self-end">
-					<ButtonStyled>
-						<button @click="registerPasskey()">
-							<PlusIcon />
-							{{ formatMessage(messages.managePasskeyAddPasskeyButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="managePasskeyModal?.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.closeButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="registerPasskey()">
+						<PlusIcon />
+						{{ formatMessage(messages.managePasskeyAddPasskeyButton) }}
+					</Button>
+					<Button @click="managePasskeyModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.closeButton) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -124,18 +118,19 @@
 					</div>
 				</div>
 				<div class="flex justify-end gap-2.5">
-					<ButtonStyled>
-						<button @click="addPasskeyModal?.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="!pendingPasskeyName" @click="finishRegisterPasskey()">
-							<PlusIcon />
-							{{ formatMessage(messages.managePasskeyAddPasskeyButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="addPasskeyModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="!pendingPasskeyName"
+						@click="finishRegisterPasskey()"
+					>
+						<PlusIcon />
+						{{ formatMessage(messages.managePasskeyAddPasskeyButton) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -163,18 +158,19 @@
 					</div>
 				</div>
 				<div class="flex justify-end gap-2.5">
-					<ButtonStyled>
-						<button @click="renamePasskeyModal?.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="!passkeyToRenameName" @click="renamePasskey()">
-							<SaveIcon />
-							{{ formatMessage(commonMessages.saveButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="renamePasskeyModal?.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="!passkeyToRenameName"
+						@click="renamePasskey()"
+					>
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveButton) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -187,11 +183,9 @@
 				}}</span>
 			</label>
 			<div>
-				<ButtonStyled>
-					<button id="manage-passkeys" @click="showPasskeyModal">
-						<UserKeyIcon /> {{ formatMessage(messages.managePasskeyButton) }}
-					</button>
-				</ButtonStyled>
+				<Button id="manage-passkeys" @click="showPasskeyModal">
+					<UserKeyIcon /> {{ formatMessage(messages.managePasskeyButton) }}
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -209,10 +203,11 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	ConfirmModal,
 	defineMessages,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	NewModal,
diff --git a/apps/frontend/src/components/ui/auth/SignIn.vue b/apps/frontend/src/components/ui/auth/SignIn.vue
index e86d795bad..a1a033dcbb 100644
--- a/apps/frontend/src/components/ui/auth/SignIn.vue
+++ b/apps/frontend/src/components/ui/auth/SignIn.vue
@@ -28,11 +28,9 @@
 						@keyup.enter="onTwoFactorSignIn()"
 					/>
 				</div>
-				<ButtonStyled color="brand">
-					<button @click="onTwoFactorSignIn()">
-						{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="onTwoFactorSignIn()">
+					{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
+				</Button>
 			</div>
 		</template>
 		<template v-else>
@@ -42,47 +40,40 @@
 				</div>
 
 				<section class="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
-					<ButtonStyled v-for="provider in oauthProviders" :key="provider.id">
-						<a
-							class="relative w-full !justify-center overflow-visible !shadow-none"
-							:class="{
-								'!border !border-[var(--color-green)]': lastSignInProvider === provider.id,
-							}"
-							:href="getAuthUrl(provider.id, redirectTarget)"
-							:aria-label="
-								formatMessage(messages.continueWithProvider, { provider: provider.name })
-							"
-							@click="onOAuthProviderClick(provider.id)"
+					<ButtonLink
+						v-for="provider in oauthProviders"
+						:key="provider.id"
+						class="relative w-full !justify-center overflow-visible"
+						:class="{
+							'!border !border-[var(--color-green)]': lastSignInProvider === provider.id,
+						}"
+						:href="getAuthUrl(provider.id, redirectTarget)"
+						:aria-label="formatMessage(messages.continueWithProvider, { provider: provider.name })"
+						@click="onOAuthProviderClick(provider.id)"
+					>
+						<component :is="provider.icon" />
+						<span>{{ provider.name }}</span>
+						<span
+							v-if="lastSignInProvider === provider.id"
+							class="oauth-provider-last-sign-in-badge"
 						>
-							<component :is="provider.icon" />
-							<span>{{ provider.name }}</span>
-							<span
-								v-if="lastSignInProvider === provider.id"
-								class="oauth-provider-last-sign-in-badge"
-							>
-								{{ formatMessage(messages.lastSignInLabel) }}
-							</span>
-						</a>
-					</ButtonStyled>
-					<ButtonStyled>
-						<a
-							class="relative w-full !justify-center overflow-visible !shadow-none sm:col-span-2"
-							:class="{ '!border !border-[var(--color-green)]': lastSignInProvider === 'passkey' }"
-							role="button"
-							tabindex="0"
-							@click="onPasskeySignIn"
-							@keydown.enter="onPasskeySignIn"
-						>
-							<UserKeyIcon />
-							<span class="ml-1">{{ formatMessage(messages.continueWithPasskey) }}</span>
-							<span
-								v-if="lastSignInProvider === 'passkey'"
-								class="oauth-provider-last-sign-in-badge"
-							>
-								{{ formatMessage(messages.lastSignInLabel) }}
-							</span>
-						</a>
-					</ButtonStyled>
+							{{ formatMessage(messages.lastSignInLabel) }}
+						</span>
+					</ButtonLink>
+					<Button
+						class="relative !w-full !justify-center overflow-visible sm:col-span-2"
+						:class="{ '!border !border-[var(--color-green)]': lastSignInProvider === 'passkey' }"
+						role="button"
+						tabindex="0"
+						@click="onPasskeySignIn"
+						@keydown.enter="onPasskeySignIn"
+					>
+						<UserKeyIcon />
+						<span class="ml-1">{{ formatMessage(messages.continueWithPasskey) }}</span>
+						<span v-if="lastSignInProvider === 'passkey'" class="oauth-provider-last-sign-in-badge">
+							{{ formatMessage(messages.lastSignInLabel) }}
+						</span>
+					</Button>
 				</section>
 
 				<div class="h-px w-full bg-surface-5"></div>
@@ -117,15 +108,15 @@
 						v-model="tokenModel"
 					/>
 
-					<ButtonStyled color="brand">
-						<button
-							class="!w-full"
-							:disabled="globals?.captcha_enabled ? !tokenModel : false"
-							@click="onPasswordSignIn()"
-						>
-							{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="brand"
+						class="!w-full"
+						:disabled="globals?.captcha_enabled ? !tokenModel : false"
+						@click="onPasswordSignIn()"
+					>
+						{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
+					</Button>
 
 					<div class="flex flex-wrap items-center justify-center gap-2.5 !text-base">
 						<NuxtLink
@@ -167,7 +158,14 @@ import {
 	SteamColorIcon,
 	UserKeyIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
+import {
+	Button,
+	ButtonLink,
+	commonMessages,
+	defineMessages,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 import type { LocationQuery } from 'vue-router'
diff --git a/apps/frontend/src/components/ui/auth/SignUp.vue b/apps/frontend/src/components/ui/auth/SignUp.vue
index 9da5b7371e..4ecbf17341 100644
--- a/apps/frontend/src/components/ui/auth/SignUp.vue
+++ b/apps/frontend/src/components/ui/auth/SignUp.vue
@@ -6,67 +6,49 @@
 			{{ formatMessage(messages.signUpWithTitle) }}
 		</div>
 		<section class="flex flex-col gap-2.5">
-			<ButtonStyled>
-				<a
-					class="!shadow-none"
-					:href="getAuthUrl('google', redirectTarget)"
-					@click="onOAuthProviderClick('google')"
-				>
-					<GoogleColorIcon />
-					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Google' }) }}</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a
-					class="!shadow-none"
-					:href="getAuthUrl('microsoft', redirectTarget)"
-					@click="onOAuthProviderClick('microsoft')"
-				>
-					<MicrosoftColorIcon />
-					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Microsoft' }) }}</span>
-				</a>
-			</ButtonStyled>
-			<ButtonStyled>
-				<a
-					class="!shadow-none"
-					:href="getAuthUrl('discord', redirectTarget)"
-					@click="onOAuthProviderClick('discord')"
-				>
-					<DiscordColorIcon />
-					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Discord' }) }}</span>
-				</a>
-			</ButtonStyled>
+			<ButtonLink
+				:href="getAuthUrl('google', redirectTarget)"
+				@click="onOAuthProviderClick('google')"
+			>
+				<GoogleColorIcon />
+				<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Google' }) }}</span>
+			</ButtonLink>
+			<ButtonLink
+				:href="getAuthUrl('microsoft', redirectTarget)"
+				@click="onOAuthProviderClick('microsoft')"
+			>
+				<MicrosoftColorIcon />
+				<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Microsoft' }) }}</span>
+			</ButtonLink>
+			<ButtonLink
+				:href="getAuthUrl('discord', redirectTarget)"
+				@click="onOAuthProviderClick('discord')"
+			>
+				<DiscordColorIcon />
+				<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Discord' }) }}</span>
+			</ButtonLink>
 			<template v-if="showOtherOptions">
-				<ButtonStyled>
-					<a
-						class="!shadow-none"
-						:href="getAuthUrl('github', redirectTarget)"
-						@click="onOAuthProviderClick('github')"
-					>
-						<GitHubColorIcon />
-						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitHub' }) }}</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a
-						class="!shadow-none"
-						:href="getAuthUrl('gitlab', redirectTarget)"
-						@click="onOAuthProviderClick('gitlab')"
-					>
-						<GitLabColorIcon />
-						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitLab' }) }}</span>
-					</a>
-				</ButtonStyled>
-				<ButtonStyled>
-					<a
-						class="!shadow-none"
-						:href="getAuthUrl('steam', redirectTarget)"
-						@click="onOAuthProviderClick('steam')"
-					>
-						<SteamColorIcon />
-						<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Steam' }) }}</span>
-					</a>
-				</ButtonStyled>
+				<ButtonLink
+					:href="getAuthUrl('github', redirectTarget)"
+					@click="onOAuthProviderClick('github')"
+				>
+					<GitHubColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitHub' }) }}</span>
+				</ButtonLink>
+				<ButtonLink
+					:href="getAuthUrl('gitlab', redirectTarget)"
+					@click="onOAuthProviderClick('gitlab')"
+				>
+					<GitLabColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'GitLab' }) }}</span>
+				</ButtonLink>
+				<ButtonLink
+					:href="getAuthUrl('steam', redirectTarget)"
+					@click="onOAuthProviderClick('steam')"
+				>
+					<SteamColorIcon />
+					<span>{{ formatMessage(messages.continueWithProvider, { provider: 'Steam' }) }}</span>
+				</ButtonLink>
 			</template>
 			<button
 				class="mx-auto -mb-3 bg-transparent pt-1 text-center text-base font-semibold text-secondary transition-all hover:text-primary"
@@ -105,15 +87,15 @@
 				wrapper-class="w-full"
 			/>
 
-			<ButtonStyled color="brand">
-				<button
-					class="!w-full"
-					:disabled="!emailModel || !passwordModel"
-					@click="onContinueWithEmail()"
-				>
-					{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
-				</button>
-			</ButtonStyled>
+			<Button
+				type="colored"
+				color="brand"
+				class="!w-full"
+				:disabled="!emailModel || !passwordModel"
+				@click="onContinueWithEmail()"
+			>
+				{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
+			</Button>
 
 			<p v-if="!routeQuery.launcher" class="m-0 text-center">
 				<IntlFormatted :message-id="messages.legalDisclaimer">
@@ -159,7 +141,8 @@ import {
 	SteamColorIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
diff --git a/apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue b/apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue
index e03b7d370c..369c7e5471 100644
--- a/apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue
+++ b/apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { XCircleIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
+import { Button, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 const flags = useFeatureFlags()
@@ -57,18 +57,19 @@ function alwaysIgnoreBanner() {
 			}}
 		</template>
 		<template #actions_right>
-			<ButtonStyled color="red" type="transparent" hover-color-fill="background">
-				<button @click="alwaysIgnoreBanner">
-					<XCircleIcon />
-					{{ formatMessage(messages.alwaysIgnore) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled color="red">
-				<button @click="tempIgnored = true">
-					<XIcon />
-					{{ formatMessage(messages.ignoreErrors) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				type="quiet"
+				color="red"
+				class="hover:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!bg-red focus-visible:!text-[var(--color-accent-contrast)]"
+				@click="alwaysIgnoreBanner"
+			>
+				<XCircleIcon />
+				{{ formatMessage(messages.alwaysIgnore) }}
+			</Button>
+			<Button type="colored" color="red" @click="tempIgnored = true">
+				<XIcon />
+				{{ formatMessage(messages.ignoreErrors) }}
+			</Button>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/banner/PreviewBanner.vue b/apps/frontend/src/components/ui/banner/PreviewBanner.vue
index d6d2463a9e..c8bf522d65 100644
--- a/apps/frontend/src/components/ui/banner/PreviewBanner.vue
+++ b/apps/frontend/src/components/ui/banner/PreviewBanner.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	defineMessages,
+	IconButton,
 	IntlFormatted,
 	PagewideBanner,
 	useVIntl,
@@ -70,11 +70,13 @@ const url = computed(() => `https://modrinth.com${route.fullPath}`)
 			</span>
 		</template>
 		<template #actions_top_right>
-			<ButtonStyled type="transparent" circular>
-				<button :aria-label="formatMessage(commonMessages.closeButton)" @click="hidePreviewBanner">
-					<XIcon aria-hidden="true" />
-				</button>
-			</ButtonStyled>
+			<IconButton
+				type="quiet"
+				:label="formatMessage(commonMessages.closeButton)"
+				@click="hidePreviewBanner"
+			>
+				<XIcon aria-hidden="true" />
+			</IconButton>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/banner/RussiaBanner.vue b/apps/frontend/src/components/ui/banner/RussiaBanner.vue
index 35f426f217..23478bfe6c 100644
--- a/apps/frontend/src/components/ui/banner/RussiaBanner.vue
+++ b/apps/frontend/src/components/ui/banner/RussiaBanner.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { BookTextIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, commonMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
+import { ButtonLink, commonMessages, IconButton, PagewideBanner, useVIntl } from '@modrinth/ui'
 
 const flags = useFeatureFlags()
 const { formatMessage } = useVIntl()
@@ -41,29 +41,25 @@ function hideRussiaCensorshipBanner() {
 		</template>
 		<template #actions>
 			<div class="mt-2 flex w-fit gap-2">
-				<ButtonStyled color="brand">
-					<nuxt-link to="/news/article/standing-by-our-values-russian">
-						<BookTextIcon /> Прочесть наше полное заявление
-						<span class="text-xs font-medium">(Перевод на русский)</span>
-					</nuxt-link>
-				</ButtonStyled>
-				<ButtonStyled type="transparent" hover-color-fill="background">
-					<nuxt-link to="/news/article/standing-by-our-values">
-						<BookTextIcon /> Read our full statement
-						<span class="text-xs font-medium">(English)</span>
-					</nuxt-link>
-				</ButtonStyled>
+				<ButtonLink type="colored" color="brand" to="/news/article/standing-by-our-values-russian">
+					<BookTextIcon /> Прочесть наше полное заявление
+					<span class="text-xs font-medium">(Перевод на русский)</span>
+				</ButtonLink>
+				<ButtonLink type="quiet" to="/news/article/standing-by-our-values">
+					<BookTextIcon /> Read our full statement
+					<span class="text-xs font-medium">(English)</span>
+				</ButtonLink>
 			</div>
 		</template>
 		<template #actions_top_right>
-			<ButtonStyled circular type="transparent">
-				<button
-					v-tooltip="formatMessage(commonMessages.closeButton)"
-					@click="hideRussiaCensorshipBanner"
-				>
-					<XIcon :aria-label="formatMessage(commonMessages.closeButton)" />
-				</button>
-			</ButtonStyled>
+			<IconButton
+				v-tooltip="formatMessage(commonMessages.closeButton)"
+				type="quiet"
+				:label="formatMessage(commonMessages.closeButton)"
+				@click="hideRussiaCensorshipBanner"
+			>
+				<XIcon :aria-label="formatMessage(commonMessages.closeButton)" />
+			</IconButton>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/banner/StagingBanner.vue b/apps/frontend/src/components/ui/banner/StagingBanner.vue
index 0f699793c9..0d33d6c8e7 100644
--- a/apps/frontend/src/components/ui/banner/StagingBanner.vue
+++ b/apps/frontend/src/components/ui/banner/StagingBanner.vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	PagewideBanner,
-	useVIntl,
-} from '@modrinth/ui'
+import { commonMessages, defineMessages, IconButton, PagewideBanner, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 const cosmetics = useCosmetics()
@@ -38,11 +32,13 @@ function hideStagingBanner() {
 			{{ formatMessage(messages.description) }}
 		</template>
 		<template #actions_top_right>
-			<ButtonStyled type="transparent" circular>
-				<button :aria-label="formatMessage(commonMessages.closeButton)" @click="hideStagingBanner">
-					<XIcon aria-hidden="true" />
-				</button>
-			</ButtonStyled>
+			<IconButton
+				type="quiet"
+				:label="formatMessage(commonMessages.closeButton)"
+				@click="hideStagingBanner"
+			>
+				<XIcon aria-hidden="true" />
+			</IconButton>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue b/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
index d53ba3a264..872799edb5 100644
--- a/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
+++ b/apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SettingsIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
+import { ButtonLink, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 
@@ -30,12 +30,10 @@ const messages = defineMessages({
 			<span>{{ formatMessage(messages.description) }}</span>
 		</template>
 		<template #actions_right>
-			<ButtonStyled color="red">
-				<nuxt-link to="/settings/billing">
-					<SettingsIcon aria-hidden="true" />
-					{{ formatMessage(messages.action) }}
-				</nuxt-link>
-			</ButtonStyled>
+			<ButtonLink type="colored" color="red" to="/settings/billing">
+				<SettingsIcon aria-hidden="true" />
+				{{ formatMessage(messages.action) }}
+			</ButtonLink>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue b/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
index b40dc5be71..fbccea2ccc 100644
--- a/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
+++ b/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { FileTextIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	defineMessages,
-	PagewideBanner,
-	useFormatMoney,
-	useVIntl,
-} from '@modrinth/ui'
+import { Button, defineMessages, PagewideBanner, useFormatMoney, useVIntl } from '@modrinth/ui'
 import { computed } from 'vue'
 
 import { getTaxThreshold } from '@/providers/creator-withdraw.ts'
@@ -56,9 +50,9 @@ function openTaxForm(e: MouseEvent) {
 			}}</span>
 		</template>
 		<template #actions_right>
-			<ButtonStyled color="orange">
-				<button @click="openTaxForm"><FileTextIcon /> {{ formatMessage(messages.action) }}</button>
-			</ButtonStyled>
+			<Button type="colored" color="orange" @click="openTaxForm"
+				><FileTextIcon /> {{ formatMessage(messages.action) }}</Button
+			>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue b/apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue
index 50b2996f2f..996696d0cb 100644
--- a/apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue
+++ b/apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { MessageIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
+import { ButtonLink, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
 
 const { formatMessage } = useVIntl()
 
@@ -31,12 +31,16 @@ const messages = defineMessages({
 		</template>
 		<template #actions_right>
 			<div class="flex w-fit flex-row">
-				<ButtonStyled color="red">
-					<nuxt-link to="https://support.modrinth.com" target="_blank" rel="noopener">
-						<MessageIcon />
-						{{ formatMessage(messages.action) }}
-					</nuxt-link>
-				</ButtonStyled>
+				<ButtonLink
+					type="colored"
+					color="red"
+					to="https://support.modrinth.com"
+					target="_blank"
+					rel="noopener"
+				>
+					<MessageIcon />
+					{{ formatMessage(messages.action) }}
+				</ButtonLink>
 			</div>
 		</template>
 	</PagewideBanner>
diff --git a/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue b/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
index eb00ae63cd..c9f7f2b79c 100644
--- a/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
+++ b/apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { SettingsIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	defineMessages,
 	injectNotificationManager,
 	PagewideBanner,
@@ -97,15 +98,13 @@ async function handleResendEmailVerification() {
 			</span>
 		</template>
 		<template #actions_right>
-			<ButtonStyled color="orange">
-				<button v-if="hasEmail" @click="handleResendEmailVerification">
-					{{ formatMessage(verifyEmailBannerMessages.action) }}
-				</button>
-				<nuxt-link v-else to="/settings/account">
-					<SettingsIcon aria-hidden="true" />
-					{{ formatMessage(addEmailBannerMessages.action) }}
-				</nuxt-link>
-			</ButtonStyled>
+			<Button v-if="hasEmail" type="colored" color="orange" @click="handleResendEmailVerification">
+				{{ formatMessage(verifyEmailBannerMessages.action) }}
+			</Button>
+			<ButtonLink v-else type="colored" color="orange" to="/settings/account">
+				<SettingsIcon aria-hidden="true" />
+				{{ formatMessage(addEmailBannerMessages.action) }}
+			</ButtonLink>
 		</template>
 	</PagewideBanner>
 </template>
diff --git a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
index e6874350f2..e369597d61 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
@@ -25,11 +25,9 @@
 		</div>
 
 		<div v-if="!hideRemove" class="flex shrink-0 items-center justify-end gap-1">
-			<ButtonStyled size="standard" :circular="true">
-				<button aria-label="Remove file" class="-mr-2 !shadow-none" @click="emitRemove">
-					<XIcon aria-hidden="true" />
-				</button>
-			</ButtonStyled>
+			<Button aria-label="Remove file" class="-mr-2" @click="emitRemove">
+				<XIcon aria-hidden="true" />
+			</Button>
 		</div>
 	</div>
 </template>
@@ -37,7 +35,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { XIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, TagItem } from '@modrinth/ui'
+import { Avatar, Button, TagItem } from '@modrinth/ui'
 
 const emit = defineEmits<{
 	(e: 'fileTypeChange', type: string): void
diff --git a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
index c921513b43..31383eb25e 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
@@ -26,36 +26,60 @@
 			<div v-for="group in groupedGameVersions" :key="group.key" class="space-y-1.5">
 				<span class="font-semibold">{{ group.key }}</span>
 				<div class="flex flex-wrap gap-2 gap-x-1.5">
-					<ButtonStyled
+					<Button
 						v-for="version in group.versions"
 						:key="version"
+						:type="
+							modelValue.includes(version) || (holdingShift && version === anchorVersion)
+								? 'colored'
+								: 'base'
+						"
 						:color="
-							holdingShift && version === anchorVersion
+							(holdingShift && version === anchorVersion
 								? 'purple'
 								: modelValue.includes(version)
 									? 'green'
-									: 'standard'
+									: 'standard') &&
+							(holdingShift && version === anchorVersion
+								? 'purple'
+								: modelValue.includes(version)
+									? 'green'
+									: 'standard') !== 'standard'
+								? (holdingShift && version === anchorVersion
+										? 'purple'
+										: modelValue.includes(version)
+											? 'green'
+											: 'standard') === 'medal-promo'
+									? 'medal_promotion'
+									: holdingShift && version === anchorVersion
+										? 'purple'
+										: modelValue.includes(version)
+											? 'green'
+											: 'standard'
+								: undefined
 						"
-						:highlighted="modelValue.includes(version)"
-						type="chip"
-					>
-						<button
-							class="!py-1.5 focus:outline-none"
-							:class="[
+						class="!py-1.5 focus:outline-none"
+						:class="[
+							[
 								versionType === 'all' && !group.isReleaseGroup ? 'w-max' : 'w-16',
 								modelValue.includes(version) ? '!text-contrast' : '',
-							]"
-							:disabled="disabled"
-							@click="() => handleToggleVersion(version)"
-							@blur="
-								() => {
-									if (!holdingShift) anchorVersion = ''
-								}
-							"
-						>
-							{{ version }}
-						</button>
-					</ButtonStyled>
+							],
+							modelValue.includes(version)
+								? true
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: '',
+						]"
+						:disabled="disabled"
+						@click="() => handleToggleVersion(version)"
+						@blur="
+							() => {
+								if (!holdingShift) anchorVersion = ''
+							}
+						"
+					>
+						{{ version }}
+					</Button>
 				</div>
 			</div>
 
@@ -68,7 +92,7 @@
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
 import { SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, Chips, StyledInput } from '@modrinth/ui'
+import { Button, Chips, StyledInput } from '@modrinth/ui'
 import { useMagicKeys } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref } from 'vue'
 
diff --git a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
index d7092beadd..719c84c3fc 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
@@ -26,11 +26,9 @@
 		</div>
 
 		<div class="flex shrink-0 items-center justify-end gap-1">
-			<ButtonStyled size="standard" :circular="true" type="transparent">
-				<button aria-label="Add dependency" class="!shadow-none" @click="emitAddSuggestion">
-					<PlusIcon aria-hidden="true" />
-				</button>
-			</ButtonStyled>
+			<Button type="quiet" aria-label="Add dependency" @click="emitAddSuggestion">
+				<PlusIcon aria-hidden="true" />
+			</Button>
 		</div>
 	</div>
 </template>
@@ -38,7 +36,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { PlusIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, TagItem } from '@modrinth/ui'
+import { Avatar, Button, TagItem } from '@modrinth/ui'
 
 const emit = defineEmits<{
 	(e: 'onAddSuggestion'): void
diff --git a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
index bc74a25977..486561dcb7 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
@@ -27,39 +27,36 @@
 				</div>
 			</template>
 
-			<ButtonStyled v-if="onRemove" size="standard" :circular="true">
-				<button aria-label="Remove file" class="!shadow-none" @click="onRemove">
-					<XIcon aria-hidden="true" />
-				</button>
-			</ButtonStyled>
-			<ButtonStyled v-if="isPrimary" size="standard" :circular="true">
-				<button
-					v-tooltip="
-						editingVersion
-							? 'Primary file cannot be changed after version is uploaded'
-							: 'Replace primary file'
-					"
-					aria-label="Change primary file"
-					class="!shadow-none"
+			<IconButton v-if="onRemove" label="Remove file" type="quiet" @click="onRemove">
+				<XIcon aria-hidden="true" />
+			</IconButton>
+			<IconButton
+				v-if="isPrimary"
+				v-tooltip="
+					editingVersion
+						? 'Primary file cannot be changed after version is uploaded'
+						: 'Replace primary file'
+				"
+				label="Change primary file"
+				type="quiet"
+				:disabled="editingVersion"
+				@click="primaryFileInput?.click()"
+			>
+				<ArrowLeftRightIcon aria-hidden="true" />
+				<input
+					ref="primaryFileInput"
+					class="hidden"
+					type="file"
+					:accept="acceptFileFromProjectType(projectV2.project_type)"
 					:disabled="editingVersion"
-					@click="primaryFileInput?.click()"
-				>
-					<ArrowLeftRightIcon aria-hidden="true" />
-					<input
-						ref="primaryFileInput"
-						class="hidden"
-						type="file"
-						:accept="acceptFileFromProjectType(projectV2.project_type)"
-						:disabled="editingVersion"
-						@change="
-							(e) => {
-								emit('setPrimaryFile', (e.target as HTMLInputElement)?.files?.[0])
-								;(e.target as HTMLInputElement).value = ''
-							}
-						"
-					/>
-				</button>
-			</ButtonStyled>
+					@change="
+						(e) => {
+							emit('setPrimaryFile', (e.target as HTMLInputElement)?.files?.[0])
+							;(e.target as HTMLInputElement).value = ''
+						}
+					"
+				/>
+			</IconButton>
 		</div>
 	</div>
 </template>
@@ -67,7 +64,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { ArrowLeftRightIcon, CheckIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, Combobox, injectProjectPageContext } from '@modrinth/ui'
+import { Combobox, IconButton, injectProjectPageContext } from '@modrinth/ui'
 import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
 import { acceptFileFromProjectType } from '@modrinth/utils'
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
index a0ff8f6777..49b68dbc24 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
@@ -10,9 +10,7 @@
 		<div v-if="draftVersion.loaders.length" class="space-y-1">
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast"> Added loaders </span>
-				<ButtonStyled type="transparent" size="standard">
-					<button @click="onClearAll()">Clear all</button>
-				</ButtonStyled>
+				<Button type="quiet" @click="onClearAll()">Clear all</Button>
 			</div>
 			<div
 				class="flex flex-col gap-1.5 gap-y-4 rounded-xl border border-solid border-surface-5 p-3 py-4"
@@ -43,7 +41,7 @@
 
 <script lang="ts" setup>
 import { getLoaderIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, FormattedTag, TagItem } from '@modrinth/ui'
+import { Button, FormattedTag, TagItem } from '@modrinth/ui'
 
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
index d28345b782..240a7f1159 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
@@ -4,9 +4,7 @@
 		<div v-if="draftVersion.game_versions.length" class="space-y-1">
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast"> Added versions </span>
-				<ButtonStyled type="transparent" size="standard">
-					<button @click="clearAllVersions()">Clear all</button>
-				</ButtonStyled>
+				<Button type="quiet" @click="clearAllVersions()">Clear all</Button>
 			</div>
 			<div
 				class="flex max-h-56 flex-col gap-1.5 gap-y-4 overflow-y-auto rounded-xl border border-solid border-surface-5 p-3 py-4"
@@ -34,7 +32,7 @@
 
 <script lang="ts" setup>
 import { XIcon } from '@modrinth/assets'
-import { ButtonStyled, TagItem } from '@modrinth/ui'
+import { Button, TagItem } from '@modrinth/ui'
 
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 2cf9d26014..d0ead22318 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -11,12 +11,10 @@
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast">{{ formatMessage(messages.uploadedFiles) }}</span>
 
-				<ButtonStyled type="transparent" size="standard">
-					<button @click="editFiles">
-						<EditIcon />
-						{{ formatMessage(messages.editButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" @click="editFiles">
+					<EditIcon />
+					{{ formatMessage(messages.editButton) }}
+				</Button>
 			</div>
 			<div class="flex flex-col gap-2.5">
 				<ViewOnlyFileRow
@@ -50,22 +48,21 @@
 					}}
 				</span>
 
-				<ButtonStyled type="transparent" size="standard">
-					<button
-						v-tooltip="
-							isModpack
-								? formatMessage(messages.modpackLoadersTooltip)
-								: isResourcePack
-									? formatMessage(messages.resourcePackLoadersTooltip)
-									: undefined
-						"
-						:disabled="isModpack || isResourcePack"
-						@click="editLoaders"
-					>
-						<EditIcon />
-						{{ formatMessage(messages.editButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="
+						isModpack
+							? formatMessage(messages.modpackLoadersTooltip)
+							: isResourcePack
+								? formatMessage(messages.resourcePackLoadersTooltip)
+								: undefined
+					"
+					type="quiet"
+					:disabled="isModpack || isResourcePack"
+					@click="editLoaders"
+				>
+					<EditIcon />
+					{{ formatMessage(messages.editButton) }}
+				</Button>
 			</div>
 
 			<div
@@ -111,16 +108,15 @@
 					}}
 				</span>
 
-				<ButtonStyled type="transparent" size="standard">
-					<button
-						v-tooltip="isModpack ? formatMessage(messages.modpackVersionsTooltip) : undefined"
-						:disabled="isModpack"
-						@click="editVersions"
-					>
-						<EditIcon />
-						{{ formatMessage(messages.editButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="isModpack ? formatMessage(messages.modpackVersionsTooltip) : undefined"
+					type="quiet"
+					:disabled="isModpack"
+					@click="editVersions"
+				>
+					<EditIcon />
+					{{ formatMessage(messages.editButton) }}
+				</Button>
 			</div>
 
 			<div
@@ -152,12 +148,10 @@
 						<UnknownIcon v-tooltip="formatMessage(messages.prefilledEnvironmentTooltip)" />
 					</div>
 
-					<ButtonStyled type="transparent" size="standard">
-						<button @click="editEnvironment">
-							<EditIcon />
-							{{ formatMessage(messages.editButton) }}
-						</button>
-					</ButtonStyled>
+					<Button type="quiet" @click="editEnvironment">
+						<EditIcon />
+						{{ formatMessage(messages.editButton) }}
+					</Button>
 				</div>
 
 				<div class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
@@ -183,12 +177,10 @@
 							formatMessage(messages.dependencies)
 						}}</span>
 
-						<ButtonStyled type="transparent" size="standard">
-							<button @click="addDependency">
-								<PlusIcon />
-								{{ formatMessage(messages.addDependency) }}
-							</button>
-						</ButtonStyled>
+						<Button type="quiet" @click="addDependency">
+							<PlusIcon />
+							{{ formatMessage(messages.addDependency) }}
+						</Button>
 					</div>
 
 					<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
@@ -215,8 +207,8 @@
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
 import { EditIcon, getLoaderIcon, PlusIcon, UnknownIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	defineMessages,
 	ENVIRONMENTS_COPY,
 	FormattedTag,
diff --git a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
index 50c4e96aae..3904ad76c2 100644
--- a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
@@ -38,18 +38,14 @@
 				{{ formatMessage(messages.collectionInfo, { count: projectIds.length }) }}
 			</p>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="modal.hide()">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="hasHitLimit" @click="create">
-						<PlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.createCollection) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal.hide()">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="hasHitLimit" @click="create">
+					<PlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.createCollection) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -57,7 +53,7 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index 1c628574fd..c4d717f4e2 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -13,11 +13,9 @@
 			<template v-if="hasHitLimit">
 				{{ formatMessage(messages.limitReachedDescription, { type: typeName.singular, max }) }}
 				<div class="w-min">
-					<ButtonStyled color="red">
-						<NuxtLink to="https://support.modrinth.com" target="_blank">
-							<MessageIcon />{{ formatMessage(messages.contactSupport) }}</NuxtLink
-						>
-					</ButtonStyled>
+					<ButtonLink type="colored" color="red" to="https://support.modrinth.com" target="_blank">
+						<MessageIcon />{{ formatMessage(messages.contactSupport) }}</ButtonLink
+					>
 				</div>
 			</template>
 			<template v-else>
@@ -29,11 +27,14 @@
 					})
 				}}
 				<div class="w-min">
-					<ButtonStyled color="orange">
-						<NuxtLink to="https://support.modrinth.com" target="_blank">
-							<MessageIcon />{{ formatMessage(messages.contactSupport) }}</NuxtLink
-						>
-					</ButtonStyled>
+					<ButtonLink
+						type="colored"
+						color="orange"
+						to="https://support.modrinth.com"
+						target="_blank"
+					>
+						<MessageIcon />{{ formatMessage(messages.contactSupport) }}</ButtonLink
+					>
 				</div>
 			</template>
 		</div>
@@ -44,7 +45,7 @@
 import { MessageIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	ButtonLink,
 	defineMessages,
 	injectModrinthClient,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index 687e2c2362..44009fc4d8 100644
--- a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
@@ -59,18 +59,14 @@
 				{{ formatMessage(messages.ownershipInfo) }}
 			</p>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="hasHitLimit" @click="createOrganization">
-						<PlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.createOrganization) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="hasHitLimit" @click="createOrganization">
+					<PlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.createOrganization) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -79,7 +75,7 @@
 <script setup lang="ts">
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index 0000146bb0..4bcd969178 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -111,18 +111,20 @@
 				<span>{{ formatMessage(messages.summaryDescription) }}</span>
 			</div>
 			<div class="flex justify-end gap-2.5">
-				<ButtonStyled type="outlined">
-					<button @click="cancel">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button v-tooltip="missingFieldsTooltip" :disabled="disableCreate" @click="createProject">
-						<PlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.createProject) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="cancel">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="missingFieldsTooltip"
+					type="colored"
+					color="brand"
+					:disabled="disableCreate"
+					@click="createProject"
+				>
+					<PlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.createProject) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -131,8 +133,8 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { OrganizationIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	Chips,
 	Combobox,
 	type ComboboxOption,
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index ef2cc08bc5..83ca57653d 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -81,16 +81,12 @@
 					</div>
 				</Transition>
 				<div class="mt-4 flex justify-end gap-3">
-					<ButtonStyled @click="handleCancel">
-						<button><XIcon /> {{ formatMessage(messages.cancel) }}</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button :disabled="!canContinue || loading" @click="continueForm">
-							{{ formatMessage(messages.continue) }}
-							<RightArrowIcon v-if="!loading" />
-							<SpinnerIcon v-else class="animate-spin" />
-						</button>
-					</ButtonStyled>
+					<Button @click="handleCancel"><XIcon /> {{ formatMessage(messages.cancel) }}</Button>
+					<Button :disabled="!canContinue || loading" @click="continueForm">
+						{{ formatMessage(messages.continue) }}
+						<RightArrowIcon v-if="!loading" />
+						<SpinnerIcon v-else class="animate-spin" />
+					</Button>
 				</div>
 			</div>
 
@@ -136,18 +132,19 @@
 					</span>
 				</div>
 				<div class="flex w-full flex-row justify-stretch gap-2">
-					<ButtonStyled>
-						<button class="w-full text-contrast" @click="handleClose">
-							{{ props.closeButtonText ?? formatMessage(messages.closeButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="green">
-						<button class="w-full text-contrast" @click="downloadTaxForm">
-							<DownloadIcon />{{
-								formatMessage(messages.downloadButton, { formType: determinedFormType })
-							}}
-						</button>
-					</ButtonStyled>
+					<Button class="w-full text-contrast" @click="handleClose">
+						{{ props.closeButtonText ?? formatMessage(messages.closeButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="green"
+						class="w-full text-contrast"
+						@click="downloadTaxForm"
+					>
+						<DownloadIcon />{{
+							formatMessage(messages.downloadButton, { formType: determinedFormType })
+						}}
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -165,7 +162,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	Chips,
 	commonMessages,
 	defineMessages,
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index a6fe5ae171..a814f0062e 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -58,39 +58,40 @@
 		</div>
 		<template #actions>
 			<div v-if="currentStage === 'completion'" class="mt-4 flex w-full gap-3">
-				<ButtonStyled>
-					<button class="w-full flex-1 text-contrast" @click="handleClose">
-						{{ formatMessage(commonMessages.closeButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button class="w-full flex-1 text-contrast" @click="handleViewTransactions">
-						{{ formatMessage(messages.transactionsButton) }}
-					</button>
-				</ButtonStyled>
+				<Button class="w-full flex-1 text-contrast" @click="handleClose">
+					{{ formatMessage(commonMessages.closeButton) }}
+				</Button>
+				<Button class="w-full flex-1 text-contrast" @click="handleViewTransactions">
+					{{ formatMessage(messages.transactionsButton) }}
+				</Button>
 			</div>
 			<div v-else class="mt-4 flex flex-col justify-end gap-2 sm:flex-row">
-				<ButtonStyled type="outlined">
-					<button :disabled="leftButtonConfig.disabled" @click="leftButtonConfig.handler">
-						<component :is="leftButtonConfig.icon" />
-						{{ leftButtonConfig.label }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled :color="rightButtonConfig.color">
-					<button :disabled="rightButtonConfig.disabled" @click="rightButtonConfig.handler">
-						<component
-							:is="rightButtonConfig.icon"
-							v-if="rightButtonConfig.iconPosition === 'before'"
-							:class="rightButtonConfig.iconClass"
-						/>
-						{{ rightButtonConfig.label }}
-						<component
-							:is="rightButtonConfig.icon"
-							v-if="rightButtonConfig.iconPosition === 'after'"
-							:class="rightButtonConfig.iconClass"
-						/>
-					</button>
-				</ButtonStyled>
+				<Button
+					type="outlined"
+					:disabled="leftButtonConfig.disabled"
+					@click="leftButtonConfig.handler"
+				>
+					<component :is="leftButtonConfig.icon" />
+					{{ leftButtonConfig.label }}
+				</Button>
+				<Button
+					:type="rightButtonConfig.color === 'standard' ? 'base' : 'colored'"
+					:color="rightButtonConfig.color === 'standard' ? undefined : rightButtonConfig.color"
+					:disabled="rightButtonConfig.disabled"
+					@click="rightButtonConfig.handler"
+				>
+					<component
+						:is="rightButtonConfig.icon"
+						v-if="rightButtonConfig.iconPosition === 'before'"
+						:class="rightButtonConfig.iconClass"
+					/>
+					{{ rightButtonConfig.label }}
+					<component
+						:is="rightButtonConfig.icon"
+						v-if="rightButtonConfig.iconPosition === 'after'"
+						:class="rightButtonConfig.iconClass"
+					/>
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -114,7 +115,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
diff --git a/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue b/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
index fb1b469d37..73fe4f82eb 100644
--- a/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
+++ b/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
@@ -26,11 +26,9 @@
 					<span class="font-semibold leading-tight">{{ item.label }}</span>
 				</template>
 			</Combobox>
-			<ButtonStyled>
-				<button class="px-4 py-2" :disabled="isDisabled" @click="setMaxAmount">
-					{{ formatMessage(commonMessages.maxButton) }}
-				</button>
-			</ButtonStyled>
+			<Button class="px-4 py-2" :disabled="isDisabled" @click="setMaxAmount">
+				{{ formatMessage(commonMessages.maxButton) }}
+			</Button>
 		</div>
 		<div>
 			<span class="my-1 mt-0 text-secondary">{{ formatMoney(safeMaxAmount) }} available.</span>
@@ -50,7 +48,7 @@
 
 <script setup lang="ts">
 import {
-	ButtonStyled,
+	Button,
 	Combobox,
 	commonMessages,
 	formFieldPlaceholders,
diff --git a/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue b/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
index 5370e1afd4..bf38b28340 100644
--- a/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
+++ b/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
@@ -55,10 +55,14 @@
 						no-auto-focus
 					>
 						<span class="my-auto align-middle"
-							><ButtonStyled circular type="outlined" size="small">
-								<button class="align-middle" @click="cancelPayout">
-									<XIcon />
-								</button> </ButtonStyled
+							><IconButton
+								type="outlined"
+								size="xs"
+								label="Button"
+								class="!size-6 align-middle"
+								@click="cancelPayout"
+							>
+								<XIcon /> </IconButton
 						></span>
 						<template #popper>
 							<div class="font-semibold text-contrast">Cancel transaction</div>
@@ -82,8 +86,8 @@ import {
 } from '@modrinth/assets'
 import {
 	BulletDivider,
-	ButtonStyled,
 	getCurrencyIcon,
+	IconButton,
 	injectNotificationManager,
 	useFormatDateTime,
 	useFormatMoney,
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
index 24974b3bba..31d1d3b089 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
@@ -8,17 +8,18 @@
 			</label>
 
 			<div class="flex flex-col gap-2">
-				<ButtonStyled v-if="!isPayPalAuthenticated" color="standard">
-					<a :href="paypalAuthUrl" class="w-min" @click="handlePayPalAuth">
-						<PayPalColorIcon class="size-5" />
-						{{ formatMessage(messages.signInWithPaypal) }}
-					</a>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button class="w-min" @click="handleDisconnectPaypal">
-						<XIcon /> {{ formatMessage(messages.disconnectButton) }}
-					</button>
-				</ButtonStyled>
+				<ButtonLink
+					v-if="!isPayPalAuthenticated"
+					:href="paypalAuthUrl"
+					class="w-min"
+					@click="handlePayPalAuth"
+				>
+					<PayPalColorIcon class="size-5" />
+					{{ formatMessage(messages.signInWithPaypal) }}
+				</ButtonLink>
+				<Button v-else class="w-min" @click="handleDisconnectPaypal">
+					<XIcon /> {{ formatMessage(messages.disconnectButton) }}
+				</Button>
 			</div>
 		</div>
 
@@ -46,21 +47,21 @@
 					:placeholder="formatMessage(messages.venmoHandlePlaceholder)"
 					wrapper-class="w-full"
 				/>
-				<ButtonStyled color="brand">
-					<button
-						v-tooltip="!hasVenmoChanged ? 'Change the venmo username to save.' : undefined"
-						:disabled="venmoSaving || !hasVenmoChanged"
-						@click="saveVenmoHandle"
-					>
-						<CheckIcon v-if="venmoSaveSuccess" />
-						<SaveIcon v-else />
-						{{
-							venmoSaveSuccess
-								? formatMessage(commonMessages.savedLabel)
-								: formatMessage(commonMessages.saveButton)
-						}}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="!hasVenmoChanged ? 'Change the venmo username to save.' : undefined"
+					type="colored"
+					color="brand"
+					:disabled="venmoSaving || !hasVenmoChanged"
+					@click="saveVenmoHandle"
+				>
+					<CheckIcon v-if="venmoSaveSuccess" />
+					<SaveIcon v-else />
+					{{
+						venmoSaveSuccess
+							? formatMessage(commonMessages.savedLabel)
+							: formatMessage(commonMessages.saveButton)
+					}}
+				</Button>
 			</div>
 			<span v-if="venmoSaveError" class="text-sm font-bold text-red">
 				{{ venmoSaveError }}
@@ -104,7 +105,8 @@
 <script setup lang="ts">
 import { CheckIcon, PayPalColorIcon, SaveIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	Checkbox,
 	commonMessages,
 	defineMessages,
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
index 39a84d8085..16fae7fe2c 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
@@ -51,26 +51,29 @@
 					<SpinnerIcon class="size-8 animate-spin text-contrast" />
 				</div>
 				<template v-else>
-					<ButtonStyled
+					<Button
 						v-for="method in paymentOptions"
 						:key="method.value"
-						:color="withdrawData.selection.method === method.value ? 'green' : 'standard'"
-						:highlighted="withdrawData.selection.method === method.value"
-						type="chip"
+						:type="withdrawData.selection.method === method.value ? 'colored' : 'base'"
+						:color="withdrawData.selection.method === method.value ? 'green' : undefined"
+						class="!justify-start !gap-2 !text-left sm:!h-10"
+						:class="
+							withdrawData.selection.method === method.value
+								? true
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
+						"
+						@click="handleMethodSelection(method)"
 					>
-						<button
-							class="!justify-start !gap-2 !text-left sm:!h-10"
-							@click="handleMethodSelection(method)"
-						>
-							<component :is="method.icon" class="shrink-0" />
-							<span class="flex-1 truncate text-sm sm:text-[1rem]">
-								{{ typeof method.label === 'string' ? method.label : formatMessage(method.label) }}
-							</span>
-							<span class="ml-auto shrink-0 text-xs font-normal text-secondary sm:text-sm">{{
-								method.fee
-							}}</span>
-						</button>
-					</ButtonStyled>
+						<component :is="method.icon" class="shrink-0" />
+						<span class="flex-1 truncate text-sm sm:text-[1rem]">
+							{{ typeof method.label === 'string' ? method.label : formatMessage(method.label) }}
+						</span>
+						<span class="ml-auto shrink-0 text-xs font-normal text-secondary sm:text-sm">{{
+							method.fee
+						}}</span>
+					</Button>
 				</template>
 			</div>
 		</div>
@@ -81,7 +84,7 @@
 import { SpinnerIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	Combobox,
 	defineMessages,
 	injectNotificationManager,
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
index 1dfb05ad42..68fd8995bb 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
@@ -47,11 +47,9 @@
 					<FileTextIcon :class="iconClass" />
 				</template>
 				<template #actions>
-					<ButtonStyled color="orange">
-						<button @click="showTaxFormModal">
-							{{ formatMessage(messages.completeTaxForm) }}
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="orange" @click="showTaxFormModal">
+						{{ formatMessage(messages.completeTaxForm) }}
+					</Button>
 				</template>
 			</Admonition>
 		</template>
@@ -76,7 +74,7 @@
 import { FileTextIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	defineMessages,
 	IntlFormatted,
 	normalizeChildren,
diff --git a/apps/frontend/src/components/ui/moderation/BatchScanProgressAlert.vue b/apps/frontend/src/components/ui/moderation/BatchScanProgressAlert.vue
index a0cc693637..0ea7a3f994 100644
--- a/apps/frontend/src/components/ui/moderation/BatchScanProgressAlert.vue
+++ b/apps/frontend/src/components/ui/moderation/BatchScanProgressAlert.vue
@@ -7,9 +7,12 @@
 				<span class="text-xl font-semibold">Batch scan in progress</span>
 				<span>{{ progress?.complete }} of {{ progress?.total }} projects completed</span>
 			</div>
-			<ButtonStyled circular color="blue" type="outlined">
-				<button class="!px-4" @click="emit('cancel-scan')">Cancel scan</button>
-			</ButtonStyled>
+			<Button
+				type="outlined"
+				class="!rounded-full !px-4 !text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)] [&>svg]:!text-blue"
+				@click="emit('cancel-scan')"
+				>Cancel scan</Button
+			>
 		</div>
 		<div class="w-full rounded-full bg-highlight-blue">
 			<div
@@ -21,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 import { defineProps } from 'vue'
 
 export interface BatchScanProgress {
diff --git a/apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue b/apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue
index a6756ce443..4a368d2d77 100644
--- a/apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue
+++ b/apps/frontend/src/components/ui/moderation/GlobalDetailLocalTraceCard.vue
@@ -20,12 +20,10 @@
 					<span class="text-sm text-secondary">Local</span>
 					<Badge :type="trace.local_status" />
 				</template>
-				<ButtonStyled>
-					<NuxtLink :to="localTraceLink">
-						<ExternalIcon aria-hidden="true" />
-						View
-					</NuxtLink>
-				</ButtonStyled>
+				<ButtonLink :to="localTraceLink">
+					<ExternalIcon aria-hidden="true" />
+					View
+				</ButtonLink>
 			</div>
 		</div>
 	</div>
@@ -34,7 +32,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { ChevronRightIcon, ExternalIcon } from '@modrinth/assets'
-import { Badge, ButtonStyled } from '@modrinth/ui'
+import { Badge, ButtonLink } from '@modrinth/ui'
 
 const props = defineProps<{
 	trace: Labrinth.TechReview.Internal.GlobalIssueDetailTrace
diff --git a/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue b/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
index 8d42abbc1e..cd38f1c50f 100644
--- a/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
+++ b/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
@@ -10,12 +10,10 @@
 				clearable
 				wrapper-class="flex-1 w-full"
 			/>
-			<ButtonStyled color="brand">
-				<button type="submit" :disabled="isLoading">
-					<SearchIcon aria-hidden="true" />
-					Search
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" native-type="submit" :disabled="isLoading">
+				<SearchIcon aria-hidden="true" />
+				Search
+			</Button>
 		</form>
 
 		<div
@@ -71,15 +69,15 @@
 					</div>
 					<div class="flex shrink-0 flex-nowrap items-center gap-2">
 						<Badge :type="trace.verdict" />
-						<ButtonStyled color="red">
-							<button
-								:disabled="removingTraceKeys.has(trace.detail_key)"
-								@click="removeGlobalTrace(trace)"
-							>
-								<TrashIcon aria-hidden="true" />
-								Remove
-							</button>
-						</ButtonStyled>
+						<Button
+							type="colored"
+							color="red"
+							:disabled="removingTraceKeys.has(trace.detail_key)"
+							@click="removeGlobalTrace(trace)"
+						>
+							<TrashIcon aria-hidden="true" />
+							Remove
+						</Button>
 					</div>
 				</div>
 
@@ -89,14 +87,13 @@
 							Showing {{ getPreviewLocalTraces(trace).length }} of
 							{{ formatTraceCount(getVisibleLocalTraceTotal(trace)) }}
 						</p>
-						<ButtonStyled
+						<ButtonLink
 							v-if="getVisibleLocalTraceTotal(trace) > getPreviewLocalTraces(trace).length"
+							:to="getGlobalTraceLink(trace)"
 						>
-							<NuxtLink :to="getGlobalTraceLink(trace)">
-								<ListIcon aria-hidden="true" />
-								View all
-							</NuxtLink>
-						</ButtonStyled>
+							<ListIcon aria-hidden="true" />
+							View all
+						</ButtonLink>
 					</div>
 					<GlobalDetailLocalTraceCard
 						v-for="localTrace in getPreviewLocalTraces(trace)"
@@ -124,7 +121,8 @@ import type { Labrinth } from '@modrinth/api-client'
 import { HashIcon, ListIcon, SearchIcon, TrashIcon } from '@modrinth/assets'
 import {
 	Badge,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	EmptyState,
 	injectModrinthClient,
 	injectNotificationManager,
diff --git a/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue b/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
index 6fbf188849..4d9be9942d 100644
--- a/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
+++ b/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { ClipboardCopyIcon, DownloadIcon, LoaderCircleIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, CopyCode, NewModal, useDebugLogger } from '@modrinth/ui'
+import { Button, ButtonLink, CopyCode, NewModal, useDebugLogger } from '@modrinth/ui'
 import { ref, useTemplateRef } from 'vue'
 
 export type UnsafeFile = {
@@ -134,16 +134,15 @@ defineExpose({ show, hide })
 								v-if="isHashLoading(item.file.version_id)"
 								class="size-4 animate-spin text-secondary"
 							/>
-							<ButtonStyled
+							<Button
 								v-else-if="getFileHash(item.file.version_id, item.file.file_id)"
-								size="small"
-								type="standard"
+								class="!h-6"
+								size="xs"
+								@click="copy(getFileHash(item.file.version_id, item.file.file_id)!)"
 							>
-								<button @click="copy(getFileHash(item.file.version_id, item.file.file_id)!)">
-									<ClipboardCopyIcon class="size-4" />
-									Copy
-								</button>
-							</ButtonStyled>
+								<ClipboardCopyIcon class="size-4" />
+								Copy
+							</Button>
 							<span v-else class="text-tertiary italic">N/A</span>
 						</td>
 						<td class="py-1 pr-2">
@@ -153,19 +152,21 @@ defineExpose({ show, hide })
 							<CopyCode :text="item.file.file_name" />
 						</td>
 						<td class="py-1 pr-2">
-							<ButtonStyled size="small" type="standard">
-								<button @click="copy(item.file.download_url)">
-									<ClipboardCopyIcon class="size-4" />
-									Copy
-								</button>
-							</ButtonStyled>
+							<Button class="!h-6" size="xs" @click="copy(item.file.download_url)">
+								<ClipboardCopyIcon class="size-4" />
+								Copy
+							</Button>
 						</td>
 						<td class="py-1">
-							<ButtonStyled circular size="small">
-								<a :href="item.file.download_url" :download="item.file.file_name" target="_blank">
-									<DownloadIcon />
-								</a>
-							</ButtonStyled>
+							<ButtonLink
+								size="xs"
+								:href="item.file.download_url"
+								:download="item.file.file_name"
+								target="_blank"
+								class="!size-6 !h-6 !rounded-full !px-0"
+							>
+								<DownloadIcon />
+							</ButtonLink>
 						</td>
 					</tr>
 				</tbody>
@@ -174,12 +175,10 @@ defineExpose({ show, hide })
 			<p v-else class="text-sm italic text-secondary">No files currently marked as malicious.</p>
 
 			<div class="flex justify-end">
-				<ButtonStyled>
-					<button @click="hide">
-						<XIcon class="size-4" />
-						Close
-					</button>
-				</ButtonStyled>
+				<Button @click="hide">
+					<XIcon class="size-4" />
+					Close
+				</Button>
 			</div>
 		</div>
 	</NewModal>
diff --git a/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue b/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
index 33a7dbf92e..9097dbace2 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue
@@ -23,11 +23,13 @@
 				</div>
 			</div>
 			<div class="input-group">
-				<ButtonStyled circular>
-					<button :class="{ '[&>svg]:rotate-180': !collapsed }" @click="$emit('toggleCollapsed')">
-						<DropdownIcon class="duration-250 transition-transform ease-in-out" />
-					</button>
-				</ButtonStyled>
+				<IconButton
+					label="Toggle details"
+					:class="{ '[&>svg]:rotate-180': !collapsed }"
+					@click="$emit('toggleCollapsed')"
+				>
+					<DropdownIcon class="duration-250 transition-transform ease-in-out" />
+				</IconButton>
 			</div>
 		</div>
 		<div v-if="!collapsed" class="mt-4 grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-2">
@@ -61,21 +63,19 @@
 					{{ getFormattedMessage(nag.link.title) }}
 					<ChevronRightIcon aria-hidden="true" class="featured-header-chevron" />
 				</NuxtLink>
-				<ButtonStyled
+				<Button
 					v-if="nag.status === 'special-submit-action' && nag.id === 'submit-for-review'"
+					v-tooltip="
+						!canSubmitForReview ? getFormattedMessage(messages.submitChecklistTooltip) : undefined
+					"
+					type="colored"
 					color="orange"
+					:disabled="!canSubmitForReview"
 					@click="submitForReview"
 				>
-					<button
-						v-tooltip="
-							!canSubmitForReview ? getFormattedMessage(messages.submitChecklistTooltip) : undefined
-						"
-						:disabled="!canSubmitForReview"
-					>
-						<SendIcon />
-						{{ getFormattedMessage(messages.submitForReviewButton) }}
-					</button>
-				</ButtonStyled>
+					<SendIcon />
+					{{ getFormattedMessage(messages.submitForReviewButton) }}
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -94,7 +94,8 @@ import {
 } from '@modrinth/assets'
 import type { Nag, NagContext, NagStatus } from '@modrinth/moderation'
 import { nags } from '@modrinth/moderation'
-import { ButtonStyled, defineMessages, type MessageDescriptor, useVIntl } from '@modrinth/ui'
+import { Button, IconButton } from '@modrinth/ui'
+import { defineMessages, type MessageDescriptor, useVIntl } from '@modrinth/ui'
 import type { Component } from 'vue'
 import { computed } from 'vue'
 
diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
index 61e0b9bc9c..7df3d9deb1 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
@@ -102,21 +102,21 @@
 				</span>
 
 				<div class="flex items-center gap-2">
-					<ButtonStyled circular>
-						<button v-tooltip="'Copy ID'" @click="copyId">
-							<ClipboardCopyIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<button v-tooltip="'Copy link'" @click="copyLink">
-							<LinkIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular color="orange">
-						<button v-tooltip="'Begin review'" @click="openProjectForReview">
-							<ScaleIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton v-tooltip="'Copy ID'" :label="'Copy ID'" @click="copyId">
+						<ClipboardCopyIcon />
+					</IconButton>
+					<IconButton v-tooltip="'Copy link'" :label="'Copy link'" @click="copyLink">
+						<LinkIcon />
+					</IconButton>
+					<IconButton
+						v-tooltip="'Begin review'"
+						type="colored"
+						color="orange"
+						:label="'Begin review'"
+						@click="openProjectForReview"
+					>
+						<ScaleIcon />
+					</IconButton>
 				</div>
 			</div>
 		</div>
@@ -128,8 +128,8 @@ import { ClipboardCopyIcon, FileIcon, LinkIcon, ScaleIcon } from '@modrinth/asse
 import {
 	Avatar,
 	Badge,
-	ButtonStyled,
 	getProjectTypeIcon,
+	IconButton,
 	injectNotificationManager,
 	useFormatDateTime,
 	useRelativeTime,
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 3566044b4b..115fa98e31 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -38,20 +38,17 @@
 						{{ formatRelativeTime(report.created) }}
 					</span>
 					<div class="flex items-center gap-2">
-						<ButtonStyled circular>
-							<button v-tooltip="'Copy ID'" @click="copyId">
-								<ClipboardCopyIcon />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<a
-								v-tooltip="'Open in new tab'"
-								:href="`/moderation/reports/${props.report.id}`"
-								target="_blank"
-							>
-								<ExternalIcon />
-							</a>
-						</ButtonStyled>
+						<IconButton v-tooltip="'Copy ID'" :label="'Copy ID'" @click="copyId">
+							<ClipboardCopyIcon />
+						</IconButton>
+						<ButtonLink
+							v-tooltip="'Open in new tab'"
+							:href="`/moderation/reports/${props.report.id}`"
+							target="_blank"
+							class="!w-9 !rounded-full !px-0"
+						>
+							<ExternalIcon />
+						</ButtonLink>
 					</div>
 				</div>
 			</div>
@@ -212,9 +209,7 @@
 									</span>
 									<span class="text-sm text-secondary">{{ sharedInstanceError }}</span>
 								</div>
-								<ButtonStyled type="outlined">
-									<button @click="loadSharedInstanceDetails">Try again</button>
-								</ButtonStyled>
+								<Button type="outlined" @click="loadSharedInstanceDetails">Try again</Button>
 							</div>
 							<SharedInstanceReportContext
 								v-else-if="sharedInstanceDetails"
@@ -227,27 +222,39 @@
 						</template>
 					</template>
 					<template #closedActions>
-						<ButtonStyled v-if="isStaff(auth.user)" color="green">
-							<button class="mt-2 w-full gap-2 sm:w-auto" @click="reopenReport()">
-								<CheckCircleIcon class="size-4" />
-								Reopen Thread
-							</button>
-						</ButtonStyled>
+						<Button
+							v-if="isStaff(auth.user)"
+							type="colored"
+							color="green"
+							class="mt-2 w-full gap-2 sm:w-auto"
+							@click="reopenReport()"
+						>
+							<CheckCircleIcon class="size-4" />
+							Reopen Thread
+						</Button>
 					</template>
 					<template #additionalActions="{ hasReply }">
 						<template v-if="isStaff(auth.user)">
-							<ButtonStyled v-if="hasReply" color="red">
-								<button class="w-full gap-2 sm:w-auto" @click="closeReport(true)">
-									<CheckCircleIcon class="size-4" />
-									Reply and close
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-else color="red">
-								<button class="w-full gap-2 sm:w-auto" @click="closeReport()">
-									<CheckCircleIcon class="size-4" />
-									Close report
-								</button>
-							</ButtonStyled>
+							<Button
+								v-if="hasReply"
+								type="colored"
+								color="red"
+								class="w-full gap-2 sm:w-auto"
+								@click="closeReport(true)"
+							>
+								<CheckCircleIcon class="size-4" />
+								Reply and close
+							</Button>
+							<Button
+								v-else
+								type="colored"
+								color="red"
+								class="w-full gap-2 sm:w-auto"
+								@click="closeReport()"
+							>
+								<CheckCircleIcon class="size-4" />
+								Close report
+							</Button>
 						</template>
 					</template>
 				</ThreadView>
@@ -265,9 +272,9 @@ import {
 	LockIcon,
 } from '@modrinth/assets'
 import { type ExtendedReport, reportQuickReplies } from '@modrinth/moderation'
+import { Button, ButtonLink, IconButton } from '@modrinth/ui'
 import {
 	Avatar,
-	ButtonStyled,
 	CollapsibleRegion,
 	type ContentItem,
 	CopyCode,
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index d328b054ed..0baa5864a0 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -22,9 +22,9 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import { type TechReviewContext, techReviewQuickReplies } from '@modrinth/moderation'
+import { Button, ButtonLink, IconButton, TeleportOverflowMenu } from '@modrinth/ui'
 import {
 	Avatar,
-	ButtonStyled,
 	Collapsible,
 	CollapsibleRegion,
 	commonMessages,
@@ -32,7 +32,6 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	NavTabs,
-	OverflowMenu,
 	type OverflowMenuOption,
 	Toggle,
 	useFormatBytes,
@@ -120,29 +119,32 @@ const isLoadingStatusAction = ref(false)
 const projectStatusActions = computed<OverflowMenuOption[]>(() => [
 	{
 		id: 'approve',
-		color: 'green',
-		action: () => setStatus('approved'),
+		label: 'Approve',
+		tone: 'green',
 		hoverFilled: true,
+		action: () => setStatus('approved'),
 		disabled: isStatusActionDisabled('approved'),
 	},
 	{
 		id: 'withhold',
-		color: 'orange',
-		action: () => setStatus('withheld'),
+		label: 'Withhold',
+		tone: 'orange',
 		hoverFilled: true,
+		action: () => setStatus('withheld'),
 		disabled: isStatusActionDisabled('withheld'),
 	},
 	{
 		id: 'send-to-review',
+		label: 'Send to review',
 		action: () => setStatus('processing'),
-		hoverFilled: true,
 		disabled: isStatusActionDisabled('processing'),
 	},
 	{
 		id: 'reject',
-		color: 'red',
-		action: () => setStatus('rejected'),
+		label: 'Reject',
+		tone: 'red',
 		hoverFilled: true,
+		action: () => setStatus('rejected'),
 		disabled: isStatusActionDisabled('rejected'),
 	},
 ])
@@ -1495,29 +1497,26 @@ function copyId() {
 				<div class="flex items-center gap-3">
 					<span class="text-base text-secondary">{{ formattedDate }}</span>
 					<div class="flex items-center gap-2">
-						<ButtonStyled v-if="props.item.project.link_urls?.['source']?.url" circular>
-							<a
-								v-tooltip="'Open sources in new tab'"
-								:href="props.item.project.link_urls?.['source']?.url"
-								target="_blank"
-							>
-								<CodeIcon />
-							</a>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<button v-tooltip="'Copy ID'" @click="copyId">
-								<ClipboardCopyIcon />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<a
-								v-tooltip="'Open in new tab'"
-								:href="`/moderation/technical-review/${props.item.project.id}`"
-								target="_blank"
-							>
-								<ExternalIcon />
-							</a>
-						</ButtonStyled>
+						<ButtonLink
+							v-if="props.item.project.link_urls?.['source']?.url"
+							v-tooltip="'Open sources in new tab'"
+							:href="props.item.project.link_urls?.['source']?.url"
+							target="_blank"
+							class="!w-9 !rounded-full !px-0"
+						>
+							<CodeIcon />
+						</ButtonLink>
+						<IconButton v-tooltip="'Copy ID'" :label="'Copy ID'" @click="copyId">
+							<ClipboardCopyIcon />
+						</IconButton>
+						<ButtonLink
+							v-tooltip="'Open in new tab'"
+							:href="`/moderation/technical-review/${props.item.project.id}`"
+							target="_blank"
+							class="!w-9 !rounded-full !px-0"
+						>
+							<ExternalIcon />
+						</ButtonLink>
 					</div>
 				</div>
 			</div>
@@ -1552,58 +1551,60 @@ function copyId() {
 							@update-thread="handleThreadUpdate"
 						>
 							<template #additionalActions>
-								<ButtonStyled color="brand">
-									<button
-										v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
-										:disabled="!canSubmitReview"
-										@click="handleSubmitReview('safe')"
-									>
-										<ShieldCheckIcon /> Pass
-									</button>
-								</ButtonStyled>
-								<ButtonStyled color="red">
-									<button
-										v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
-										:disabled="!canSubmitReview"
-										@click="handleSubmitReview('unsafe')"
-									>
-										<BugIcon /> Fail
-									</button>
-								</ButtonStyled>
-								<ButtonStyled color="standard">
-									<OverflowMenu
-										class="btn-dropdown-animation"
-										:disabled="isLoadingStatusAction"
-										:options="projectStatusActions"
-									>
-										<SpinnerIcon
-											v-if="isLoadingStatusAction"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										<ScaleIcon v-else aria-hidden="true" />
-										Set Status
-										<template #approve>
-											<CheckIcon aria-hidden="true" />
-											Approve
-										</template>
-										<template #withhold>
-											<EyeOffIcon aria-hidden="true" />
-											Withhold
-										</template>
-										<template #send-to-review>
-											<ScaleIcon aria-hidden="true" />
-											Send to review
-										</template>
-										<template #reject>
-											<XIcon aria-hidden="true" />
-											Reject
-										</template>
-									</OverflowMenu>
-								</ButtonStyled>
-								<ButtonStyled v-if="featureFlags.developerMode" type="outlined">
-									<button @click="emit('showMaliciousSummary', unsafeFiles)">Debug</button>
-								</ButtonStyled>
+								<Button
+									v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
+									type="colored"
+									color="brand"
+									:disabled="!canSubmitReview"
+									@click="handleSubmitReview('safe')"
+								>
+									<ShieldCheckIcon /> Pass
+								</Button>
+								<Button
+									v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
+									type="colored"
+									color="red"
+									:disabled="!canSubmitReview"
+									@click="handleSubmitReview('unsafe')"
+								>
+									<BugIcon /> Fail
+								</Button>
+								<TeleportOverflowMenu
+									label="More options"
+									class="btn-dropdown-animation !w-auto !rounded-xl !px-2.5"
+									:disabled="isLoadingStatusAction"
+									:options="projectStatusActions"
+								>
+									<SpinnerIcon
+										v-if="isLoadingStatusAction"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<ScaleIcon v-else aria-hidden="true" />
+									Set Status
+									<template #approve>
+										<CheckIcon aria-hidden="true" />
+										Approve
+									</template>
+									<template #withhold>
+										<EyeOffIcon aria-hidden="true" />
+										Withhold
+									</template>
+									<template #send-to-review>
+										<ScaleIcon aria-hidden="true" />
+										Send to review
+									</template>
+									<template #reject>
+										<XIcon aria-hidden="true" />
+										Reject
+									</template>
+								</TeleportOverflowMenu>
+								<Button
+									v-if="featureFlags.developerMode"
+									type="outlined"
+									@click="emit('showMaliciousSummary', unsafeFiles)"
+									>Debug</Button
+								>
 							</template>
 						</ThreadView>
 					</div>
@@ -1674,19 +1675,16 @@ function copyId() {
 					</div>
 
 					<div class="flex items-center gap-2">
-						<ButtonStyled v-if="getFileDetailCount(file) > 0">
-							<button @click="viewFileFlags(file)">Flags</button>
-						</ButtonStyled>
-						<ButtonStyled type="outlined">
-							<a
-								:href="file.download_url"
-								:title="`Download ${file.file_name}`"
-								:download="file.file_name"
-								tabindex="0"
-							>
-								<DownloadIcon /> Download
-							</a>
-						</ButtonStyled>
+						<Button v-if="getFileDetailCount(file) > 0" @click="viewFileFlags(file)">Flags</Button>
+						<ButtonLink
+							type="outlined"
+							:href="file.download_url"
+							:title="`Download ${file.file_name}`"
+							:download="file.file_name"
+							tabindex="0"
+						>
+							<DownloadIcon /> Download
+						</ButtonLink>
 					</div>
 				</div>
 			</template>
@@ -1856,14 +1854,14 @@ function copyId() {
 							@click="toggleClass(classItem)"
 						>
 							<div class="my-auto flex items-center gap-2">
-								<ButtonStyled type="transparent" circular>
-									<button
-										class="transition-transform"
-										:class="{ 'rotate-180': expandedClasses.has(classItem.key) }"
-									>
-										<ChevronDownIcon class="h-5 w-5 text-contrast" />
-									</button>
-								</ButtonStyled>
+								<IconButton
+									type="quiet"
+									label="Toggle details"
+									class="transition-transform"
+									:class="{ 'rotate-180': expandedClasses.has(classItem.key) }"
+								>
+									<ChevronDownIcon class="h-5 w-5 text-contrast" />
+								</IconButton>
 
 								<span v-tooltip="classItem.filePath" class="font-mono font-semibold">{{
 									truncateMiddle(classItem.filePath)
@@ -2061,16 +2059,16 @@ function copyId() {
 									v-if="getHighlightedClassSource(classItem).length > 0"
 									class="relative inset-0 overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
 								>
-									<ButtonStyled circular type="transparent">
-										<button
-											v-tooltip="`Copy code`"
-											class="absolute right-2 top-2 border-[1px]"
-											@click="copyToClipboard(getClassDecompiledSource(classItem)!, classItem.key)"
-										>
-											<CopyIcon v-if="!showCopyFeedback.get(classItem.key)" />
-											<CheckIcon v-else />
-										</button>
-									</ButtonStyled>
+									<IconButton
+										v-tooltip="`Copy code`"
+										type="quiet"
+										:label="`Copy code`"
+										class="absolute right-2 top-2 border-[1px]"
+										@click="copyToClipboard(getClassDecompiledSource(classItem)!, classItem.key)"
+									>
+										<CopyIcon v-if="!showCopyFeedback.get(classItem.key)" />
+										<CheckIcon v-else />
+									</IconButton>
 
 									<div class="overflow-x-auto bg-surface-3 py-3">
 										<div
diff --git a/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue b/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
index 3d6b948120..41c0888f81 100644
--- a/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
+++ b/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
@@ -7,8 +7,8 @@ import {
 	StarIcon,
 	TrashIcon,
 } from '@modrinth/assets'
+import { Button, IconButton } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	Combobox,
 	type ComboboxOption,
 	ConfirmModal,
@@ -405,26 +405,26 @@ defineExpose({ show, hide })
 							</span>
 						</template>
 					</Combobox>
-					<ButtonStyled circular color="red" color-fill="none">
-						<button
-							v-tooltip="formatMessage(messages.deleteAllGroups)"
-							:disabled="titleButtonsDisabled"
-							@click="showConfirmClearGroups"
-						>
-							<TrashIcon v-if="!isClearing" aria-hidden="true" />
-							<SpinnerIcon v-else class="animate-spin" />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<button
-							v-tooltip="formatMessage(messages.scanAllFiles)"
-							:disabled="titleButtonsDisabled"
-							@click="fetchAllScans"
-						>
-							<FolderSearchIcon v-if="!isScanning" aria-hidden="true" />
-							<SpinnerIcon v-else class="animate-spin" />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-tooltip="formatMessage(messages.deleteAllGroups)"
+						type="quiet"
+						color="red"
+						:label="formatMessage(messages.deleteAllGroups)"
+						:disabled="titleButtonsDisabled"
+						@click="showConfirmClearGroups"
+					>
+						<TrashIcon v-if="!isClearing" aria-hidden="true" />
+						<SpinnerIcon v-else class="animate-spin" />
+					</IconButton>
+					<IconButton
+						v-tooltip="formatMessage(messages.scanAllFiles)"
+						:label="formatMessage(messages.scanAllFiles)"
+						:disabled="titleButtonsDisabled"
+						@click="fetchAllScans"
+					>
+						<FolderSearchIcon v-if="!isScanning" aria-hidden="true" />
+						<SpinnerIcon v-else class="animate-spin" />
+					</IconButton>
 				</div>
 			</div>
 		</template>
@@ -454,17 +454,15 @@ defineExpose({ show, hide })
 				<template #cell-newFiles="{ row }">
 					<span v-if="row.isScanning">{{ formatMessage(messages.scanning) }}</span>
 					<span v-else-if="row.error" v-tooltip="row.error" class="flex justify-center">
-						<ButtonStyled
-							class="justify-self-center"
-							color="red"
+						<Button
 							type="outlined"
-							hover-color-fill="background"
+							:disabled="rescanButtonsDisabled"
+							class="justify-self-center !text-red !shadow-[inset_0_0_0_1px_var(--color-red)] hover:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!bg-red focus-visible:!text-[var(--color-accent-contrast)] [&>svg]:!text-red"
+							@click="() => fetchScan(row.id)"
 						>
-							<button :disabled="rescanButtonsDisabled" @click="() => fetchScan(row.id)">
-								<RotateCounterClockwiseIcon />
-								{{ formatMessage(messages.failed) }}
-							</button>
-						</ButtonStyled>
+							<RotateCounterClockwiseIcon />
+							{{ formatMessage(messages.failed) }}
+						</Button>
 					</span>
 					<span v-else-if="row.scan">{{ row.scan.new_attribution_files }}</span>
 					<span v-else>{{ formatMessage(messages.notScanned) }}</span>
@@ -472,17 +470,15 @@ defineExpose({ show, hide })
 				<template #cell-newGroups="{ row }">
 					<span v-if="row.isScanning">{{ formatMessage(messages.scanning) }}</span>
 					<span v-else-if="row.error" v-tooltip="row.error" class="flex justify-center">
-						<ButtonStyled
-							class="justify-self-center"
-							color="red"
+						<Button
 							type="outlined"
-							hover-color-fill="background"
+							:disabled="rescanButtonsDisabled"
+							class="justify-self-center !text-red !shadow-[inset_0_0_0_1px_var(--color-red)] hover:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!bg-red focus-visible:!text-[var(--color-accent-contrast)] [&>svg]:!text-red"
+							@click="() => fetchScan(row.id)"
 						>
-							<button :disabled="rescanButtonsDisabled" @click="() => fetchScan(row.id)">
-								<RotateCounterClockwiseIcon />
-								{{ formatMessage(messages.failed) }}
-							</button>
-						</ButtonStyled>
+							<RotateCounterClockwiseIcon />
+							{{ formatMessage(messages.failed) }}
+						</Button>
 					</span>
 					<span v-else-if="row.scan">{{ row.scan.new_attribution_groups }}</span>
 					<span v-else>{{ formatMessage(messages.notScanned) }}</span>
diff --git a/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue b/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
index 3f3b0d9ad5..247b350a73 100644
--- a/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
+++ b/apps/frontend/src/components/ui/moderation/SharedInstanceReportContext.vue
@@ -11,9 +11,9 @@ import {
 	UsersIcon,
 	VersionIcon,
 } from '@modrinth/assets'
+import { Button, IconButton } from '@modrinth/ui'
 import {
 	Avatar,
-	ButtonStyled,
 	ConfirmLeaveModal,
 	type ContentItem,
 	injectModrinthClient,
@@ -322,12 +322,14 @@ function formattedLoader(version: SharedInstanceReportVersion) {
 								</div>
 							</div>
 
-							<ButtonStyled type="outlined">
-								<button class="w-full sm:w-auto" @click="viewReportedInstanceVersion(version)">
-									<EyeIcon class="size-4" />
-									View content
-								</button>
-							</ButtonStyled>
+							<Button
+								type="outlined"
+								class="w-full sm:w-auto"
+								@click="viewReportedInstanceVersion(version)"
+							>
+								<EyeIcon class="size-4" />
+								View content
+							</Button>
 						</div>
 					</div>
 					<span v-else class="text-sm text-secondary">
@@ -363,15 +365,14 @@ function formattedLoader(version: SharedInstanceReportVersion) {
 								{{ instance.member_count === 1 ? 'member' : 'members' }}
 							</span>
 						</div>
-						<ButtonStyled circular type="transparent">
-							<button
-								v-tooltip="`View ${instance.name} version ${instance.latest_version} content`"
-								:aria-label="`View ${instance.name} version ${instance.latest_version} content`"
-								@click="viewVersionContent(instance, instance.latest_version)"
-							>
-								<EyeIcon class="size-4" />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="`View ${instance.name} version ${instance.latest_version} content`"
+							type="quiet"
+							:label="`View ${instance.name} version ${instance.latest_version} content`"
+							@click="viewVersionContent(instance, instance.latest_version)"
+						>
+							<EyeIcon class="size-4" />
+						</IconButton>
 					</div>
 				</div>
 				<span v-else-if="details.other_instances_loaded" class="text-sm text-secondary">
@@ -392,12 +393,16 @@ function formattedLoader(version: SharedInstanceReportVersion) {
 						launching them.
 					</span>
 				</div>
-				<ButtonStyled color="red">
-					<button :disabled="banDisabled" class="w-full gap-2 sm:w-auto" @click="promptBanOwner">
-						<BanIcon class="size-4" />
-						{{ banButtonLabel }}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="red"
+					:disabled="banDisabled"
+					class="w-full gap-2 sm:w-auto"
+					@click="promptBanOwner"
+				>
+					<BanIcon class="size-4" />
+					{{ banButtonLabel }}
+				</Button>
 			</footer>
 		</div>
 
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index 3727b6197c..83f45c88e6 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -24,9 +24,10 @@
 				<h1 class="m-0 mr-auto">
 					<TeleportOverflowMenu
 						v-if="canOpenStageSelectorFromTitle"
+						:label="checklistTitleText"
 						:options="stageOptions"
-						placement="center"
-						btn-class="inline-flex items-center gap-2 bg-transparent p-0 text-2xl font-extrabold text-contrast"
+						placement="bottom-start"
+						class="!h-auto !w-auto gap-2 !bg-transparent !p-0 text-2xl font-extrabold text-contrast"
 					>
 						<component
 							:is="isPseudoStage ? ScaleIcon : (currentStageObj._icon ?? ScaleIcon)"
@@ -56,42 +57,55 @@
 						{{ checklistTitleText }}
 					</button>
 				</h1>
-				<ButtonStyled v-if="!isPseudoStage && currentStageObj._guidanceUrl" circular>
-					<a v-tooltip="`Stage guidance`" target="_blank" :href="currentStageObj._guidanceUrl">
-						<FileTextIcon />
-					</a>
-				</ButtonStyled>
-				<ButtonStyled
-					circular
-					:color="!isPseudoStage && currentStageHasState ? 'orange' : 'red'"
-					color-fill="none"
-					hover-color-fill="background"
+				<ButtonLink
+					v-if="!isPseudoStage && currentStageObj._guidanceUrl"
+					v-tooltip="`Stage guidance`"
+					target="_blank"
+					:href="currentStageObj._guidanceUrl"
+					class="!w-9 !rounded-full !px-0"
 				>
-					<button
-						v-tooltip="
-							!isPseudoStage && currentStageHasState
-								? 'Reset Stage'
-								: !isPseudoStage && !checklistHasState
-									? 'Return to Start'
-									: 'Reset Checklist'
-						"
-						:disabled="!isPseudoStage && !checklistHasState && isOnFirstStage"
-						@click="resetProgress"
-					>
-						<UndoIcon v-if="!isPseudoStage && !checklistHasState" />
-						<BrushCleaningIcon v-else />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
-					<button v-tooltip="`Exit moderation`" @click="handleExit">
-						<XIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular>
-					<button v-tooltip="collapsed ? `Expand` : `Collapse`" @click="emit('toggleCollapsed')">
-						<DropdownIcon class="transition-transform" :class="{ 'rotate-180': collapsed }" />
-					</button>
-				</ButtonStyled>
+					<FileTextIcon />
+				</ButtonLink>
+				<IconButton
+					v-tooltip="
+						!isPseudoStage && currentStageHasState
+							? 'Reset Stage'
+							: !isPseudoStage && !checklistHasState
+								? 'Return to Start'
+								: 'Reset Checklist'
+					"
+					type="quiet"
+					:color="!isPseudoStage && currentStageHasState ? 'orange' : 'red'"
+					:label="
+						!isPseudoStage && currentStageHasState
+							? 'Reset Stage'
+							: !isPseudoStage && !checklistHasState
+								? 'Return to Start'
+								: 'Reset Checklist'
+					"
+					:disabled="!isPseudoStage && !checklistHasState && isOnFirstStage"
+					@click="resetProgress"
+				>
+					<UndoIcon v-if="!isPseudoStage && !checklistHasState" />
+					<BrushCleaningIcon v-else />
+				</IconButton>
+				<IconButton
+					v-tooltip="`Exit moderation`"
+					type="quiet"
+					color="red"
+					label="Exit moderation"
+					class="hover:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!bg-red focus-visible:!text-[var(--color-accent-contrast)]"
+					@click="handleExit"
+				>
+					<XIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="collapsed ? `Expand` : `Collapse`"
+					:label="collapsed ? `Expand` : `Collapse`"
+					@click="emit('toggleCollapsed')"
+				>
+					<DropdownIcon class="transition-transform" :class="{ 'rotate-180': collapsed }" />
+				</IconButton>
 			</div>
 		</div>
 		<p
@@ -128,24 +142,21 @@
 						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-surface-5 pt-4"
 					>
 						<div class="flex items-center gap-2">
-							<ButtonStyled @click="openTakeOverModal">
-								<button>
-									<LockIcon aria-hidden="true" />
-									Take over
-								</button>
-							</ButtonStyled>
+							<Button @click="openTakeOverModal">
+								<LockIcon aria-hidden="true" />
+								Take over
+							</Button>
 						</div>
 						<div class="flex items-center gap-2">
-							<ButtonStyled
+							<Button
 								v-if="moderationQueue.isQueueMode && moderationQueue.queueLength > 1"
+								type="colored"
 								color="brand"
 								@click="skipToNextProject"
 							>
-								<button>
-									<RightArrowIcon aria-hidden="true" />
-									Next project ({{ moderationQueue.queueLength }} left)
-								</button>
-							</ButtonStyled>
+								<RightArrowIcon aria-hidden="true" />
+								Next project ({{ moderationQueue.queueLength }} left)
+							</Button>
 						</div>
 					</div>
 				</div>
@@ -161,24 +172,21 @@
 						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-surface-5 pt-4"
 					>
 						<div class="flex items-center gap-2">
-							<ButtonStyled @click="reviewAnyway">
-								<button>
-									<ScaleIcon aria-hidden="true" />
-									Review anyway
-								</button>
-							</ButtonStyled>
+							<Button @click="reviewAnyway">
+								<ScaleIcon aria-hidden="true" />
+								Review anyway
+							</Button>
 						</div>
 						<div class="flex items-center gap-2">
-							<ButtonStyled
+							<Button
 								v-if="moderationQueue.isQueueMode && moderationQueue.queueLength > 1"
+								type="colored"
 								color="brand"
 								@click="skipToNextProject"
 							>
-								<button>
-									<RightArrowIcon aria-hidden="true" />
-									Next project ({{ moderationQueue.queueLength }} left)
-								</button>
-							</ButtonStyled>
+								<RightArrowIcon aria-hidden="true" />
+								Next project ({{ moderationQueue.queueLength }} left)
+							</Button>
 						</div>
 					</div>
 				</div>
@@ -196,18 +204,16 @@
 						</p>
 					</div>
 					<div v-else-if="generatedMessage" class="flex min-h-0 flex-1 flex-col gap-2">
-						<ButtonStyled class="shrink-0 self-start">
-							<button @click="useSimpleEditor = !useSimpleEditor">
-								<template v-if="!useSimpleEditor">
-									<ToggleLeftIcon aria-hidden="true" />
-									Use simple mode
-								</template>
-								<template v-else>
-									<ToggleRightIcon aria-hidden="true" />
-									Use advanced mode
-								</template>
-							</button>
-						</ButtonStyled>
+						<Button class="shrink-0 self-start" @click="useSimpleEditor = !useSimpleEditor">
+							<template v-if="!useSimpleEditor">
+								<ToggleLeftIcon aria-hidden="true" />
+								Use simple mode
+							</template>
+							<template v-else>
+								<ToggleRightIcon aria-hidden="true" />
+								Use advanced mode
+							</template>
+						</Button>
 						<div class="min-h-0 flex-1 overflow-y-auto">
 							<MarkdownEditor
 								v-if="!useSimpleEditor"
@@ -250,110 +256,115 @@
 						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-surface-5 pt-4"
 					>
 						<div class="flex items-center gap-2">
-							<ButtonStyled v-if="!done && !generatedMessage && moderationQueue.hasItems">
-								<button @click="skipCurrentProject">
-									<XIcon aria-hidden="true" />
-									Skip ({{ moderationQueue.queueLength }} left)
-								</button>
-							</ButtonStyled>
+							<Button
+								v-if="!done && !generatedMessage && moderationQueue.hasItems"
+								@click="skipCurrentProject"
+							>
+								<XIcon aria-hidden="true" />
+								Skip ({{ moderationQueue.queueLength }} left)
+							</Button>
 						</div>
 
 						<div class="flex items-center gap-2">
-							<ButtonStyled v-if="!done" circular>
-								<TeleportOverflowMenu :options="stageOptions" placement="center">
-									<ListBulletedIcon />
-									<span class="sr-only">Stages</span>
-									<template v-for="opt in stageOptions" #[opt.id] :key="opt.id">
-										<component :is="opt.icon" v-if="opt.icon" class="mr-2" />
-										<span>
-											{{ opt.text
-											}}<span v-if="opt.requiredMissing" class="font-bold text-red">*</span>
-										</span>
-										<span v-if="opt.messages" class="ml-auto pl-2 font-semibold opacity-75">{{
-											opt.messages
-										}}</span>
-										<span v-if="opt.fixes" class="pl-2 font-semibold text-blue">{{
-											opt.fixes
-										}}</span>
-									</template>
-								</TeleportOverflowMenu>
-							</ButtonStyled>
+							<TeleportOverflowMenu
+								v-if="!done"
+								label="More options"
+								:options="stageOptions"
+								placement="bottom-end"
+							>
+								<ListBulletedIcon />
+								<span class="sr-only">Stages</span>
+								<template v-for="opt in stageOptions" #[opt.id] :key="opt.id">
+									<component :is="opt.icon" v-if="opt.icon" class="mr-2" />
+									<span>
+										{{ opt.text
+										}}<span v-if="opt.requiredMissing" class="font-bold text-red">*</span>
+									</span>
+									<span v-if="opt.messages" class="ml-auto pl-2 font-semibold opacity-75">{{
+										opt.messages
+									}}</span>
+									<span v-if="opt.fixes" class="pl-2 font-semibold text-blue">{{ opt.fixes }}</span>
+								</template>
+							</TeleportOverflowMenu>
 
 							<div v-if="done">
-								<ButtonStyled color="brand">
-									<button @click="endChecklist(undefined)">
-										<template v-if="hasNextProject">
-											<RightArrowIcon aria-hidden="true" />
-											Next project ({{ moderationQueue.queueLength }} left)
-										</template>
-										<template v-else>
-											<CheckIcon aria-hidden="true" />
-											All done!
-										</template>
-									</button>
-								</ButtonStyled>
+								<Button type="colored" color="brand" @click="endChecklist(undefined)">
+									<template v-if="hasNextProject">
+										<RightArrowIcon aria-hidden="true" />
+										Next project ({{ moderationQueue.queueLength }} left)
+									</template>
+									<template v-else>
+										<CheckIcon aria-hidden="true" />
+										All done!
+									</template>
+								</Button>
 							</div>
 
 							<div v-else-if="generatedMessage" class="flex items-center gap-2">
-								<ButtonStyled>
-									<button :disabled="loadingModerationDecision" @click="previousStage">
-										<LeftArrowIcon aria-hidden="true" />
-										Edit
-									</button>
-								</ButtonStyled>
-								<ButtonStyled color="red">
-									<button :disabled="loadingModerationDecision" @click="sendMessage('rejected')">
-										<SpinnerIcon
-											v-if="moderationDecision === 'rejected'"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										<XIcon v-else aria-hidden="true" />
-										Reject
-									</button>
-								</ButtonStyled>
-								<ButtonStyled color="orange">
-									<button :disabled="loadingModerationDecision" @click="sendMessage('withheld')">
-										<SpinnerIcon
-											v-if="moderationDecision === 'withheld'"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										<LinkIcon v-else aria-hidden="true" />
-										Withhold
-									</button>
-								</ButtonStyled>
-								<ButtonStyled color="green">
-									<button
-										:disabled="loadingModerationDecision"
-										@click="sendMessage(approveSendStatus)"
-									>
-										<SpinnerIcon
-											v-if="moderationDecision === approveSendStatus"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										<CheckIcon v-else aria-hidden="true" />
-										Approve
-									</button>
-								</ButtonStyled>
+								<Button :disabled="loadingModerationDecision" @click="previousStage">
+									<LeftArrowIcon aria-hidden="true" />
+									Edit
+								</Button>
+								<Button
+									type="colored"
+									color="red"
+									:disabled="loadingModerationDecision"
+									@click="sendMessage('rejected')"
+								>
+									<SpinnerIcon
+										v-if="moderationDecision === 'rejected'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<XIcon v-else aria-hidden="true" />
+									Reject
+								</Button>
+								<Button
+									type="colored"
+									color="orange"
+									:disabled="loadingModerationDecision"
+									@click="sendMessage('withheld')"
+								>
+									<SpinnerIcon
+										v-if="moderationDecision === 'withheld'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<LinkIcon v-else aria-hidden="true" />
+									Withhold
+								</Button>
+								<Button
+									type="colored"
+									color="green"
+									:disabled="loadingModerationDecision"
+									@click="sendMessage(approveSendStatus)"
+								>
+									<SpinnerIcon
+										v-if="moderationDecision === approveSendStatus"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckIcon v-else aria-hidden="true" />
+									Approve
+								</Button>
 							</div>
 
 							<div v-else class="flex items-center gap-2">
-								<ButtonStyled>
-									<button :disabled="!hasValidPreviousStage" @click="previousStage">
-										<LeftArrowIcon aria-hidden="true" /> Previous
-									</button>
-								</ButtonStyled>
-								<ButtonStyled color="brand" :disabled="isLastVisibleStage && loadingMessage">
-									<button @click="nextStage">
-										<template v-if="isLastVisibleStage">
-											<CheckIcon aria-hidden="true" />
-											{{ loadingMessage ? 'Generating...' : 'Generate Message' }}
-										</template>
-										<template v-else> <RightArrowIcon aria-hidden="true" /> Next </template>
-									</button>
-								</ButtonStyled>
+								<Button :disabled="!hasValidPreviousStage" @click="previousStage">
+									<LeftArrowIcon aria-hidden="true" /> Previous
+								</Button>
+								<Button
+									type="colored"
+									color="brand"
+									:disabled="isLastVisibleStage && loadingMessage"
+									@click="nextStage"
+								>
+									<template v-if="isLastVisibleStage">
+										<CheckIcon aria-hidden="true" />
+										{{ loadingMessage ? 'Generating...' : 'Generate Message' }}
+									</template>
+									<template v-else> <RightArrowIcon aria-hidden="true" /> Next </template>
+								</Button>
 							</div>
 						</div>
 					</div>
@@ -407,17 +418,19 @@ import {
 } from '@modrinth/moderation'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	Collapsible,
 	ConfirmModal,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
 	MarkdownEditor,
 	StyledInput,
+	TeleportOverflowMenu,
 	useDebugLogger,
 } from '@modrinth/ui'
-import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'
 import type { ProjectStatus } from '@modrinth/utils'
 import { useQueryClient } from '@tanstack/vue-query'
 import { useDebounceFn } from '@vueuse/core'
@@ -1785,9 +1798,9 @@ const hasValidPreviousStage = computed(() => {
 
 interface StageOption {
 	id: string
+	label: string
 	action: () => void
 	text: string
-	color?: 'green'
 	icon?: Component
 	messages?: number
 	fixes?: number
@@ -1799,14 +1812,15 @@ const stageOptions = computed<StageOption[]>(() => {
 		.map((stage, index) => {
 			if (!shouldShowStage(stage)) return null
 
+			const label = stage.label ?? kebabToTitleCase(stage.id)
 			return {
 				id: String(index),
+				label,
 				action: () => {
 					clearGeneratedMessageState()
 					currentStage.value = index
 				},
-				text: stage.label ?? kebabToTitleCase(stage.id),
-				color: index === currentStage.value && !generatedMessage.value ? 'green' : undefined,
+				text: label,
 				icon: stage._icon ?? undefined,
 				messages: countStageActions(stage) || undefined,
 				fixes: countStageFixes(stage) || undefined,
@@ -1817,9 +1831,9 @@ const stageOptions = computed<StageOption[]>(() => {
 
 	options.push({
 		id: 'generate-message',
+		label: 'Generate Message',
 		action: () => generateMessage(),
 		text: 'Generate Message',
-		color: generatedMessage.value ? 'green' : undefined,
 		icon: CheckIcon,
 	})
 
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue b/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
index 6aec854a41..f99e3a2b12 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
@@ -19,16 +19,30 @@
 			<div v-if="modPackData[currentIndex].type === 'unknown'">
 				<p>What is the approval type of {{ modPackData[currentIndex].file_name }}?</p>
 				<div class="input-group">
-					<ButtonStyled
+					<Button
 						v-for="(option, index) in fileApprovalTypes"
 						:key="index"
-						:color="modPackData[currentIndex].status === option.id ? 'brand' : 'standard'"
+						:type="
+							(modPackData[currentIndex].status === option.id ? 'brand' : 'standard') &&
+							(modPackData[currentIndex].status === option.id ? 'brand' : 'standard') !== 'standard'
+								? 'colored'
+								: 'base'
+						"
+						:color="
+							(modPackData[currentIndex].status === option.id ? 'brand' : 'standard') &&
+							(modPackData[currentIndex].status === option.id ? 'brand' : 'standard') !== 'standard'
+								? (modPackData[currentIndex].status === option.id ? 'brand' : 'standard') ===
+									'medal-promo'
+									? 'medal_promotion'
+									: modPackData[currentIndex].status === option.id
+										? 'brand'
+										: 'standard'
+								: undefined
+						"
 						@click="setStatus(currentIndex, option.id)"
 					>
-						<button>
-							{{ option.name }}
-						</button>
-					</ButtonStyled>
+						{{ option.name }}
+					</Button>
 				</div>
 				<div v-if="modPackData[currentIndex].status !== 'unidentified'" class="flex flex-col gap-1">
 					<label for="proof">
@@ -74,16 +88,30 @@
 					>)?
 				</p>
 				<div class="input-group">
-					<ButtonStyled
+					<Button
 						v-for="(option, index) in fileApprovalTypes"
 						:key="index"
-						:color="modPackData[currentIndex].status === option.id ? 'brand' : 'standard'"
+						:type="
+							(modPackData[currentIndex].status === option.id ? 'brand' : 'standard') &&
+							(modPackData[currentIndex].status === option.id ? 'brand' : 'standard') !== 'standard'
+								? 'colored'
+								: 'base'
+						"
+						:color="
+							(modPackData[currentIndex].status === option.id ? 'brand' : 'standard') &&
+							(modPackData[currentIndex].status === option.id ? 'brand' : 'standard') !== 'standard'
+								? (modPackData[currentIndex].status === option.id ? 'brand' : 'standard') ===
+									'medal-promo'
+									? 'medal_promotion'
+									: modPackData[currentIndex].status === option.id
+										? 'brand'
+										: 'standard'
+								: undefined
+						"
 						@click="setStatus(currentIndex, option.id)"
 					>
-						<button>
-							{{ option.name }}
-						</button>
-					</ButtonStyled>
+						{{ option.name }}
+					</Button>
 				</div>
 			</div>
 
@@ -110,40 +138,58 @@
 					>?
 				</p>
 				<div class="input-group">
-					<ButtonStyled
+					<Button
 						v-for="(option, index) in filePermissionTypes"
 						:key="index"
-						:color="modPackData[currentIndex].approved === option.id ? 'brand' : 'standard'"
+						:type="
+							(modPackData[currentIndex].approved === option.id ? 'brand' : 'standard') &&
+							(modPackData[currentIndex].approved === option.id ? 'brand' : 'standard') !==
+								'standard'
+								? 'colored'
+								: 'base'
+						"
+						:color="
+							(modPackData[currentIndex].approved === option.id ? 'brand' : 'standard') &&
+							(modPackData[currentIndex].approved === option.id ? 'brand' : 'standard') !==
+								'standard'
+								? (modPackData[currentIndex].approved === option.id ? 'brand' : 'standard') ===
+									'medal-promo'
+									? 'medal_promotion'
+									: modPackData[currentIndex].approved === option.id
+										? 'brand'
+										: 'standard'
+								: undefined
+						"
 						@click="setApproval(currentIndex, option.id)"
 					>
-						<button>
-							{{ option.name }}
-						</button>
-					</ButtonStyled>
+						{{ option.name }}
+					</Button>
 				</div>
 			</div>
 		</div>
 
 		<div class="mt-4 flex gap-2">
-			<ButtonStyled>
-				<button :disabled="currentIndex <= 0" @click="goToPrevious">
-					<LeftArrowIcon aria-hidden="true" />
-					Previous
-				</button>
-			</ButtonStyled>
-			<ButtonStyled v-if="modPackData && currentIndex < modPackData.length" color="blue">
-				<button :disabled="!canGoNext" @click="goToNext">
-					<RightArrowIcon aria-hidden="true" />
-					{{ currentIndex + 1 >= modPackData.length ? 'Complete' : 'Next' }}
-				</button>
-			</ButtonStyled>
+			<Button :disabled="currentIndex <= 0" @click="goToPrevious">
+				<LeftArrowIcon aria-hidden="true" />
+				Previous
+			</Button>
+			<Button
+				v-if="modPackData && currentIndex < modPackData.length"
+				type="colored"
+				color="blue"
+				:disabled="!canGoNext"
+				@click="goToNext"
+			>
+				<RightArrowIcon aria-hidden="true" />
+				{{ currentIndex + 1 >= modPackData.length ? 'Complete' : 'Next' }}
+			</Button>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
-import { ButtonStyled, StyledInput } from '@modrinth/ui'
+import { Button, StyledInput } from '@modrinth/ui'
 import type {
 	ModerationFlameModpackItem,
 	ModerationJudgements,
diff --git a/apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue b/apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue
index 92641ce1b1..7a320d2ff6 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue
@@ -26,7 +26,7 @@ import {
 	setMessageProject,
 } from '@modrinth/moderation'
 import {
-	ButtonStyled,
+	Button,
 	Checkbox,
 	Combobox,
 	injectProjectPageContext,
@@ -251,7 +251,7 @@ function nodeHasRequiredMissing(node: IdentifiedNodeBuilder): boolean {
 	return !!nodeMetaMap?.value.get(node)?.hasRequiredMissing || hasRequiredMissingDescendants(node)
 }
 
-function getBooleanColor(node: BooleanNodeBuilder): string {
+function getBooleanColor(node: BooleanNodeBuilder): 'standard' | 'orange' | 'blue' | 'brand' {
 	if (!getBooleanState(node)) return 'standard'
 	if (hasRequiredMissingDescendants(node)) return 'orange'
 	return hasActionableFixes(node) ? 'blue' : 'brand'
@@ -555,25 +555,52 @@ watchEffect(async () => {
 									v-for="child in visibleChildren(asIdentified(item))"
 									:key="asIdentified(child).id"
 								>
-									<ButtonStyled
-										:color="
-											getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
+									<Button
+										v-tooltip="getTooltipConfig(asIdentified(child))"
+										:type="
+											(getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
 												? hasActionableFixes(asIdentified(child))
 													? 'blue'
 													: 'brand'
-												: 'standard'
+												: 'standard') &&
+											(getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
+												? hasActionableFixes(asIdentified(child))
+													? 'blue'
+													: 'brand'
+												: 'standard') !== 'standard'
+												? 'colored'
+												: 'base'
 										"
-										:circular="!!asIdentified(child)._icon"
+										:color="
+											(getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
+												? hasActionableFixes(asIdentified(child))
+													? 'blue'
+													: 'brand'
+												: 'standard') &&
+											(getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
+												? hasActionableFixes(asIdentified(child))
+													? 'blue'
+													: 'brand'
+												: 'standard') !== 'standard'
+												? (getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
+														? hasActionableFixes(asIdentified(child))
+															? 'blue'
+															: 'brand'
+														: 'standard') === 'medal-promo'
+													? 'medal_promotion'
+													: getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
+														? hasActionableFixes(asIdentified(child))
+															? 'blue'
+															: 'brand'
+														: 'standard'
+												: undefined
+										"
+										:aria-label="asIdentified(child)._icon ? asLabeled(child).label : undefined"
 										@click="toggleChip(asIdentified(item), asIdentified(child))"
 									>
-										<button
-											v-tooltip="getTooltipConfig(asIdentified(child))"
-											:aria-label="asIdentified(child)._icon ? asLabeled(child).label : undefined"
-										>
-											<component :is="asIdentified(child)._icon" v-if="asIdentified(child)._icon" />
-											<template v-else>{{ asLabeled(child).label }}</template>
-										</button>
-									</ButtonStyled>
+										<component :is="asIdentified(child)._icon" v-if="asIdentified(child)._icon" />
+										<template v-else>{{ asLabeled(child).label }}</template>
+									</Button>
 								</template>
 							</div>
 							<template
@@ -601,22 +628,39 @@ watchEffect(async () => {
 									v-for="child in visibleChildren(asIdentified(item))"
 									:key="asIdentified(child).id"
 								>
-									<ButtonStyled
-										:color="
-											getSelectState(asIdentified(item)) === asIdentified(child).id
+									<Button
+										:type="
+											(getSelectState(asIdentified(item)) === asIdentified(child).id
 												? 'brand'
-												: 'standard'
+												: 'standard') &&
+											(getSelectState(asIdentified(item)) === asIdentified(child).id
+												? 'brand'
+												: 'standard') !== 'standard'
+												? 'colored'
+												: 'base'
 										"
-										:circular="!!asIdentified(child)._icon"
+										:color="
+											(getSelectState(asIdentified(item)) === asIdentified(child).id
+												? 'brand'
+												: 'standard') &&
+											(getSelectState(asIdentified(item)) === asIdentified(child).id
+												? 'brand'
+												: 'standard') !== 'standard'
+												? (getSelectState(asIdentified(item)) === asIdentified(child).id
+														? 'brand'
+														: 'standard') === 'medal-promo'
+													? 'medal_promotion'
+													: getSelectState(asIdentified(item)) === asIdentified(child).id
+														? 'brand'
+														: 'standard'
+												: undefined
+										"
+										:aria-label="asIdentified(child)._icon ? asLabeled(child).label : undefined"
+										@click="toggleSelect(asIdentified(item), asIdentified(child))"
 									>
-										<button
-											:aria-label="asIdentified(child)._icon ? asLabeled(child).label : undefined"
-											@click="toggleSelect(asIdentified(item), asIdentified(child))"
-										>
-											<component :is="asIdentified(child)._icon" v-if="asIdentified(child)._icon" />
-											<template v-else>{{ asLabeled(child).label }}</template>
-										</button>
-									</ButtonStyled>
+										<component :is="asIdentified(child)._icon" v-if="asIdentified(child)._icon" />
+										<template v-else>{{ asLabeled(child).label }}</template>
+									</Button>
 								</template>
 							</div>
 							<template
@@ -680,32 +724,34 @@ watchEffect(async () => {
 
 					<!-- button -->
 					<template v-else-if="item.type === 'button'">
-						<ButtonStyled :circular="!!item._icon && !asButton(item).label">
-							<button
-								v-tooltip="getTooltipConfig(item, showContext)"
-								:disabled="!isButtonEnabled(asButton(item))"
-								:aria-label="item._icon && !asButton(item).label ? asButton(item).label : undefined"
-								@click="handleButtonClick(asButton(item))"
-							>
-								<component :is="item._icon" v-if="item._icon" />
-								{{ asButton(item).label }}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="getTooltipConfig(item, showContext)"
+							:disabled="!isButtonEnabled(asButton(item))"
+							:aria-label="item._icon && !asButton(item).label ? asButton(item).label : undefined"
+							@click="handleButtonClick(asButton(item))"
+						>
+							<component :is="item._icon" v-if="item._icon" />
+							{{ asButton(item).label }}
+						</Button>
 					</template>
 
 					<!-- toggle -->
 					<template v-else-if="item.type === 'toggle'">
-						<ButtonStyled :color="getBooleanColor(asBool(item))" :circular="!!item._icon">
-							<button
-								v-tooltip="getTooltipConfig(asBool(item))"
-								:disabled="!isEnabled(asIdentified(item))"
-								:aria-label="item._icon ? asLabeled(item).label : undefined"
-								@click="toggleBoolean(asBool(item))"
-							>
-								<component :is="item._icon" v-if="item._icon" />
-								<template v-else>{{ asLabeled(item).label }}</template>
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="getTooltipConfig(asBool(item))"
+							:type="getBooleanColor(asBool(item)) === 'standard' ? 'base' : 'colored'"
+							:color="
+								getBooleanColor(asBool(item)) === 'standard'
+									? undefined
+									: getBooleanColor(asBool(item))
+							"
+							:disabled="!isEnabled(asIdentified(item))"
+							:aria-label="item._icon ? asLabeled(item).label : undefined"
+							@click="toggleBoolean(asBool(item))"
+						>
+							<component :is="item._icon" v-if="item._icon" />
+							<template v-else>{{ asLabeled(item).label }}</template>
+						</Button>
 					</template>
 
 					<!-- check -->
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue
index 3f13325e88..b9dd7a5320 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue
@@ -6,11 +6,16 @@
 				v-tooltip="'Can be used without the checklist open if setting enabled.'"
 			/>
 			{{ props.title }}
-			<ButtonStyled size="small" circular type="transparent">
-				<Button :disabled="!hasChanged" @click="resetToDefault">
-					<RotateCounterClockwiseIcon />
-				</Button>
-			</ButtonStyled>
+			<IconButton
+				type="quiet"
+				size="xs"
+				class="!size-6"
+				label="Reset to default"
+				:disabled="!hasChanged"
+				@click="resetToDefault"
+			>
+				<RotateCounterClockwiseIcon />
+			</IconButton>
 		</span>
 		<div class="flex flex-row items-center gap-2">
 			<kbd
@@ -42,7 +47,7 @@
 <script setup lang="ts">
 import { GlobeIcon, RotateCounterClockwiseIcon } from '@modrinth/assets'
 import { type KeybindDefinition, toKeybindDefinition } from '@modrinth/moderation'
-import { Button, ButtonStyled } from '@modrinth/ui'
+import { IconButton } from '@modrinth/ui'
 import { onUnmounted } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/frontend/src/components/ui/news/LatestNewsRow.vue b/apps/frontend/src/components/ui/news/LatestNewsRow.vue
index 50bc98faf8..319ac822f2 100644
--- a/apps/frontend/src/components/ui/news/LatestNewsRow.vue
+++ b/apps/frontend/src/components/ui/news/LatestNewsRow.vue
@@ -16,12 +16,10 @@
 			</div>
 		</div>
 		<div class="mx-2 my-8 flex w-full items-center justify-center">
-			<ButtonStyled color="brand" size="large">
-				<nuxt-link to="/news">
-					<NewspaperIcon />
-					{{ formatMessage(messages.viewAll) }}
-				</nuxt-link>
-			</ButtonStyled>
+			<ButtonLink type="colored" color="brand" size="xl" to="/news">
+				<NewspaperIcon />
+				{{ formatMessage(messages.viewAll) }}
+			</ButtonLink>
 		</div>
 	</div>
 </template>
@@ -29,7 +27,7 @@
 <script setup lang="ts">
 import { NewspaperIcon } from '@modrinth/assets'
 import { articles as rawArticles } from '@modrinth/blog'
-import { ButtonStyled, defineMessages, NewsArticleCard, useVIntl } from '@modrinth/ui'
+import { ButtonLink, defineMessages, NewsArticleCard, useVIntl } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const { formatMessage } = useVIntl()
diff --git a/apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue b/apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue
index 54be708d25..75b009b0d7 100644
--- a/apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/CompatibilityCard.vue
@@ -39,18 +39,19 @@
 						</div>
 					</div>
 				</div>
-				<ButtonStyled v-if="content" type="outlined">
-					<button :disabled="!hasPermission" @click="handleSwitchCompatibility">
-						<ArrowLeftRightIcon />
-						Switch type
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button :disabled="!hasPermission" @click="handleSetCompatibility">
-						<ComponentIcon />
-						Set compatibility
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="content"
+					type="outlined"
+					:disabled="!hasPermission"
+					@click="handleSwitchCompatibility"
+				>
+					<ArrowLeftRightIcon />
+					Switch type
+				</Button>
+				<Button v-else :disabled="!hasPermission" @click="handleSetCompatibility">
+					<ComponentIcon />
+					Set compatibility
+				</Button>
 			</div>
 
 			<div
@@ -182,16 +183,15 @@
 					</div>
 				</div>
 
-				<ButtonStyled v-if="content">
-					<button
-						class="!w-full !max-w-[160px]"
-						:disabled="!hasPermission"
-						@click="handleUpdateContent"
-					>
-						<RefreshCwIcon />
-						Update
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="content"
+					class="!w-full !max-w-[160px]"
+					:disabled="!hasPermission"
+					@click="handleUpdateContent"
+				>
+					<RefreshCwIcon />
+					Update
+				</Button>
 			</div>
 		</div>
 		<ServerCompatibilityModal v-if="hasPermission" ref="serverCompatibilityModal" />
@@ -211,7 +211,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	FormattedTag,
 	injectModrinthClient,
 	injectProjectPageContext,
diff --git a/apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/UploadCustomModpack.vue b/apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/UploadCustomModpack.vue
index 1451cfb64a..61334b77c9 100644
--- a/apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/UploadCustomModpack.vue
+++ b/apps/frontend/src/components/ui/project-settings/ServerCompatibilityModal/stages/UploadCustomModpack.vue
@@ -27,23 +27,16 @@
 					</span>
 				</div>
 
-				<ButtonStyled size="standard" :circular="true">
-					<button
-						v-tooltip="'Replace file'"
-						aria-label="Replace file"
-						class="!shadow-none"
-						@click="fileInput?.click()"
-					>
-						<ArrowLeftRightIcon aria-hidden="true" />
-						<input
-							ref="fileInput"
-							class="hidden"
-							type="file"
-							accept=".mrpack"
-							@change="handleFileInputChange"
-						/>
-					</button>
-				</ButtonStyled>
+				<Button v-tooltip="'Replace file'" aria-label="Replace file" @click="fileInput?.click()">
+					<ArrowLeftRightIcon aria-hidden="true" />
+					<input
+						ref="fileInput"
+						class="hidden"
+						type="file"
+						accept=".mrpack"
+						@change="handleFileInputChange"
+					/>
+				</Button>
 			</div>
 
 			<Checkbox v-model="ctx.hasLicensePermission.value">
@@ -65,7 +58,7 @@
 
 <script setup lang="ts">
 import { ArrowLeftRightIcon, FileIcon } from '@modrinth/assets'
-import { ButtonStyled, Checkbox, DropzoneFileInput } from '@modrinth/ui'
+import { Button, Checkbox, DropzoneFileInput } from '@modrinth/ui'
 
 import { injectServerCompatibilityContext } from '~/providers/manage-server-compatibility-modal'
 
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
index 7e2fe3d6d1..c7d12f38e3 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
@@ -21,20 +21,22 @@
 				</span>
 			</div>
 		</div>
-		<ButtonStyled color="medal-promo" type="outlined" size="large">
-			<nuxt-link
-				to="https://medal.tv/modrinth"
-				class="z-10 my-auto mt-2 flex w-full items-center justify-center gap-1 md:mt-0 md:w-auto"
-				>{{ formatMessage(messages.learnMoreButton) }} <ExternalIcon
-			/></nuxt-link>
-		</ButtonStyled>
+		<ButtonLink
+			type="outlined"
+			size="xl"
+			href="https://medal.tv/modrinth"
+			class="z-10 my-auto mt-2 w-full md:mt-0 md:w-auto"
+		>
+			{{ formatMessage(messages.learnMoreButton) }}
+			<ExternalIcon aria-hidden="true" />
+		</ButtonLink>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { ExternalIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	ButtonLink,
 	defineMessages,
 	IntlFormatted,
 	MedalBackgroundImage,
diff --git a/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue b/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
index 5ee3818cff..c36537d79c 100644
--- a/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type MessageDescriptor, useFormatPrice } from '@modrinth/ui'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessage,
 	defineMessages,
@@ -146,18 +146,24 @@ const billingMonths = computed(() => {
 				</span>
 				<p class="m-0 max-w-[18rem]">{{ formatMessage(plans[plan].description) }}</p>
 			</div>
-			<ButtonStyled
-				:color="plans[plan].buttonColor"
-				:type="plans[plan].mostPopular ? 'standard' : 'highlight-colored-text'"
-				size="large"
+			<Button
+				v-if="outOfStock"
+				disabled
+				size="xl"
+				:type="plans[plan].mostPopular ? 'colored' : 'base'"
+				:color="plans[plan].mostPopular ? plans[plan].buttonColor : undefined"
 			>
-				<span v-if="outOfStock" class="button-like disabled">{{
-					formatMessage(messages.outOfStock)
-				}}</span>
-				<button v-else @click="() => emit('select')">
-					{{ formatMessage(messages.selectPlanButton) }}
-				</button>
-			</ButtonStyled>
+				{{ formatMessage(messages.outOfStock) }}
+			</Button>
+			<Button
+				v-else
+				size="xl"
+				:type="plans[plan].mostPopular ? 'colored' : 'base'"
+				:color="plans[plan].mostPopular ? plans[plan].buttonColor : undefined"
+				@click="() => emit('select')"
+			>
+				{{ formatMessage(messages.selectPlanButton) }}
+			</Button>
 			<ServersSpecs
 				:ram="ram"
 				:storage="storage"
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index c5b6545af9..9de637941d 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -34,26 +34,24 @@
 					{{ formatMessage(messages.resubmitModalConfirmationLabel) }}
 				</Checkbox>
 				<div class="flex flex-wrap items-center justify-end gap-2">
-					<ButtonStyled type="outlined">
-						<button @click="modalSubmit.hide()">
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="orange">
-						<button
-							:disabled="!submissionConfirmation || isLoading"
-							@click="runBlockingAction('resubmit-modal', resubmit)"
-						>
-							<SpinnerIcon
-								v-if="loadingAction === 'resubmit-modal'"
-								class="animate-spin"
-								aria-hidden="true"
-							/>
-							<ScaleIcon v-else aria-hidden="true" />
-							{{ formatMessage(messages.actionResubmitForReview) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="modalSubmit.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="orange"
+						:disabled="!submissionConfirmation || isLoading"
+						@click="runBlockingAction('resubmit-modal', resubmit)"
+					>
+						<SpinnerIcon
+							v-if="loadingAction === 'resubmit-modal'"
+							class="animate-spin"
+							aria-hidden="true"
+						/>
+						<ScaleIcon v-else aria-hidden="true" />
+						{{ formatMessage(messages.actionResubmitForReview) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -76,26 +74,24 @@
 					{{ formatMessage(messages.replyModalConfirmationLabel) }}
 				</Checkbox>
 				<div class="flex flex-wrap items-center justify-end gap-2">
-					<ButtonStyled type="outlined">
-						<button @click="modalReply.hide()">
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button
-							:disabled="!replyConfirmation || isLoading"
-							@click="runBlockingAction('reply-modal', () => sendReplyFromModal())"
-						>
-							<SpinnerIcon
-								v-if="loadingAction === 'reply-modal'"
-								class="animate-spin"
-								aria-hidden="true"
-							/>
-							<ReplyIcon v-else aria-hidden="true" />
-							{{ formatMessage(messages.actionReplyToThread) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="modalReply.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="!replyConfirmation || isLoading"
+						@click="runBlockingAction('reply-modal', () => sendReplyFromModal())"
+					>
+						<SpinnerIcon
+							v-if="loadingAction === 'reply-modal'"
+							class="animate-spin"
+							aria-hidden="true"
+						/>
+						<ReplyIcon v-else aria-hidden="true" />
+						{{ formatMessage(messages.actionReplyToThread) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -119,17 +115,15 @@
 			</div>
 			<template v-if="report && report.closed">
 				<p>{{ formatMessage(messages.closedThreadDescription) }}</p>
-				<ButtonStyled v-if="isStaff(auth.user)">
-					<button :disabled="isLoading" @click="runBlockingAction('reopen', () => reopenReport())">
-						<SpinnerIcon
-							v-if="loadingAction === 'reopen'"
-							class="animate-spin"
-							aria-hidden="true"
-						/>
-						<CheckCircleIcon v-else aria-hidden="true" />
-						{{ formatMessage(messages.actionReopenThread) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="isStaff(auth.user)"
+					:disabled="isLoading"
+					@click="runBlockingAction('reopen', () => reopenReport())"
+				>
+					<SpinnerIcon v-if="loadingAction === 'reopen'" class="animate-spin" aria-hidden="true" />
+					<CheckCircleIcon v-else aria-hidden="true" />
+					{{ formatMessage(messages.actionReopenThread) }}
+				</Button>
 			</template>
 			<template v-else-if="!report || !report.closed">
 				<div class="mx-4 mb-2 mt-2">
@@ -147,258 +141,251 @@
 				</div>
 				<div class="m-4 mt-3 flex flex-wrap items-center justify-between gap-4">
 					<div class="flex flex-wrap items-center gap-2">
-						<ButtonStyled color="brand">
-							<button
-								v-if="sortedMessages.length > 0"
-								:disabled="!replyBody || isLoading"
-								@click="
-									isApproved(project) && !isStaff(auth.user)
-										? openReplyModal()
-										: runBlockingAction('reply', () => sendReply())
-								"
-							>
-								<SpinnerIcon
-									v-if="loadingAction === 'reply'"
-									class="animate-spin"
-									aria-hidden="true"
-								/>
-								<ReplyIcon v-else aria-hidden="true" />
-								{{ formatMessage(messages.actionReply) }}
-							</button>
-							<button
-								v-else
-								:disabled="!replyBody || isLoading"
-								@click="
-									isApproved(project) && !isStaff(auth.user)
-										? openReplyModal()
-										: runBlockingAction('send', () => sendReply())
-								"
-							>
-								<SpinnerIcon
-									v-if="loadingAction === 'send'"
-									class="animate-spin"
-									aria-hidden="true"
-								/>
-								<SendIcon v-else aria-hidden="true" />
-								{{ formatMessage(messages.actionSend) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="isStaff(auth.user)">
-							<button
-								:disabled="!replyBody || isLoading"
-								@click="runBlockingAction('private-note', () => sendReply(null, true))"
-							>
-								<SpinnerIcon
-									v-if="loadingAction === 'private-note'"
-									class="animate-spin"
-									aria-hidden="true"
-								/>
-								<ScaleIcon v-else aria-hidden="true" />
-								{{ formatMessage(messages.actionAddPrivateNote) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-if="sortedMessages.length > 0"
+							type="colored"
+							color="brand"
+							:disabled="!replyBody || isLoading"
+							@click="
+								isApproved(project) && !isStaff(auth.user)
+									? openReplyModal()
+									: runBlockingAction('reply', () => sendReply())
+							"
+						>
+							<SpinnerIcon
+								v-if="loadingAction === 'reply'"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<ReplyIcon v-else aria-hidden="true" />
+							{{ formatMessage(messages.actionReply) }}
+						</Button>
+						<Button
+							v-else
+							:disabled="!replyBody || isLoading"
+							@click="
+								isApproved(project) && !isStaff(auth.user)
+									? openReplyModal()
+									: runBlockingAction('send', () => sendReply())
+							"
+						>
+							<SpinnerIcon
+								v-if="loadingAction === 'send'"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<SendIcon v-else aria-hidden="true" />
+							{{ formatMessage(messages.actionSend) }}
+						</Button>
+						<Button
+							v-if="isStaff(auth.user)"
+							:disabled="!replyBody || isLoading"
+							@click="runBlockingAction('private-note', () => sendReply(null, true))"
+						>
+							<SpinnerIcon
+								v-if="loadingAction === 'private-note'"
+								class="animate-spin"
+								aria-hidden="true"
+							/>
+							<ScaleIcon v-else aria-hidden="true" />
+							{{ formatMessage(messages.actionAddPrivateNote) }}
+						</Button>
 						<template v-if="currentMember && !currentMember.staffOnly">
 							<template v-if="isRejected(project)">
-								<ButtonStyled color="orange">
-									<button v-if="replyBody" :disabled="isLoading" @click="openResubmitModal(true)">
-										<ScaleIcon aria-hidden="true" />
-										{{ formatMessage(messages.actionResubmitForReviewWithReply) }}
-									</button>
-									<button v-else :disabled="isLoading" @click="openResubmitModal(false)">
-										<ScaleIcon aria-hidden="true" />
-										{{ formatMessage(messages.actionResubmitForReview) }}
-									</button>
-								</ButtonStyled>
+								<Button
+									v-if="replyBody"
+									type="colored"
+									color="orange"
+									:disabled="isLoading"
+									@click="openResubmitModal(true)"
+								>
+									<ScaleIcon aria-hidden="true" />
+									{{ formatMessage(messages.actionResubmitForReviewWithReply) }}
+								</Button>
+								<Button v-else :disabled="isLoading" @click="openResubmitModal(false)">
+									<ScaleIcon aria-hidden="true" />
+									{{ formatMessage(messages.actionResubmitForReview) }}
+								</Button>
 							</template>
 						</template>
 					</div>
 					<div class="flex flex-wrap items-center gap-2">
 						<template v-if="report">
 							<template v-if="isStaff(auth.user)">
-								<ButtonStyled color="red">
-									<button
-										v-if="replyBody"
-										:disabled="isLoading"
-										@click="runBlockingAction('close-with-reply', () => closeReport(true))"
-									>
-										<SpinnerIcon
-											v-if="loadingAction === 'close-with-reply'"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										<CheckCircleIcon v-else aria-hidden="true" />
-										{{ formatMessage(messages.actionCloseWithReply) }}
-									</button>
-									<button
-										v-else
-										:disabled="isLoading"
-										@click="runBlockingAction('close', () => closeReport())"
-									>
-										<SpinnerIcon
-											v-if="loadingAction === 'close'"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										<CheckCircleIcon v-else aria-hidden="true" />
-										{{ formatMessage(messages.actionCloseThread) }}
-									</button>
-								</ButtonStyled>
+								<Button
+									v-if="replyBody"
+									type="colored"
+									color="red"
+									:disabled="isLoading"
+									@click="runBlockingAction('close-with-reply', () => closeReport(true))"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'close-with-reply'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckCircleIcon v-else aria-hidden="true" />
+									{{ formatMessage(messages.actionCloseWithReply) }}
+								</Button>
+								<Button
+									v-else
+									:disabled="isLoading"
+									@click="runBlockingAction('close', () => closeReport())"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'close'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckCircleIcon v-else aria-hidden="true" />
+									{{ formatMessage(messages.actionCloseThread) }}
+								</Button>
 							</template>
 						</template>
 						<template v-if="project">
 							<template v-if="isStaff(auth.user)">
-								<ButtonStyled v-if="replyBody" color="green">
-									<button
-										:disabled="isApproved(project) || isLoading"
-										@click="
-											runBlockingAction('approve-with-reply', () => sendReply(requestedStatus))
-										"
-									>
-										<SpinnerIcon
-											v-if="loadingAction === 'approve-with-reply'"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										<CheckIcon v-else aria-hidden="true" />
-										{{ formatMessage(messages.actionApproveWithReply) }}
-									</button>
-								</ButtonStyled>
-								<ButtonStyled v-else color="green">
-									<button
-										:disabled="isApproved(project) || isLoading"
-										@click="runBlockingAction('approve', () => setStatus(requestedStatus))"
-									>
-										<SpinnerIcon
-											v-if="loadingAction === 'approve'"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										<CheckIcon v-else aria-hidden="true" />
-										{{ formatMessage(messages.actionApprove) }}
-									</button>
-								</ButtonStyled>
-								<div class="joined-buttons">
-									<ButtonStyled v-if="replyBody" color="red">
-										<button
-											:disabled="project.status === 'rejected' || isLoading"
-											@click="runBlockingAction('reject-with-reply', () => sendReply('rejected'))"
-										>
-											<SpinnerIcon
-												v-if="loadingAction === 'reject-with-reply'"
-												class="animate-spin"
-												aria-hidden="true"
-											/>
-											<XIcon v-else aria-hidden="true" />
-											{{ formatMessage(messages.actionRejectWithReply) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-else color="red">
-										<button
-											:disabled="project.status === 'rejected' || isLoading"
-											@click="runBlockingAction('reject', () => setStatus('rejected'))"
-										>
-											<SpinnerIcon
-												v-if="loadingAction === 'reject'"
-												class="animate-spin"
-												aria-hidden="true"
-											/>
-											<XIcon v-else aria-hidden="true" />
-											{{ formatMessage(messages.actionReject) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled color="red">
-										<OverflowMenu
-											class="btn-dropdown-animation"
-											:disabled="isLoading"
-											:options="
-												replyBody
-													? [
-															{
-																id: 'withhold-reply',
-																color: 'danger',
-																action: () =>
-																	runBlockingAction('withhold-reply', () => sendReply('withheld')),
-																hoverFilled: true,
-																disabled: project.status === 'withheld' || isLoading,
-															},
-															{
-																id: 'set-to-draft-reply',
-																action: () =>
-																	runBlockingAction('set-to-draft-reply', () => sendReply('draft')),
-																hoverFilled: true,
-																disabled: project.status === 'draft' || isLoading,
-															},
-															{
-																id: 'send-to-review-reply',
-																action: () =>
-																	runBlockingAction('send-to-review-reply', () =>
-																		sendReply('processing', true),
-																	),
-																hoverFilled: true,
-																disabled: project.status === 'processing' || isLoading,
-															},
-														]
-													: [
-															{
-																id: 'withhold',
-																color: 'danger',
-																action: () =>
-																	runBlockingAction('withhold', () => setStatus('withheld')),
-																hoverFilled: true,
-																disabled: project.status === 'withheld' || isLoading,
-															},
-															{
-																id: 'set-to-draft',
-																action: () =>
-																	runBlockingAction('set-to-draft', () => setStatus('draft')),
-																hoverFilled: true,
-																disabled: project.status === 'draft' || isLoading,
-															},
-															{
-																id: 'send-to-review',
-																action: () =>
-																	runBlockingAction('send-to-review', () =>
-																		setStatus('processing'),
-																	),
-																hoverFilled: true,
-																disabled: project.status === 'processing' || isLoading,
-															},
-														]
-											"
-										>
-											<SpinnerIcon
-												v-if="isDropdownLoading"
-												class="animate-spin"
-												aria-hidden="true"
-											/>
-											<DropdownIcon v-else aria-hidden="true" />
-											<template #withhold-reply>
-												<EyeOffIcon aria-hidden="true" />
-												{{ formatMessage(messages.actionWithholdWithReply) }}
-											</template>
-											<template #withhold>
-												<EyeOffIcon aria-hidden="true" />
-												{{ formatMessage(messages.actionWithhold) }}
-											</template>
-											<template #set-to-draft-reply>
-												<FileTextIcon aria-hidden="true" />
-												{{ formatMessage(messages.actionSetToDraftWithReply) }}
-											</template>
-											<template #set-to-draft>
-												<FileTextIcon aria-hidden="true" />
-												{{ formatMessage(messages.actionSetToDraft) }}
-											</template>
-											<template #send-to-review-reply>
-												<ScaleIcon aria-hidden="true" />
-												{{ formatMessage(messages.actionSendToReviewWithReply) }}
-											</template>
-											<template #send-to-review>
-												<ScaleIcon aria-hidden="true" />
-												{{ formatMessage(messages.actionSendToReview) }}
-											</template>
-										</OverflowMenu>
-									</ButtonStyled>
-								</div>
+								<Button
+									v-if="replyBody"
+									type="colored"
+									color="green"
+									:disabled="isApproved(project) || isLoading"
+									@click="runBlockingAction('approve-with-reply', () => sendReply(requestedStatus))"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'approve-with-reply'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckIcon v-else aria-hidden="true" />
+									{{ formatMessage(messages.actionApproveWithReply) }}
+								</Button>
+								<Button
+									v-else
+									type="colored"
+									color="green"
+									:disabled="isApproved(project) || isLoading"
+									@click="runBlockingAction('approve', () => setStatus(requestedStatus))"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'approve'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<CheckIcon v-else aria-hidden="true" />
+									{{ formatMessage(messages.actionApprove) }}
+								</Button>
+								<SplitButton
+									class="!m-0 !inline-flex !flex-nowrap !justify-start !gap-0"
+									type="colored"
+									color="red"
+									:menu-label="formatMessage(commonMessages.moreOptionsButton)"
+									:disabled="isLoading"
+									:primary-disabled="project.status === 'rejected'"
+									:options="
+										replyBody
+											? [
+													{
+														id: 'withhold-reply',
+														label: formatMessage(messages.actionWithholdWithReply),
+														tone: 'orange',
+														hoverFilled: true,
+														action: () =>
+															runBlockingAction('withhold-reply', () => sendReply('withheld')),
+														disabled: project.status === 'withheld' || isLoading,
+													},
+													{
+														id: 'set-to-draft-reply',
+														label: formatMessage(messages.actionSetToDraftWithReply),
+														tone: 'orange',
+														hoverFilled: true,
+														action: () =>
+															runBlockingAction('set-to-draft-reply', () => sendReply('draft')),
+														disabled: project.status === 'draft' || isLoading,
+													},
+													{
+														id: 'send-to-review-reply',
+														label: formatMessage(messages.actionSendToReviewWithReply),
+														tone: 'orange',
+														hoverFilled: true,
+														action: () =>
+															runBlockingAction('send-to-review-reply', () =>
+																sendReply('processing', true),
+															),
+														disabled: project.status === 'processing' || isLoading,
+													},
+												]
+											: [
+													{
+														id: 'withhold',
+														label: formatMessage(messages.actionWithhold),
+														tone: 'orange',
+														hoverFilled: true,
+														action: () =>
+															runBlockingAction('withhold', () => setStatus('withheld')),
+														disabled: project.status === 'withheld' || isLoading,
+													},
+													{
+														id: 'set-to-draft',
+														label: formatMessage(messages.actionSetToDraft),
+														tone: 'orange',
+														hoverFilled: true,
+														action: () =>
+															runBlockingAction('set-to-draft', () => setStatus('draft')),
+														disabled: project.status === 'draft' || isLoading,
+													},
+													{
+														id: 'send-to-review',
+														label: formatMessage(messages.actionSendToReview),
+														tone: 'orange',
+														hoverFilled: true,
+														action: () =>
+															runBlockingAction('send-to-review', () => setStatus('processing')),
+														disabled: project.status === 'processing' || isLoading,
+													},
+												]
+									"
+									@click="
+										replyBody
+											? runBlockingAction('reject-with-reply', () => sendReply('rejected'))
+											: runBlockingAction('reject', () => setStatus('rejected'))
+									"
+								>
+									<SpinnerIcon
+										v-if="loadingAction === 'reject-with-reply' || loadingAction === 'reject'"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									<XIcon v-else aria-hidden="true" />
+									{{
+										formatMessage(
+											replyBody ? messages.actionRejectWithReply : messages.actionReject,
+										)
+									}}
+									<template #withhold-reply>
+										<EyeOffIcon aria-hidden="true" />
+										{{ formatMessage(messages.actionWithholdWithReply) }}
+									</template>
+									<template #withhold>
+										<EyeOffIcon aria-hidden="true" />
+										{{ formatMessage(messages.actionWithhold) }}
+									</template>
+									<template #set-to-draft-reply>
+										<FileTextIcon aria-hidden="true" />
+										{{ formatMessage(messages.actionSetToDraftWithReply) }}
+									</template>
+									<template #set-to-draft>
+										<FileTextIcon aria-hidden="true" />
+										{{ formatMessage(messages.actionSetToDraft) }}
+									</template>
+									<template #send-to-review-reply>
+										<ScaleIcon aria-hidden="true" />
+										{{ formatMessage(messages.actionSendToReviewWithReply) }}
+									</template>
+									<template #send-to-review>
+										<ScaleIcon aria-hidden="true" />
+										{{ formatMessage(messages.actionSendToReview) }}
+									</template>
+								</SplitButton>
 							</template>
 						</template>
 					</div>
@@ -412,7 +399,6 @@
 import {
 	CheckCircleIcon,
 	CheckIcon,
-	DropdownIcon,
 	EyeOffIcon,
 	FileTextIcon,
 	ReplyIcon,
@@ -422,7 +408,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	Checkbox,
 	commonMessages,
 	CopyCode,
@@ -431,7 +417,7 @@ import {
 	IntlFormatted,
 	MarkdownEditor,
 	NewModal,
-	OverflowMenu,
+	SplitButton,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -659,15 +645,6 @@ const modalReply = ref(null)
 
 const loadingAction = ref(null)
 const isLoading = computed(() => loadingAction.value !== null)
-const dropdownActionIds = [
-	'withhold',
-	'withhold-reply',
-	'set-to-draft',
-	'set-to-draft-reply',
-	'send-to-review',
-	'send-to-review-reply',
-]
-const isDropdownLoading = computed(() => dropdownActionIds.includes(loadingAction.value))
 
 async function runBlockingAction(actionId, action) {
 	if (loadingAction.value !== null) {
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index ab01ec22d3..08dd9399b9 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -130,22 +130,23 @@
 			</span>
 		</span>
 		<div v-if="isStaff(auth.user) && message.author_id === auth.user.id" class="message__actions">
-			<ButtonStyled circular type="transparent">
-				<OverflowMenu
-					class="btn-dropdown-animation"
-					:options="[
-						{
-							id: 'delete',
-							action: () => deleteMessage(),
-							color: 'red',
-							hoverFilled: true,
-						},
-					]"
-				>
-					<MoreHorizontalIcon />
-					<template #delete> <TrashIcon /> Delete </template>
-				</OverflowMenu>
-			</ButtonStyled>
+			<TeleportOverflowMenu
+				type="quiet"
+				label="More options"
+				class="btn-dropdown-animation"
+				:options="[
+					{
+						id: 'delete',
+						label: 'Delete',
+						action: () => deleteMessage(),
+						tone: 'red',
+						hoverFilled: true,
+					},
+				]"
+			>
+				<MoreHorizontalIcon />
+				<template #delete> <TrashIcon /> Delete </template>
+			</TeleportOverflowMenu>
 		</div>
 	</div>
 </template>
@@ -165,8 +166,7 @@ import {
 	AutoLink,
 	Avatar,
 	Badge,
-	ButtonStyled,
-	OverflowMenu,
+	TeleportOverflowMenu,
 	useFormatDateTime,
 	useRelativeTime,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/components/ui/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
index 11ee3dc6cf..857f253886 100644
--- a/apps/frontend/src/components/ui/thread/ThreadView.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -41,29 +41,45 @@
 				class="mt-4 flex flex-col items-stretch justify-between gap-3 px-4 pb-4 sm:flex-row sm:items-center sm:gap-2"
 			>
 				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
-					<ButtonStyled v-if="sortedMessages.length > 0" color="brand">
-						<button :disabled="!replyBody" class="w-full gap-2 sm:w-auto" @click="sendReply()">
-							<ReplyIcon class="size-4" />
-							Reply
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else color="brand">
-						<button :disabled="!replyBody" class="w-full gap-2 sm:w-auto" @click="sendReply()">
-							<SendIcon class="size-4" />
-							Send
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="isStaff(auth.user)">
-						<button :disabled="!replyBody" class="w-full sm:w-auto" @click="sendReply(true)">
-							Add note
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="visibleQuickReplies.length > 0">
-						<OverflowMenu :options="visibleQuickReplies">
-							Quick reply
-							<ChevronDownIcon />
-						</OverflowMenu>
-					</ButtonStyled>
+					<Button
+						v-if="sortedMessages.length > 0"
+						type="colored"
+						color="brand"
+						:disabled="!replyBody"
+						class="w-full gap-2 sm:w-auto"
+						@click="sendReply()"
+					>
+						<ReplyIcon class="size-4" />
+						Reply
+					</Button>
+					<Button
+						v-else
+						type="colored"
+						color="brand"
+						:disabled="!replyBody"
+						class="w-full gap-2 sm:w-auto"
+						@click="sendReply()"
+					>
+						<SendIcon class="size-4" />
+						Send
+					</Button>
+					<Button
+						v-if="isStaff(auth.user)"
+						:disabled="!replyBody"
+						class="w-full sm:w-auto"
+						@click="sendReply(true)"
+					>
+						Add note
+					</Button>
+					<TeleportOverflowMenu
+						v-if="visibleQuickReplies.length > 0"
+						label="More options"
+						:options="visibleQuickReplies"
+						class="!w-auto !rounded-xl !px-2.5"
+					>
+						Quick reply
+						<ChevronDownIcon />
+					</TeleportOverflowMenu>
 				</div>
 
 				<div class="flex flex-col items-stretch gap-2 sm:flex-row sm:items-center">
@@ -77,12 +93,11 @@
 <script setup lang="ts" generic="T">
 import { ChevronDownIcon, MessageIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
 import type { QuickReply } from '@modrinth/moderation'
+import { Button, TeleportOverflowMenu } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	CopyCode,
 	injectNotificationManager,
 	MarkdownEditor,
-	OverflowMenu,
 	type OverflowMenuOption,
 } from '@modrinth/ui'
 import type { Thread, User } from '@modrinth/utils'
@@ -110,6 +125,7 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 			(reply) =>
 				({
 					id: reply.label,
+					label: reply.label,
 					action: () => handleQuickReply(reply, context),
 				}) as OverflowMenuOption,
 		)
diff --git a/apps/frontend/src/error.vue b/apps/frontend/src/error.vue
index e164cd589e..68a4699df5 100644
--- a/apps/frontend/src/error.vue
+++ b/apps/frontend/src/error.vue
@@ -37,20 +37,16 @@
 							<Avatar :src="auth.user.avatar_url" size="32px" />
 							<span class="font-medium text-contrast">{{ auth.user.username }}</span>
 
-							<ButtonStyled color="red" type="transparent">
-								<button type="button" class="ml-auto" @click="logout">
-									{{ formatMessage(commonMessages.signOutButton) }}
-								</button>
-							</ButtonStyled>
+							<Button type="quiet" color="red" native-type="button" class="ml-auto" @click="logout">
+								{{ formatMessage(commonMessages.signOutButton) }}
+							</Button>
 						</div>
 					</template>
 					<template v-else>
-						<ButtonStyled color="brand">
-							<nuxt-link class="button-like w-fit" :to="signInRoute">
-								<LogInIcon />
-								{{ formatMessage(commonMessages.signInButton) }}
-							</nuxt-link>
-						</ButtonStyled>
+						<ButtonLink type="colored" color="brand" class="button-like w-fit" :to="signInRoute">
+							<LogInIcon />
+							{{ formatMessage(commonMessages.signInButton) }}
+						</ButtonLink>
 					</template>
 				</div>
 				<div class="error-box__body">
@@ -92,7 +88,8 @@
 import { AnnoyedRinthbot, LogInIcon, SadRinthbot } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	defineMessage,
 	defineMessages,
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index a4eeecc6bf..4f2849bd65 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -91,399 +91,468 @@
 				:class="{ 'gap-4': !flags.projectTypesPrimaryNav }"
 			>
 				<template v-if="flags.projectTypesPrimaryNav">
-					<ButtonStyled
-						type="transparent"
-						:highlighted="route.name === 'discover-mods' || route.path.startsWith('/mod/')"
-						:highlighted-style="
-							route.name === 'discover-mods' ? 'main-nav-primary' : 'main-nav-secondary'
+					<ButtonLink
+						type="quiet"
+						to="/discover/mods"
+						:class="
+							route.name === 'discover-mods' || route.path.startsWith('/mod/')
+								? (route.name === 'discover-mods' ? 'main-nav-primary' : 'main-nav-secondary') ===
+									'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
 						"
 					>
-						<nuxt-link to="/discover/mods">
-							<BoxIcon aria-hidden="true" />
-							{{ formatMessage(commonProjectTypeCategoryMessages.mod) }}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled
-						type="transparent"
-						:highlighted="
+						<BoxIcon aria-hidden="true" />
+						{{ formatMessage(commonProjectTypeCategoryMessages.mod) }}
+					</ButtonLink>
+					<ButtonLink
+						type="quiet"
+						to="/discover/resourcepacks"
+						:class="
 							route.name === 'discover-resourcepacks' || route.path.startsWith('/resourcepack/')
-						"
-						:highlighted-style="
-							route.name === 'discover-resourcepacks' ? 'main-nav-primary' : 'main-nav-secondary'
+								? (route.name === 'discover-resourcepacks'
+										? 'main-nav-primary'
+										: 'main-nav-secondary') === 'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
 						"
 					>
-						<nuxt-link to="/discover/resourcepacks">
-							<PaintbrushIcon aria-hidden="true" />
-							{{ formatMessage(commonProjectTypeCategoryMessages.resourcepack) }}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled
-						type="transparent"
-						:highlighted="
+						<PaintbrushIcon aria-hidden="true" />
+						{{ formatMessage(commonProjectTypeCategoryMessages.resourcepack) }}
+					</ButtonLink>
+					<ButtonLink
+						type="quiet"
+						to="/discover/datapacks"
+						:class="
 							route.name === 'discover-datapacks' || route.path.startsWith('/datapack/')
-						"
-						:highlighted-style="
-							route.name === 'discover-datapacks' ? 'main-nav-primary' : 'main-nav-secondary'
+								? (route.name === 'discover-datapacks'
+										? 'main-nav-primary'
+										: 'main-nav-secondary') === 'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
 						"
 					>
-						<nuxt-link to="/discover/datapacks">
-							<BracesIcon aria-hidden="true" />
-							{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled
-						type="transparent"
-						:highlighted="route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')"
-						:highlighted-style="
-							route.name === 'discover-modpacks' ? 'main-nav-primary' : 'main-nav-secondary'
+						<BracesIcon aria-hidden="true" />
+						{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
+					</ButtonLink>
+					<ButtonLink
+						type="quiet"
+						to="/discover/modpacks"
+						:class="
+							route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')
+								? (route.name === 'discover-modpacks'
+										? 'main-nav-primary'
+										: 'main-nav-secondary') === 'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
 						"
 					>
-						<nuxt-link to="/discover/modpacks">
-							<PackageOpenIcon aria-hidden="true" />
-							{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled
-						type="transparent"
-						:highlighted="route.name === 'discover-shaders' || route.path.startsWith('/shader/')"
-						:highlighted-style="
-							route.name === 'discover-shaders' ? 'main-nav-primary' : 'main-nav-secondary'
+						<PackageOpenIcon aria-hidden="true" />
+						{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
+					</ButtonLink>
+					<ButtonLink
+						type="quiet"
+						to="/discover/shaders"
+						:class="
+							route.name === 'discover-shaders' || route.path.startsWith('/shader/')
+								? (route.name === 'discover-shaders'
+										? 'main-nav-primary'
+										: 'main-nav-secondary') === 'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
 						"
 					>
-						<nuxt-link to="/discover/shaders">
-							<GlassesIcon aria-hidden="true" />
-							{{ formatMessage(commonProjectTypeCategoryMessages.shader) }}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled
-						type="transparent"
-						:highlighted="route.name === 'discover-plugins' || route.path.startsWith('/plugin/')"
-						:highlighted-style="
-							route.name === 'discover-plugins' ? 'main-nav-primary' : 'main-nav-secondary'
+						<GlassesIcon aria-hidden="true" />
+						{{ formatMessage(commonProjectTypeCategoryMessages.shader) }}
+					</ButtonLink>
+					<ButtonLink
+						type="quiet"
+						to="/discover/plugins"
+						:class="
+							route.name === 'discover-plugins' || route.path.startsWith('/plugin/')
+								? (route.name === 'discover-plugins'
+										? 'main-nav-primary'
+										: 'main-nav-secondary') === 'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
 						"
 					>
-						<nuxt-link to="/discover/plugins">
-							<PlugIcon aria-hidden="true" />
-							{{ formatMessage(commonProjectTypeCategoryMessages.plugin) }}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled
-						type="transparent"
-						:highlighted="route.name === 'discover-servers' || route.path.startsWith('/server/')"
-						:highlighted-style="
-							route.name === 'discover-servers' ? 'main-nav-primary' : 'main-nav-secondary'
+						<PlugIcon aria-hidden="true" />
+						{{ formatMessage(commonProjectTypeCategoryMessages.plugin) }}
+					</ButtonLink>
+					<ButtonLink
+						type="quiet"
+						to="/discover/servers"
+						:class="
+							route.name === 'discover-servers' || route.path.startsWith('/server/')
+								? (route.name === 'discover-servers'
+										? 'main-nav-primary'
+										: 'main-nav-secondary') === 'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
 						"
 					>
-						<nuxt-link to="/discover/servers">
-							<ServerIcon aria-hidden="true" />
-							{{ formatMessage(commonProjectTypeCategoryMessages.server) }}
-						</nuxt-link>
-					</ButtonStyled>
+						<ServerIcon aria-hidden="true" />
+						{{ formatMessage(commonProjectTypeCategoryMessages.server) }}
+					</ButtonLink>
 				</template>
 				<template v-else>
-					<ButtonStyled
-						type="transparent"
-						:highlighted="isDiscovering || isDiscoveringSubpage"
-						:highlighted-style="isDiscoveringSubpage ? 'main-nav-secondary' : 'main-nav-primary'"
+					<TeleportOverflowMenu
+						type="quiet"
+						:label="formatMessage(commonMessages.moreOptionsButton)"
+						hoverable
+						:options="[
+							{
+								id: 'mods',
+								label: formatMessage(commonProjectTypeCategoryMessages.mod),
+								type: 'link',
+								to: '/discover/mods',
+							},
+							{
+								id: 'resourcepacks',
+								label: formatMessage(commonProjectTypeCategoryMessages.resourcepack),
+								type: 'link',
+								to: '/discover/resourcepacks',
+							},
+							{
+								id: 'datapacks',
+								label: formatMessage(commonProjectTypeCategoryMessages.datapack),
+								type: 'link',
+								to: '/discover/datapacks',
+							},
+							{
+								id: 'shaders',
+								label: formatMessage(commonProjectTypeCategoryMessages.shader),
+								type: 'link',
+								to: '/discover/shaders',
+							},
+							{
+								id: 'modpacks',
+								label: formatMessage(commonProjectTypeCategoryMessages.modpack),
+								type: 'link',
+								to: '/discover/modpacks',
+							},
+							{
+								id: 'plugins',
+								label: formatMessage(commonProjectTypeCategoryMessages.plugin),
+								type: 'link',
+								to: '/discover/plugins',
+							},
+							{
+								id: 'servers',
+								label: formatMessage(commonProjectTypeCategoryMessages.server),
+								type: 'link',
+								to: '/discover/servers',
+							},
+						]"
+						:class="[
+							'!w-auto !rounded-xl !px-2.5',
+							isDiscovering
+								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+								: isDiscoveringSubpage
+									? '!bg-[var(--color-button-bg)] !text-contrast'
+									: '',
+						]"
 					>
-						<TeleportOverflowMenu
-							:options="[
-								{
-									id: 'mods',
-									action: '/discover/mods',
-								},
-								{
-									id: 'resourcepacks',
-									action: '/discover/resourcepacks',
-								},
-								{
-									id: 'datapacks',
-									action: '/discover/datapacks',
-								},
-								{
-									id: 'shaders',
-									action: '/discover/shaders',
-								},
-								{
-									id: 'modpacks',
-									action: '/discover/modpacks',
-								},
-								{
-									id: 'plugins',
-									action: '/discover/plugins',
-								},
-								{
-									id: 'servers',
-									action: '/discover/servers',
-								},
-							]"
-							hoverable
-						>
-							<BoxIcon
-								v-if="route.name === 'discover-mods' || route.path.startsWith('/mod/')"
-								aria-hidden="true"
-							/>
-							<PaintbrushIcon
-								v-else-if="
-									route.name === 'discover-resourcepacks' || route.path.startsWith('/resourcepack/')
-								"
-								aria-hidden="true"
-							/>
-							<BracesIcon
-								v-else-if="
-									route.name === 'discover-datapacks' || route.path.startsWith('/datapack/')
-								"
-								aria-hidden="true"
-							/>
-							<PackageOpenIcon
-								v-else-if="route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')"
-								aria-hidden="true"
-							/>
-							<GlassesIcon
-								v-else-if="route.name === 'discover-shaders' || route.path.startsWith('/shader/')"
-								aria-hidden="true"
-							/>
-							<PlugIcon
-								v-else-if="route.name === 'discover-plugins' || route.path.startsWith('/plugin/')"
-								aria-hidden="true"
-							/>
-							<ServerIcon
-								v-else-if="route.name === 'discover-servers' || route.path.startsWith('/server/')"
-								aria-hidden="true"
-							/>
-							<CompassIcon v-else aria-hidden="true" />
-							<span class="hidden md:contents">{{
-								formatMessage(commonMessages.discoverContentLabel)
-							}}</span>
-							<span class="contents md:hidden">{{ formatMessage(navMenuMessages.discover) }}</span>
-							<DropdownIcon aria-hidden="true" class="h-5 w-5" />
+						<BoxIcon
+							v-if="route.name === 'discover-mods' || route.path.startsWith('/mod/')"
+							aria-hidden="true"
+						/>
+						<PaintbrushIcon
+							v-else-if="
+								route.name === 'discover-resourcepacks' || route.path.startsWith('/resourcepack/')
+							"
+							aria-hidden="true"
+						/>
+						<BracesIcon
+							v-else-if="route.name === 'discover-datapacks' || route.path.startsWith('/datapack/')"
+							aria-hidden="true"
+						/>
+						<PackageOpenIcon
+							v-else-if="route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')"
+							aria-hidden="true"
+						/>
+						<GlassesIcon
+							v-else-if="route.name === 'discover-shaders' || route.path.startsWith('/shader/')"
+							aria-hidden="true"
+						/>
+						<PlugIcon
+							v-else-if="route.name === 'discover-plugins' || route.path.startsWith('/plugin/')"
+							aria-hidden="true"
+						/>
+						<ServerIcon
+							v-else-if="route.name === 'discover-servers' || route.path.startsWith('/server/')"
+							aria-hidden="true"
+						/>
+						<CompassIcon v-else aria-hidden="true" />
+						<span class="hidden md:contents">{{
+							formatMessage(commonMessages.discoverContentLabel)
+						}}</span>
+						<span class="contents md:hidden">{{ formatMessage(navMenuMessages.discover) }}</span>
+						<DropdownIcon aria-hidden="true" class="h-5 w-5" />
 
-							<template #mods>
-								<BoxIcon aria-hidden="true" />
-								{{ formatMessage(commonProjectTypeCategoryMessages.mod) }}
-							</template>
-							<template #resourcepacks>
-								<PaintbrushIcon aria-hidden="true" />
-								{{ formatMessage(commonProjectTypeCategoryMessages.resourcepack) }}
-							</template>
-							<template #datapacks>
-								<BracesIcon aria-hidden="true" />
-								{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
-							</template>
-							<template #plugins>
-								<PlugIcon aria-hidden="true" />
-								{{ formatMessage(commonProjectTypeCategoryMessages.plugin) }}
-							</template>
-							<template #shaders>
-								<GlassesIcon aria-hidden="true" />
-								{{ formatMessage(commonProjectTypeCategoryMessages.shader) }}
-							</template>
-							<template #modpacks>
-								<PackageOpenIcon aria-hidden="true" />
-								{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
-							</template>
-							<template #servers>
-								<ServerIcon aria-hidden="true" />
-								{{ formatMessage(commonProjectTypeCategoryMessages.server) }}
-							</template>
-						</TeleportOverflowMenu>
-					</ButtonStyled>
-					<ButtonStyled
-						type="transparent"
-						:highlighted="
+						<template #mods>
+							<BoxIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.mod) }}
+						</template>
+						<template #resourcepacks>
+							<PaintbrushIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.resourcepack) }}
+						</template>
+						<template #datapacks>
+							<BracesIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
+						</template>
+						<template #plugins>
+							<PlugIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.plugin) }}
+						</template>
+						<template #shaders>
+							<GlassesIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.shader) }}
+						</template>
+						<template #modpacks>
+							<PackageOpenIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
+						</template>
+						<template #servers>
+							<ServerIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.server) }}
+						</template>
+					</TeleportOverflowMenu>
+					<ButtonLink
+						type="quiet"
+						to="/hosting"
+						:class="
 							route.name?.startsWith('hosting') ||
 							(route.name?.startsWith('discover-') && !!route.query.sid)
-						"
-						:highlighted-style="
-							route.name === 'hosting' ? 'main-nav-primary' : 'main-nav-secondary'
+								? (route.name === 'hosting' ? 'main-nav-primary' : 'main-nav-secondary') ===
+									'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
 						"
 					>
-						<nuxt-link to="/hosting">
-							<ServerStackIcon aria-hidden="true" />
-							{{ formatMessage(navMenuMessages.hostAServer) }}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled type="transparent" :highlighted="route.name === 'app'">
-						<nuxt-link to="/app">
-							<DownloadIcon aria-hidden="true" />
-							<span class="hidden md:contents">{{
-								formatMessage(navMenuMessages.getModrinthApp)
-							}}</span>
-							<span class="contents md:hidden">{{
-								formatMessage(navMenuMessages.modrinthApp)
-							}}</span>
-						</nuxt-link>
-					</ButtonStyled>
+						<ServerStackIcon aria-hidden="true" />
+						{{ formatMessage(navMenuMessages.hostAServer) }}
+					</ButtonLink>
+					<ButtonLink
+						type="quiet"
+						to="/app"
+						:class="
+							route.name === 'app'
+								? true
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
+						"
+					>
+						<DownloadIcon aria-hidden="true" />
+						<span class="hidden md:contents">{{
+							formatMessage(navMenuMessages.getModrinthApp)
+						}}</span>
+						<span class="contents md:hidden">{{ formatMessage(navMenuMessages.modrinthApp) }}</span>
+					</ButtonLink>
 				</template>
 			</div>
 			<div class="flex items-center gap-1">
-				<ButtonStyled type="transparent">
-					<OverflowMenu
-						v-if="auth.user && isStaff(auth.user)"
-						class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
-						position="bottom"
-						direction="left"
-						:dropdown-id="`${basePopoutId}-staff`"
-						:aria-label="formatMessage(messages.createNew)"
-						:options="[
-							{
-								id: 'review-projects',
-								color: 'orange',
-								link: '/moderation',
-							},
-							{
-								id: 'tech-review',
-								color: 'orange',
-								link: '/moderation/technical-review',
-							},
-							{
-								id: 'review-reports',
-								color: 'orange',
-								link: '/moderation/reports',
-							},
-							{
-								id: 'external-projects',
-								color: 'orange',
-								link: '/moderation/external-projects',
-							},
-							{
-								divider: true,
-							},
-							{
-								id: 'file-lookup',
-								link: '/admin/file_lookup',
-							},
-							{
-								divider: true,
-								shown: isAdmin(auth.user),
-							},
-							{
-								id: 'user-lookup',
-								color: 'primary',
-								link: '/admin/user_email',
-								shown: isAdmin(auth.user),
-							},
-							{
-								id: 'affiliates',
-								color: 'primary',
-								link: '/admin/affiliates',
-								shown: isAdmin(auth.user),
-							},
-							{
-								id: 'servers-notices',
-								color: 'primary',
-								link: '/admin/servers/notices',
-								shown: isAdmin(auth.user),
-							},
-							{
-								id: 'servers-transfers',
-								color: 'primary',
-								link: '/admin/servers/transfers',
-								shown: isAdmin(auth.user),
-							},
-							{
-								id: 'servers-nodes',
-								color: 'primary',
-								action: (event) => $refs.modal_batch_credit.show(event),
-								shown: isAdmin(auth.user),
-							},
-							{
-								id: 'analytics-events',
-								color: 'primary',
-								link: '/admin/analytics/events',
-								shown: isAdmin(auth.user),
-							},
-						]"
-					>
-						<ModrinthIcon aria-hidden="true" />
-						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-						<template #review-projects>
-							<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.reviewProjects) }}
-						</template>
-						<template #tech-review>
-							<ShieldAlertIcon aria-hidden="true" /> {{ formatMessage(messages.techReview) }}
-						</template>
-						<template #review-reports>
-							<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.reports) }}
-						</template>
-						<template #external-projects>
-							<GlobeIcon aria-hidden="true" /> {{ formatMessage(messages.externalProjects) }}
-						</template>
-						<template #user-lookup>
-							<UserSearchIcon aria-hidden="true" /> {{ formatMessage(messages.lookupByEmail) }}
-						</template>
-						<template #file-lookup>
-							<FileIcon aria-hidden="true" /> {{ formatMessage(messages.fileLookup) }}
-						</template>
-						<template #servers-notices>
-							<IssuesIcon aria-hidden="true" /> {{ formatMessage(messages.manageServerNotices) }}
-						</template>
-						<template #servers-transfers>
-							<TransferIcon aria-hidden="true" /> Server transfers
-						</template>
-						<template #affiliates>
-							<AffiliateIcon aria-hidden="true" /> {{ formatMessage(messages.manageAffiliates) }}
-						</template>
-						<template #servers-nodes>
-							<ServerIcon aria-hidden="true" /> Credit server nodes
-						</template>
-						<template #analytics-events>
-							<ChartIcon aria-hidden="true" /> {{ formatMessage(messages.analyticsEvents) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
-				<ButtonStyled type="transparent">
-					<OverflowMenu
-						v-if="auth.user"
-						class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
-						position="bottom"
-						direction="left"
-						:dropdown-id="`${basePopoutId}-create`"
-						:aria-label="formatMessage(messages.createNew)"
-						:options="[
-							{
-								id: 'new-project',
-								action: (event) => requireVerifiedEmail(() => $refs.modal_creation.show(event)),
-							},
-							{
-								id: 'new-server-project',
-								action: (event) =>
-									requireVerifiedEmail(() => $refs.modal_creation.show(event, { type: 'server' })),
-							},
-							{
-								id: 'new-collection',
-								action: (event) =>
-									requireVerifiedEmail(() => $refs.modal_collection_creation.show(event)),
-							},
-							{ divider: true },
-							{
-								id: 'new-organization',
-								action: (event) =>
-									requireVerifiedEmail(() => $refs.modal_organization_creation.show(event)),
-							},
-						]"
-					>
-						<PlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.publish) }}
-						<template #new-project>
-							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newProject) }}
-						</template>
-						<template #new-server-project>
-							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newServerProject) }}
-						</template>
-						<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
-						<template #new-collection>
-							<CollectionIcon aria-hidden="true" /> {{ formatMessage(messages.newCollection) }}
-						</template>
-						<template #new-organization>
-							<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.newOrganization) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
-				<OverflowMenu
+				<TeleportOverflowMenu
+					v-if="auth.user && isStaff(auth.user)"
+					type="quiet"
+					:icon-only="false"
+					:label="formatMessage(messages.createNew)"
+					class="btn-dropdown-animation !gap-1 !rounded-xl !px-2"
+					:options="[
+						{
+							id: 'review-projects',
+							label: formatMessage(messages.reviewProjects),
+							type: 'link',
+							to: '/moderation',
+							tone: 'orange',
+						},
+						{
+							id: 'tech-review',
+							label: formatMessage(messages.techReview),
+							type: 'link',
+							to: '/moderation/technical-review',
+							tone: 'orange',
+						},
+						{
+							id: 'review-reports',
+							label: formatMessage(messages.reports),
+							type: 'link',
+							to: '/moderation/reports',
+							tone: 'orange',
+						},
+						{
+							id: 'external-projects',
+							label: formatMessage(messages.externalProjects),
+							type: 'link',
+							to: '/moderation/external-projects',
+							tone: 'orange',
+						},
+						{
+							type: 'divider',
+						},
+						{
+							id: 'file-lookup',
+							label: formatMessage(messages.fileLookup),
+							type: 'link',
+							to: '/admin/file_lookup',
+						},
+						{
+							type: 'divider',
+							shown: isAdmin(auth.user),
+						},
+						{
+							id: 'user-lookup',
+							label: formatMessage(messages.lookupByEmail),
+							type: 'link',
+							to: '/admin/user_email',
+							tone: 'brand',
+							shown: isAdmin(auth.user),
+						},
+						{
+							id: 'affiliates',
+							label: formatMessage(messages.manageAffiliates),
+							type: 'link',
+							to: '/admin/affiliates',
+							tone: 'brand',
+							shown: isAdmin(auth.user),
+						},
+						{
+							id: 'servers-notices',
+							label: formatMessage(messages.manageServerNotices),
+							type: 'link',
+							to: '/admin/servers/notices',
+							tone: 'brand',
+							shown: isAdmin(auth.user),
+						},
+						{
+							id: 'servers-transfers',
+							label: 'Server transfers',
+							type: 'link',
+							to: '/admin/servers/transfers',
+							tone: 'brand',
+							shown: isAdmin(auth.user),
+						},
+						{
+							id: 'servers-nodes',
+							label: 'Credit server nodes',
+							action: (event) => $refs.modal_batch_credit.show(event),
+							tone: 'brand',
+							shown: isAdmin(auth.user),
+						},
+						{
+							id: 'analytics-events',
+							label: formatMessage(messages.analyticsEvents),
+							type: 'link',
+							to: '/admin/analytics/events',
+							tone: 'brand',
+							shown: isAdmin(auth.user),
+						},
+					]"
+				>
+					<ModrinthIcon aria-hidden="true" />
+					<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
+					<template #review-projects>
+						<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.reviewProjects) }}
+					</template>
+					<template #tech-review>
+						<ShieldAlertIcon aria-hidden="true" /> {{ formatMessage(messages.techReview) }}
+					</template>
+					<template #review-reports>
+						<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.reports) }}
+					</template>
+					<template #external-projects>
+						<GlobeIcon aria-hidden="true" /> {{ formatMessage(messages.externalProjects) }}
+					</template>
+					<template #user-lookup>
+						<UserSearchIcon aria-hidden="true" /> {{ formatMessage(messages.lookupByEmail) }}
+					</template>
+					<template #file-lookup>
+						<FileIcon aria-hidden="true" /> {{ formatMessage(messages.fileLookup) }}
+					</template>
+					<template #servers-notices>
+						<IssuesIcon aria-hidden="true" /> {{ formatMessage(messages.manageServerNotices) }}
+					</template>
+					<template #servers-transfers>
+						<TransferIcon aria-hidden="true" /> Server transfers
+					</template>
+					<template #affiliates>
+						<AffiliateIcon aria-hidden="true" /> {{ formatMessage(messages.manageAffiliates) }}
+					</template>
+					<template #servers-nodes>
+						<ServerIcon aria-hidden="true" /> Credit server nodes
+					</template>
+					<template #analytics-events>
+						<ChartIcon aria-hidden="true" /> {{ formatMessage(messages.analyticsEvents) }}
+					</template>
+				</TeleportOverflowMenu>
+				<TeleportOverflowMenu
 					v-if="auth.user"
-					:dropdown-id="`${basePopoutId}-user`"
-					class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1 pr-1"
+					type="quiet"
+					:icon-only="false"
+					:label="formatMessage(messages.createNew)"
+					class="btn-dropdown-animation !gap-1 !rounded-xl !px-2"
+					:options="[
+						{
+							id: 'new-project',
+							label: formatMessage(messages.newProject),
+							action: (event) => requireVerifiedEmail(() => $refs.modal_creation.show(event)),
+						},
+						{
+							id: 'new-server-project',
+							label: formatMessage(messages.newServerProject),
+							action: (event) =>
+								requireVerifiedEmail(() => $refs.modal_creation.show(event, { type: 'server' })),
+						},
+						{
+							id: 'new-collection',
+							label: formatMessage(messages.newCollection),
+							action: (event) =>
+								requireVerifiedEmail(() => $refs.modal_collection_creation.show(event)),
+						},
+						{ type: 'divider' },
+						{
+							id: 'new-organization',
+							label: formatMessage(messages.newOrganization),
+							action: (event) =>
+								requireVerifiedEmail(() => $refs.modal_organization_creation.show(event)),
+						},
+					]"
+				>
+					<PlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.publish) }}
+					<template #new-project>
+						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newProject) }}
+					</template>
+					<template #new-server-project>
+						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newServerProject) }}
+					</template>
+					<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
+					<template #new-collection>
+						<CollectionIcon aria-hidden="true" /> {{ formatMessage(messages.newCollection) }}
+					</template>
+					<template #new-organization>
+						<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.newOrganization) }}
+					</template>
+				</TeleportOverflowMenu>
+				<TeleportOverflowMenu
+					v-if="auth.user"
+					type="quiet"
+					size="lg"
+					interaction="none"
+					:icon-only="false"
+					:label="formatMessage(commonMessages.moreOptionsButton)"
+					class="btn-dropdown-animation !gap-1 !rounded-xl !px-2 !pr-1"
 					:options="userMenuOptions"
 				>
 					<Avatar :src="auth.user.avatar_url" aria-hidden="true" circle />
@@ -536,19 +605,19 @@
 					<template #sign-out>
 						<LogOutIcon aria-hidden="true" /> {{ formatMessage(commonMessages.signOutButton) }}
 					</template>
-				</OverflowMenu>
+				</TeleportOverflowMenu>
 				<template v-else>
-					<ButtonStyled color="brand">
-						<nuxt-link :to="signInRouteObj">
-							<LogInIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.signInButton) }}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled circular>
-						<nuxt-link :v-tooltip="formatMessage(commonMessages.settingsLabel)" to="/settings">
-							<SettingsIcon :aria-label="formatMessage(commonMessages.settingsLabel)" />
-						</nuxt-link>
-					</ButtonStyled>
+					<ButtonLink type="colored" color="brand" :to="signInRouteObj">
+						<LogInIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.signInButton) }}
+					</ButtonLink>
+					<ButtonLink
+						v-tooltip="formatMessage(commonMessages.settingsLabel)"
+						to="/settings"
+						class="!w-9 !rounded-full !px-0"
+					>
+						<SettingsIcon :aria-label="formatMessage(commonMessages.settingsLabel)" />
+					</ButtonLink>
 				</template>
 			</div>
 		</header>
@@ -773,7 +842,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	ButtonLink,
 	commonMessages,
 	commonProjectTypeCategoryMessages,
 	commonSettingsMessages,
@@ -782,12 +851,11 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectPageContext,
-	OverflowMenu,
 	providePageContext,
+	TeleportOverflowMenu,
 	useHostingIntercom,
 	useVIntl,
 } from '@modrinth/ui'
-import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
 
@@ -903,8 +971,6 @@ const showPrideBackdrop = computed(() => {
 	return !!currentProjectId.value && prideProjectIds.value.has(currentProjectId.value)
 })
 
-const basePopoutId = useId()
-
 async function fetchIntercomToken() {
 	return $fetch('/api/intercom/messenger-jwt', {
 		query: hostingIntercomServerId.value ? { server_id: hostingIntercomServerId.value } : {},
@@ -1157,26 +1223,36 @@ const userMenuOptions = computed(() => {
 	let options = [
 		{
 			id: 'profile',
-			link: `/user/${user.username}`,
+			label: formatMessage(messages.profile),
+			type: 'link',
+			to: `/user/${user.username}`,
 		},
 		{
 			id: 'plus',
-			link: '/plus',
-			color: 'purple',
+			label: formatMessage(messages.upgradeToModrinthPlus),
+			type: 'link',
+			to: '/plus',
+			tone: 'purple',
 			shown: !flags.value.hidePlusPromoInUserMenu && !hasActiveMidas(user),
 		},
 		{
 			id: 'servers',
-			link: '/hosting/manage',
+			label: formatMessage(messages.myServers),
+			type: 'link',
+			to: '/hosting/manage',
 		},
 		{
 			id: 'flags',
-			link: '/settings/flags',
+			label: formatMessage(commonSettingsMessages.featureFlags),
+			type: 'link',
+			to: '/settings/flags',
 			shown: flags.value.developerMode,
 		},
 		{
 			id: 'settings',
-			link: '/settings',
+			label: formatMessage(commonMessages.settingsLabel),
+			type: 'link',
+			to: '/settings',
 		},
 	]
 
@@ -1184,56 +1260,73 @@ const userMenuOptions = computed(() => {
 	options = [
 		...options,
 		{
-			divider: true,
+			type: 'divider',
 		},
 		{
 			id: 'notifications',
-			link: '/dashboard/notifications',
+			label: formatMessage(commonMessages.notificationsLabel),
+			type: 'link',
+			to: '/dashboard/notifications',
 		},
 		{
 			id: 'reports',
-			link: '/dashboard/reports',
+			label: formatMessage(messages.activeReports),
+			type: 'link',
+			to: '/dashboard/reports',
 		},
 		{
 			id: 'saved',
-			link: '/dashboard/collections',
+			label: formatMessage(commonMessages.collectionsLabel),
+			type: 'link',
+			to: '/dashboard/collections',
 		},
 		{
-			divider: true,
+			type: 'divider',
 		},
 		{
 			id: 'projects',
-			link: '/dashboard/projects',
+			label: formatMessage(messages.projects),
+			type: 'link',
+			to: '/dashboard/projects',
 		},
 		{
 			id: 'organizations',
-			link: '/dashboard/organizations',
+			label: formatMessage(messages.organizations),
+			type: 'link',
+			to: '/dashboard/organizations',
 		},
 		{
 			id: 'analytics',
-			link: '/dashboard/analytics',
+			label: formatMessage(commonMessages.analyticsButton),
+			type: 'link',
+			to: '/dashboard/analytics',
 		},
 		{
 			id: 'affiliate-links',
-			link: '/dashboard/affiliate-links',
+			label: formatMessage(commonMessages.affiliateLinksButton),
+			type: 'link',
+			to: '/dashboard/affiliate-links',
 			shown: user.badges & UserBadge.AFFILIATE,
 		},
 		{
 			id: 'revenue',
-			link: '/dashboard/revenue',
+			label: formatMessage(messages.revenue),
+			type: 'link',
+			to: '/dashboard/revenue',
 		},
 	]
 
 	options = [
 		...options,
 		{
-			divider: true,
+			type: 'divider',
 		},
 		{
 			id: 'sign-out',
-			color: 'danger',
-			action: () => logoutUser(),
+			label: formatMessage(commonMessages.signOutButton),
+			tone: 'red',
 			hoverFilled: true,
+			action: () => logoutUser(),
 		},
 	]
 	return options
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 456d8b2a82..f0a67eec5e 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -21,11 +21,9 @@
 							formatMessage(messages.settingsTitle)
 						}}</span>
 						<div class="flex gap-2">
-							<ButtonStyled>
-								<nuxt-link to="/dashboard/projects"
-									><ListIcon /> {{ formatMessage(messages.visitProjectsDashboard) }}
-								</nuxt-link>
-							</ButtonStyled>
+							<ButtonLink to="/dashboard/projects"
+								><ListIcon /> {{ formatMessage(messages.visitProjectsDashboard) }}
+							</ButtonLink>
 						</div>
 					</div>
 					<ProjectMemberHeader
@@ -138,93 +136,97 @@
 						@category="(category) => router.push(`${projectSearchUrl}?f=categories:${category}`)"
 					>
 						<template #actions>
-							<ButtonStyled v-if="auth.user && currentMember" size="large" color="brand" circular>
-								<nuxt-link
-									v-tooltip="formatMessage(messages.editProject)"
-									:to="`${projectPath}/settings`"
-									class="!font-bold lg:!hidden"
-								>
-									<SettingsIcon />
-								</nuxt-link>
-							</ButtonStyled>
-							<ButtonStyled v-if="auth.user && currentMember" size="large" color="brand">
-								<nuxt-link :to="`${projectPath}/settings`" class="!font-bold max-lg:!hidden">
-									<SettingsIcon />
-									{{ formatMessage(messages.editProject) }}
-								</nuxt-link>
-							</ButtonStyled>
+							<ButtonLink
+								v-if="auth.user && currentMember"
+								v-tooltip="formatMessage(messages.editProject)"
+								type="colored"
+								color="brand"
+								size="xl"
+								:to="`${projectPath}/settings`"
+								class="!w-12 !rounded-full !px-0 !font-bold lg:!hidden"
+							>
+								<SettingsIcon />
+							</ButtonLink>
+							<ButtonLink
+								v-if="auth.user && currentMember"
+								type="colored"
+								color="brand"
+								size="xl"
+								:to="`${projectPath}/settings`"
+								class="!font-bold max-lg:!hidden"
+							>
+								<SettingsIcon />
+								{{ formatMessage(messages.editProject) }}
+							</ButtonLink>
 
 							<div class="hidden sm:contents">
-								<ButtonStyled
-									v-if="!isServerProject"
-									size="large"
-									:color="projectHeaderPrimaryColor"
-									:circular="!!auth.user && !!currentMember"
+								<IconButton
+									v-if="!isServerProject && auth.user && currentMember"
+									v-tooltip="formatMessage(commonMessages.downloadButton)"
+									:type="projectHeaderPrimaryColor === 'brand' ? 'colored' : 'base'"
+									:color="projectHeaderPrimaryColor === 'brand' ? 'brand' : undefined"
+									size="xl"
+									:label="formatMessage(commonMessages.downloadButton)"
+									@click="handleProjectHeaderPrimary"
 								>
-									<button
-										v-tooltip="
-											auth.user && currentMember
-												? formatMessage(commonMessages.downloadButton)
-												: undefined
-										"
-										type="button"
-										:aria-label="formatMessage(commonMessages.downloadButton)"
-										@click="handleProjectHeaderPrimary"
-									>
-										<DownloadIcon />
-										{{
-											auth.user && currentMember ? '' : formatMessage(commonMessages.downloadButton)
-										}}
-									</button>
-								</ButtonStyled>
-								<ButtonStyled
-									v-else
-									size="large"
-									:color="projectHeaderPrimaryColor"
-									:circular="!!auth.user && !!currentMember"
+									<DownloadIcon />
+								</IconButton>
+								<Button
+									v-else-if="!isServerProject"
+									:type="projectHeaderPrimaryColor === 'brand' ? 'colored' : 'base'"
+									:color="projectHeaderPrimaryColor === 'brand' ? 'brand' : undefined"
+									size="xl"
+									@click="handleProjectHeaderPrimary"
 								>
-									<button
-										v-tooltip="
-											auth.user && currentMember
-												? formatMessage(commonMessages.playButton)
-												: undefined
-										"
-										type="button"
-										:aria-label="formatMessage(commonMessages.playButton)"
-										@click="handleProjectHeaderPrimary"
-									>
-										<PlayIcon />
-										{{ auth.user && currentMember ? '' : formatMessage(commonMessages.playButton) }}
-									</button>
-								</ButtonStyled>
+									<DownloadIcon />
+									{{ formatMessage(commonMessages.downloadButton) }}
+								</Button>
+								<IconButton
+									v-if="isServerProject && auth.user && currentMember"
+									v-tooltip="formatMessage(commonMessages.playButton)"
+									:type="projectHeaderPrimaryColor === 'brand' ? 'colored' : 'base'"
+									:color="projectHeaderPrimaryColor === 'brand' ? 'brand' : undefined"
+									size="xl"
+									:label="formatMessage(commonMessages.playButton)"
+									@click="handleProjectHeaderPrimary"
+								>
+									<PlayIcon />
+								</IconButton>
+								<Button
+									v-else-if="isServerProject"
+									:type="projectHeaderPrimaryColor === 'brand' ? 'colored' : 'base'"
+									:color="projectHeaderPrimaryColor === 'brand' ? 'brand' : undefined"
+									size="xl"
+									@click="handleProjectHeaderPrimary"
+								>
+									<PlayIcon />
+									{{ formatMessage(commonMessages.playButton) }}
+								</Button>
 							</div>
 
 							<div class="contents sm:hidden">
-								<ButtonStyled
+								<IconButton
 									v-if="!isServerProject"
-									size="large"
-									circular
-									:color="projectHeaderPrimaryColor"
+									:type="projectHeaderPrimaryColor === 'brand' ? 'colored' : 'base'"
+									:color="projectHeaderPrimaryColor === 'brand' ? 'brand' : undefined"
+									size="xl"
+									:label="formatMessage(commonMessages.downloadButton)"
+									class="flex sm:hidden"
+									@click="handleProjectHeaderPrimary"
 								>
-									<button
-										type="button"
-										:aria-label="formatMessage(commonMessages.downloadButton)"
-										class="flex sm:hidden"
-										@click="handleProjectHeaderPrimary"
-									>
-										<DownloadIcon />
-									</button>
-								</ButtonStyled>
-								<ButtonStyled v-else size="large" circular :color="projectHeaderPrimaryColor">
-									<button
-										type="button"
-										:aria-label="formatMessage(commonMessages.playButton)"
-										class="flex sm:hidden"
-										@click="handleProjectHeaderPrimary"
-									>
-										<PlayIcon />
-									</button>
-								</ButtonStyled>
+									<DownloadIcon />
+								</IconButton>
+								<IconButton
+									v-else
+									:type="projectHeaderPrimaryColor === 'brand' ? 'colored' : 'base'"
+									:color="projectHeaderPrimaryColor === 'brand' ? 'brand' : undefined"
+									size="xl"
+									:label="formatMessage(commonMessages.playButton)"
+									class="flex sm:hidden"
+									@click="handleProjectHeaderPrimary"
+								>
+									<PlayIcon />
+								</IconButton>
 							</div>
 
 							<Tooltip
@@ -238,16 +240,16 @@
 								:auto-hide="false"
 								placement="bottom-start"
 							>
-								<ButtonStyled circular size="large">
-									<nuxt-link
-										v-tooltip="formatMessage(messages.createServerTooltip)"
-										:to="projectHeaderCreateServerTo"
-										:aria-label="formatMessage(messages.serversPromoTitle)"
-										@click="dismissProjectHeaderCreateServerPrompt"
-									>
-										<ServerPlusIcon />
-									</nuxt-link>
-								</ButtonStyled>
+								<ButtonLink
+									v-tooltip="formatMessage(messages.createServerTooltip)"
+									size="xl"
+									:to="projectHeaderCreateServerTo"
+									:aria-label="formatMessage(messages.serversPromoTitle)"
+									class="!w-12 !rounded-full !px-0"
+									@click="dismissProjectHeaderCreateServerPrompt"
+								>
+									<ServerPlusIcon />
+								</ButtonLink>
 								<template #popper>
 									<div class="grid max-w-[18rem] gap-2">
 										<div class="flex items-center justify-between gap-4">
@@ -261,14 +263,15 @@
 													{{ formatMessage(commonMessages.newBadge) }}
 												</span>
 											</div>
-											<ButtonStyled size="small" circular>
-												<button
-													v-tooltip="formatMessage(messages.dontShowAgain)"
-													@click="dismissProjectHeaderCreateServerPrompt"
-												>
-													<XIcon aria-hidden="true" />
-												</button>
-											</ButtonStyled>
+											<IconButton
+												v-tooltip="formatMessage(messages.dontShowAgain)"
+												class="!size-6"
+												size="xs"
+												:label="formatMessage(messages.dontShowAgain)"
+												@click="dismissProjectHeaderCreateServerPrompt"
+											>
+												<XIcon aria-hidden="true" />
+											</IconButton>
 										</div>
 										<p class="m-0 text-sm font-medium leading-tight text-secondary">
 											{{ formatMessage(messages.serversPromoDescription) }}
@@ -286,55 +289,58 @@
 									</div>
 								</template>
 							</Tooltip>
-							<ButtonStyled v-else-if="showProjectHeaderCreateServerAction" circular size="large">
-								<nuxt-link
-									v-tooltip="formatMessage(messages.createServerTooltip)"
-									:to="projectHeaderCreateServerTo"
-									:aria-label="formatMessage(messages.serversPromoTitle)"
-									@click="dismissProjectHeaderCreateServerPrompt"
-								>
-									<ServerPlusIcon />
-								</nuxt-link>
-							</ButtonStyled>
+							<ButtonLink
+								v-else-if="showProjectHeaderCreateServerAction"
+								v-tooltip="formatMessage(messages.createServerTooltip)"
+								size="xl"
+								:to="projectHeaderCreateServerTo"
+								:aria-label="formatMessage(messages.serversPromoTitle)"
+								class="!w-12 !rounded-full !px-0"
+								@click="dismissProjectHeaderCreateServerPrompt"
+							>
+								<ServerPlusIcon />
+							</ButtonLink>
 
-							<ButtonStyled circular size="large">
-								<ClientOnly>
-									<button
-										v-if="auth.user"
-										v-tooltip="
-											following
-												? formatMessage(commonMessages.unfollowButton)
-												: formatMessage(commonMessages.followButton)
-										"
-										type="button"
-										:aria-label="
-											following
-												? formatMessage(commonMessages.unfollowButton)
-												: formatMessage(commonMessages.followButton)
-										"
-										@click="followProjectFromHeader"
-									>
-										<HeartIcon :fill="following ? 'currentColor' : 'none'" />
-									</button>
-									<nuxt-link
-										v-else
+							<ClientOnly>
+								<IconButton
+									v-if="auth.user"
+									v-tooltip="
+										following
+											? formatMessage(commonMessages.unfollowButton)
+											: formatMessage(commonMessages.followButton)
+									"
+									size="xl"
+									:label="
+										following
+											? formatMessage(commonMessages.unfollowButton)
+											: formatMessage(commonMessages.followButton)
+									"
+									@click="followProjectFromHeader"
+								>
+									<HeartIcon :fill="following ? 'currentColor' : 'none'" />
+								</IconButton>
+								<ButtonLink
+									v-else
+									v-tooltip="formatMessage(commonMessages.followButton)"
+									size="xl"
+									:to="signInRouteObj"
+									:aria-label="formatMessage(commonMessages.followButton)"
+									class="!w-12 !rounded-full !px-0"
+								>
+									<HeartIcon aria-hidden="true" />
+								</ButtonLink>
+								<template #fallback>
+									<ButtonLink
 										v-tooltip="formatMessage(commonMessages.followButton)"
+										size="xl"
 										:to="signInRouteObj"
 										:aria-label="formatMessage(commonMessages.followButton)"
+										class="!w-12 !rounded-full !px-0"
 									>
 										<HeartIcon aria-hidden="true" />
-									</nuxt-link>
-									<template #fallback>
-										<nuxt-link
-											v-tooltip="formatMessage(commonMessages.followButton)"
-											:to="signInRouteObj"
-											:aria-label="formatMessage(commonMessages.followButton)"
-										>
-											<HeartIcon aria-hidden="true" />
-										</nuxt-link>
-									</template>
-								</ClientOnly>
-							</ButtonStyled>
+									</ButtonLink>
+								</template>
+							</ClientOnly>
 
 							<ProjectCollectionSaveButton
 								:auth-user="auth.user"
@@ -349,15 +355,15 @@
 								:create-collection="(event) => modalCollection?.show(event)"
 							/>
 
-							<ButtonStyled circular size="large" type="transparent">
-								<TeleportOverflowMenu
-									:options="projectHeaderMoreActions"
-									:tooltip="formatMessage(commonMessages.moreOptionsButton)"
-									:aria-label="formatMessage(commonMessages.moreOptionsButton)"
-								>
-									<MoreVerticalIcon />
-								</TeleportOverflowMenu>
-							</ButtonStyled>
+							<TeleportOverflowMenu
+								type="quiet"
+								size="xl"
+								:label="formatMessage(commonMessages.moreOptionsButton)"
+								:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+								:options="projectHeaderMoreActions"
+							>
+								<MoreVerticalIcon />
+							</TeleportOverflowMenu>
 						</template>
 					</ProjectPageHeader>
 					<ProjectMemberHeader
@@ -406,11 +412,15 @@
 						>
 							{{ formatMessage(messages.environmentMigrationLink) }}
 						</nuxt-link>
-						<ButtonStyled v-if="hasEditDetailsPermission" color="orange">
-							<button class="mt-3 w-fit" @click="() => projectEnvironmentModal.show()">
-								<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-if="hasEditDetailsPermission"
+							type="colored"
+							color="orange"
+							class="mt-3 w-fit"
+							@click="() => projectEnvironmentModal.show()"
+						>
+							<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
+						</Button>
 					</Admonition>
 					<MessageBanner v-if="project.status === 'archived'" message-type="warning" class="my-4">
 						{{ formatMessage(messages.archivedMessage, { title: project.title }) }}
@@ -506,9 +516,11 @@ import {
 	Admonition,
 	Avatar,
 	BrowseInstallHeader,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	defineMessages,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
@@ -1589,27 +1601,26 @@ const projectHeaderMoreActions = computed(() => {
 			id: 'analytics',
 			label: formatMessage(commonMessages.analyticsButton),
 			icon: ChartIcon,
-			link: `${projectPath.value}/settings/analytics`,
-			shown: !!auth.value.user && !!currentMember.value,
-		},
-		{
-			divider: true,
+			type: 'link',
+			to: `${projectPath.value}/settings/analytics`,
 			shown: !!auth.value.user && !!currentMember.value,
 		},
+		{ type: 'divider', shown: !!auth.value.user && !!currentMember.value },
 		{
 			id: 'moderation-checklist',
 			label: formatMessage(messages.reviewProject),
 			icon: ScaleIcon,
 			action: openModerationChecklistFromMenu,
-			color: 'orange',
+			tone: 'orange',
 			shown: !!auth.value.user && isStaff && !showModerationChecklist.value,
 		},
 		{
 			id: 'tech-review',
 			label: 'Tech review',
 			icon: ScanEyeIcon,
-			link: `/moderation/technical-review/${project.value?.id}`,
-			color: 'orange',
+			type: 'link',
+			to: `/moderation/technical-review/${project.value?.id}`,
+			tone: 'orange',
 			shown: !!auth.value.user && isStaff,
 		},
 		{
@@ -1617,19 +1628,16 @@ const projectHeaderMoreActions = computed(() => {
 			label: formatMessage(messages.rescanModpack),
 			icon: FolderSearchIcon,
 			action: () => scanModal.value?.show(),
-			color: 'orange',
+			tone: 'orange',
 			shown: !!auth.value.user && isStaff && project.value?.actualProjectType === 'modpack',
 		},
-		{
-			divider: true,
-			shown: !!auth.value.user && isStaff,
-		},
+		{ type: 'divider', shown: !!auth.value.user && isStaff },
 		{
 			id: 'report',
 			label: formatMessage(commonMessages.reportButton),
 			icon: ReportIcon,
 			action: reportProjectFromHeader,
-			color: 'red',
+			tone: 'red',
 			shown: !isMember.value,
 		},
 		{
diff --git a/apps/frontend/src/pages/[type]/[project]/changelog.vue b/apps/frontend/src/pages/[type]/[project]/changelog.vue
index f48956653a..cd220347b2 100644
--- a/apps/frontend/src/pages/[type]/[project]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[project]/changelog.vue
@@ -53,17 +53,18 @@
 										{{ formatDate(version.date_published) }}</span
 									>
 								</div>
-								<ButtonStyled v-if="getPrimaryFile(version)" color="brand" type="transparent">
-									<a
-										class="ml-auto"
-										:href="createDownloadUrl(version)"
-										:download="getPrimaryFile(version)?.filename"
-										:title="`Download ${version.name}`"
-									>
-										<DownloadIcon aria-hidden="true" />
-										Download
-									</a>
-								</ButtonStyled>
+								<ButtonLink
+									v-if="getPrimaryFile(version)"
+									type="quiet"
+									color="brand"
+									class="ml-auto"
+									:href="createDownloadUrl(version)"
+									:download="getPrimaryFile(version)?.filename"
+									:title="`Download ${version.name}`"
+								>
+									<DownloadIcon aria-hidden="true" />
+									Download
+								</ButtonLink>
 							</div>
 							<div
 								v-if="version.changelog && !version.duplicate"
@@ -90,7 +91,7 @@
 <script setup>
 import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	ButtonLink,
 	injectModrinthClient,
 	injectProjectPageContext,
 	Pagination,
diff --git a/apps/frontend/src/pages/[type]/[project]/gallery.vue b/apps/frontend/src/pages/[type]/[project]/gallery.vue
index 801a86017d..edce759740 100644
--- a/apps/frontend/src/pages/[type]/[project]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/gallery.vue
@@ -10,24 +10,23 @@
 					<div class="file-header">
 						<ImageIcon aria-hidden="true" />
 						<strong>{{ editFile ? editFile.name : 'Current image' }}</strong>
-						<ButtonStyled v-if="editIndex === -1" type="outlined">
-							<FileInput
-								class="button-like"
-								prompt="Replace"
-								:accept="acceptFileTypes"
-								:max-size="5242880"
-								should-always-reset
-								aria-label="Replace image"
-								@change="
-									(x) => {
-										editFile = x[0]
-										showPreviewImage()
-									}
-								"
-							>
-								<TransferIcon aria-hidden="true" />
-							</FileInput>
-						</ButtonStyled>
+						<FileButton
+							v-if="editIndex === -1"
+							type="outlined"
+							class="button-like"
+							prompt="Replace"
+							:accept="acceptFileTypes"
+							:max-size="5242880"
+							aria-label="Replace image"
+							@change="
+								(x) => {
+									editFile = x[0]
+									showPreviewImage()
+								}
+							"
+						>
+							<TransferIcon aria-hidden="true" />
+						</FileButton>
 					</div>
 					<img
 						:src="
@@ -74,37 +73,44 @@
 						You can feature one image on your project to be used as a banner image.
 					</span>
 				</label>
-				<ButtonStyled v-if="!editFeatured">
-					<button id="gallery-image-featured" class="w-fit" @click="editFeatured = true">
-						<StarIcon aria-hidden="true" />
-						Set as banner
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button id="gallery-image-featured" class="w-fit" @click="editFeatured = false">
-						<StarIcon fill="currentColor" aria-hidden="true" />
-						Unset as banner
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="!editFeatured"
+					id="gallery-image-featured"
+					class="w-fit"
+					@click="editFeatured = true"
+				>
+					<StarIcon aria-hidden="true" />
+					Set as banner
+				</Button>
+				<Button v-else id="gallery-image-featured" class="w-fit" @click="editFeatured = false">
+					<StarIcon fill="currentColor" aria-hidden="true" />
+					Unset as banner
+				</Button>
 				<div class="button-group">
-					<ButtonStyled type="outlined">
-						<button @click="modalEditItem?.hide()">
-							<XIcon aria-hidden="true" />
-							Cancel
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="editIndex === -1" color="brand">
-						<button :disabled="shouldPreventActions" @click="createGalleryItem">
-							<PlusIcon aria-hidden="true" />
-							Add gallery image
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else color="brand">
-						<button :disabled="shouldPreventActions" @click="editGalleryItem">
-							<SaveIcon aria-hidden="true" />
-							Save changes
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="modalEditItem?.hide()">
+						<XIcon aria-hidden="true" />
+						Cancel
+					</Button>
+					<Button
+						v-if="editIndex === -1"
+						type="colored"
+						color="brand"
+						:disabled="shouldPreventActions"
+						@click="createGalleryItem"
+					>
+						<PlusIcon aria-hidden="true" />
+						Add gallery image
+					</Button>
+					<Button
+						v-else
+						type="colored"
+						color="brand"
+						:disabled="shouldPreventActions"
+						@click="editGalleryItem"
+					>
+						<SaveIcon aria-hidden="true" />
+						Save changes
+					</Button>
 				</div>
 			</div>
 		</Modal>
@@ -146,40 +152,40 @@
 					</div>
 					<div class="controls">
 						<div class="flex gap-2">
-							<ButtonStyled circular>
-								<button class="close" @click="expandedGalleryItem = null">
-									<XIcon aria-hidden="true" />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled circular>
-								<a
-									class="open"
-									target="_blank"
-									:href="
-										expandedGalleryItem?.raw_url
-											? expandedGalleryItem?.raw_url
-											: 'https://cdn.modrinth.com/placeholder-banner.svg'
-									"
-								>
-									<ExternalIcon aria-hidden="true" />
-								</a>
-							</ButtonStyled>
-							<ButtonStyled circular>
-								<button @click="zoomedIn = !zoomedIn">
-									<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-									<ContractIcon v-else aria-hidden="true" />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="filteredGallery.length > 1" circular>
-								<button class="previous" @click="previousImage()">
-									<LeftArrowIcon aria-hidden="true" />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="filteredGallery.length > 1" circular>
-								<button class="next" @click="nextImage()">
-									<RightArrowIcon aria-hidden="true" />
-								</button>
-							</ButtonStyled>
+							<IconButton label="Close" class="close" @click="expandedGalleryItem = null">
+								<XIcon aria-hidden="true" />
+							</IconButton>
+							<ButtonLink
+								class="open !w-9 !rounded-full !px-0"
+								target="_blank"
+								:href="
+									expandedGalleryItem?.raw_url
+										? expandedGalleryItem?.raw_url
+										: 'https://cdn.modrinth.com/placeholder-banner.svg'
+								"
+							>
+								<ExternalIcon aria-hidden="true" />
+							</ButtonLink>
+							<IconButton label="Toggle zoom" @click="zoomedIn = !zoomedIn">
+								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+								<ContractIcon v-else aria-hidden="true" />
+							</IconButton>
+							<IconButton
+								v-if="filteredGallery.length > 1"
+								label="Previous image"
+								class="previous"
+								@click="previousImage()"
+							>
+								<LeftArrowIcon aria-hidden="true" />
+							</IconButton>
+							<IconButton
+								v-if="filteredGallery.length > 1"
+								label="Next image"
+								class="next"
+								@click="nextImage()"
+							>
+								<RightArrowIcon aria-hidden="true" />
+							</IconButton>
 						</div>
 					</div>
 				</div>
@@ -187,19 +193,19 @@
 		</div>
 
 		<div v-if="currentMember && filteredGallery.length" class="card header-buttons">
-			<ButtonStyled color="brand">
-				<FileInput
-					:max-size="5242880"
-					:accept="acceptFileTypes"
-					prompt="Upload an image"
-					aria-label="Upload an image"
-					class="button-like"
-					:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
-					@change="handleFiles"
-				>
-					<UploadIcon aria-hidden="true" />
-				</FileInput>
-			</ButtonStyled>
+			<FileButton
+				type="colored"
+				color="brand"
+				:max-size="5242880"
+				:accept="acceptFileTypes"
+				prompt="Upload an image"
+				aria-label="Upload an image"
+				class="button-like"
+				:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
+				@change="handleFiles"
+			>
+				<UploadIcon aria-hidden="true" />
+			</FileButton>
 			<span class="indicator">
 				<InfoIcon aria-hidden="true" /> Click to choose an image or drag one onto this page
 			</span>
@@ -233,37 +239,33 @@
 						{{ formatDate(item.created) }}
 					</div>
 					<div v-if="currentMember" class="gallery-buttons input-group">
-						<ButtonStyled>
-							<button
-								@click="
-									() => {
-										resetEdit()
-										editIndex = index
-										editTitle = item.title ?? ''
-										editDescription = item.description ?? ''
-										editFeatured = item.featured
-										editOrder = item.ordering
-										modalEditItem?.show()
-									}
-								"
-							>
-								<EditIcon aria-hidden="true" />
-								Edit
-							</button>
-						</ButtonStyled>
-						<ButtonStyled>
-							<button
-								@click="
-									() => {
-										deleteIndex = index
-										modalConfirm?.show()
-									}
-								"
-							>
-								<TrashIcon aria-hidden="true" />
-								Remove
-							</button>
-						</ButtonStyled>
+						<Button
+							@click="
+								() => {
+									resetEdit()
+									editIndex = index
+									editTitle = item.title ?? ''
+									editDescription = item.description ?? ''
+									editFeatured = item.featured
+									editOrder = item.ordering
+									modalEditItem?.show()
+								}
+							"
+						>
+							<EditIcon aria-hidden="true" />
+							Edit
+						</Button>
+						<Button
+							@click="
+								() => {
+									deleteIndex = index
+									modalConfirm?.show()
+								}
+							"
+						>
+							<TrashIcon aria-hidden="true" />
+							Remove
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -300,10 +302,12 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	ConfirmModal,
 	DropArea,
-	FileInput,
+	FileButton,
+	IconButton,
 	injectProjectPageContext,
 	NewModal as Modal,
 	StyledInput,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/environment.vue b/apps/frontend/src/pages/[type]/[project]/settings/environment.vue
index 84e4ec6cb9..f4c1affea5 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/environment.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/environment.vue
@@ -12,14 +12,14 @@
 				</div>
 				<div>Visit Project Settings to manage environments for each version.</div>
 			</div>
-			<ButtonStyled color="green">
-				<nuxt-link
-					:to="`/${projectV2.project_type}/${projectV2.id}/settings/versions`"
-					class="items flex"
-				>
-					<SettingsIcon /> Edit versions
-				</nuxt-link>
-			</ButtonStyled>
+			<ButtonLink
+				type="colored"
+				color="green"
+				:to="`/${projectV2.project_type}/${projectV2.id}/settings/versions`"
+				class="items flex"
+			>
+				<SettingsIcon /> Edit versions
+			</ButtonLink>
 		</div>
 	</div>
 </template>
@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { SettingsIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	ButtonLink,
 	EnvironmentMigration,
 	injectProjectPageContext,
 	LoadingIndicator,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
index cf135ac425..765b6a65ef 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
@@ -10,24 +10,23 @@
 					<div class="file-header">
 						<ImageIcon aria-hidden="true" />
 						<strong>{{ editFile ? editFile.name : 'Current image' }}</strong>
-						<ButtonStyled v-if="editIndex === -1" type="outlined">
-							<FileInput
-								class="button-like"
-								prompt="Replace"
-								:accept="acceptFileTypes"
-								:max-size="5242880"
-								should-always-reset
-								aria-label="Replace image"
-								@change="
-									(x) => {
-										editFile = x[0]
-										showPreviewImage()
-									}
-								"
-							>
-								<TransferIcon aria-hidden="true" />
-							</FileInput>
-						</ButtonStyled>
+						<FileButton
+							v-if="editIndex === -1"
+							type="outlined"
+							class="button-like"
+							prompt="Replace"
+							:accept="acceptFileTypes"
+							:max-size="5242880"
+							aria-label="Replace image"
+							@change="
+								(x) => {
+									editFile = x[0]
+									showPreviewImage()
+								}
+							"
+						>
+							<TransferIcon aria-hidden="true" />
+						</FileButton>
 					</div>
 					<img
 						:src="
@@ -74,37 +73,44 @@
 						You can feature one image on your project to be used as a banner image.
 					</span>
 				</label>
-				<ButtonStyled v-if="!editFeatured">
-					<button id="gallery-image-featured" class="w-fit" @click="editFeatured = true">
-						<StarIcon aria-hidden="true" />
-						Set as banner
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button id="gallery-image-featured" class="w-fit" @click="editFeatured = false">
-						<StarIcon fill="currentColor" aria-hidden="true" />
-						Unset as banner
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="!editFeatured"
+					id="gallery-image-featured"
+					class="w-fit"
+					@click="editFeatured = true"
+				>
+					<StarIcon aria-hidden="true" />
+					Set as banner
+				</Button>
+				<Button v-else id="gallery-image-featured" class="w-fit" @click="editFeatured = false">
+					<StarIcon fill="currentColor" aria-hidden="true" />
+					Unset as banner
+				</Button>
 				<div class="button-group">
-					<ButtonStyled type="outlined">
-						<button @click="modal_edit_item.hide()">
-							<XIcon aria-hidden="true" />
-							Cancel
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="editIndex === -1" color="brand">
-						<button :disabled="shouldPreventActions" @click="createGalleryItem">
-							<PlusIcon aria-hidden="true" />
-							Add gallery image
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else color="brand">
-						<button :disabled="shouldPreventActions" @click="editGalleryItem">
-							<SaveIcon aria-hidden="true" />
-							Save changes
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="modal_edit_item.hide()">
+						<XIcon aria-hidden="true" />
+						Cancel
+					</Button>
+					<Button
+						v-if="editIndex === -1"
+						type="colored"
+						color="brand"
+						:disabled="shouldPreventActions"
+						@click="createGalleryItem"
+					>
+						<PlusIcon aria-hidden="true" />
+						Add gallery image
+					</Button>
+					<Button
+						v-else
+						type="colored"
+						color="brand"
+						:disabled="shouldPreventActions"
+						@click="editGalleryItem"
+					>
+						<SaveIcon aria-hidden="true" />
+						Save changes
+					</Button>
 				</div>
 			</div>
 		</Modal>
@@ -146,59 +152,59 @@
 					</div>
 					<div class="controls">
 						<div class="flex gap-2">
-							<ButtonStyled circular>
-								<button class="close" @click="expandedGalleryItem = null">
-									<XIcon aria-hidden="true" />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled circular>
-								<a
-									class="open"
-									target="_blank"
-									:href="
-										expandedGalleryItem.raw_url
-											? expandedGalleryItem.raw_url
-											: 'https://cdn.modrinth.com/placeholder-banner.svg'
-									"
-								>
-									<ExternalIcon aria-hidden="true" />
-								</a>
-							</ButtonStyled>
-							<ButtonStyled circular>
-								<button @click="zoomedIn = !zoomedIn">
-									<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-									<ContractIcon v-else aria-hidden="true" />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="filteredGallery.length > 1" circular>
-								<button class="previous" @click="previousImage()">
-									<LeftArrowIcon aria-hidden="true" />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="filteredGallery.length > 1" circular>
-								<button class="next" @click="nextImage()">
-									<RightArrowIcon aria-hidden="true" />
-								</button>
-							</ButtonStyled>
+							<IconButton label="Close" class="close" @click="expandedGalleryItem = null">
+								<XIcon aria-hidden="true" />
+							</IconButton>
+							<ButtonLink
+								class="open !w-9 !rounded-full !px-0"
+								target="_blank"
+								:href="
+									expandedGalleryItem.raw_url
+										? expandedGalleryItem.raw_url
+										: 'https://cdn.modrinth.com/placeholder-banner.svg'
+								"
+							>
+								<ExternalIcon aria-hidden="true" />
+							</ButtonLink>
+							<IconButton label="Toggle zoom" @click="zoomedIn = !zoomedIn">
+								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+								<ContractIcon v-else aria-hidden="true" />
+							</IconButton>
+							<IconButton
+								v-if="filteredGallery.length > 1"
+								label="Previous image"
+								class="previous"
+								@click="previousImage()"
+							>
+								<LeftArrowIcon aria-hidden="true" />
+							</IconButton>
+							<IconButton
+								v-if="filteredGallery.length > 1"
+								label="Next image"
+								class="next"
+								@click="nextImage()"
+							>
+								<RightArrowIcon aria-hidden="true" />
+							</IconButton>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div v-if="currentMember" class="card header-buttons">
-			<ButtonStyled color="brand">
-				<FileInput
-					:max-size="5242880"
-					:accept="acceptFileTypes"
-					prompt="Upload an image"
-					aria-label="Upload an image"
-					class="button-like"
-					:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
-					@change="handleFiles"
-				>
-					<UploadIcon aria-hidden="true" />
-				</FileInput>
-			</ButtonStyled>
+			<FileButton
+				type="colored"
+				color="brand"
+				:max-size="5242880"
+				:accept="acceptFileTypes"
+				prompt="Upload an image"
+				aria-label="Upload an image"
+				class="button-like"
+				:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
+				@change="handleFiles"
+			>
+				<UploadIcon aria-hidden="true" />
+			</FileButton>
 			<span class="indicator">
 				<InfoIcon aria-hidden="true" /> Click to choose an image or drag one onto this page
 			</span>
@@ -232,37 +238,33 @@
 						{{ formatDate(item.created) }}
 					</div>
 					<div v-if="currentMember" class="gallery-buttons input-group">
-						<ButtonStyled>
-							<button
-								@click="
-									() => {
-										resetEdit()
-										editIndex = index
-										editTitle = item.title
-										editDescription = item.description
-										editFeatured = item.featured
-										editOrder = item.ordering
-										modal_edit_item.show()
-									}
-								"
-							>
-								<EditIcon aria-hidden="true" />
-								Edit
-							</button>
-						</ButtonStyled>
-						<ButtonStyled>
-							<button
-								@click="
-									() => {
-										deleteIndex = index
-										modal_confirm.show()
-									}
-								"
-							>
-								<TrashIcon aria-hidden="true" />
-								Remove
-							</button>
-						</ButtonStyled>
+						<Button
+							@click="
+								() => {
+									resetEdit()
+									editIndex = index
+									editTitle = item.title
+									editDescription = item.description
+									editFeatured = item.featured
+									editOrder = item.ordering
+									modal_edit_item.show()
+								}
+							"
+						>
+							<EditIcon aria-hidden="true" />
+							Edit
+						</Button>
+						<Button
+							@click="
+								() => {
+									deleteIndex = index
+									modal_confirm.show()
+								}
+							"
+						>
+							<TrashIcon aria-hidden="true" />
+							Remove
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -290,10 +292,12 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	ConfirmModal,
 	DropArea,
-	FileInput,
+	FileButton,
+	IconButton,
 	injectProjectPageContext,
 	NewModal as Modal,
 	StyledInput,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/index.vue b/apps/frontend/src/pages/[type]/[project]/settings/index.vue
index 9e755434f0..61918918f6 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/index.vue
@@ -82,27 +82,26 @@
 							class="project__icon"
 						/>
 						<div class="flex flex-col gap-2">
-							<ButtonStyled>
-								<FileInput
-									id="project-icon"
-									:max-size="262144000"
-									:show-icon="true"
-									accept="image/png,image/jpeg,image/gif,image/webp"
-									class="button-like choose-image"
-									prompt="Upload icon"
-									aria-label="Upload icon"
-									:disabled="!hasPermission"
-									@change="showPreviewImage"
-								>
-									<UploadIcon aria-hidden="true" />
-								</FileInput>
-							</ButtonStyled>
-							<ButtonStyled v-if="!deletedIcon && (previewImage || project.icon_url)">
-								<button :disabled="!hasPermission" @click="markIconForDeletion">
-									<TrashIcon aria-hidden="true" />
-									Remove icon
-								</button>
-							</ButtonStyled>
+							<FileButton
+								id="project-icon"
+								:max-size="262144000"
+								accept="image/png,image/jpeg,image/gif,image/webp"
+								class="button-like choose-image"
+								prompt="Upload icon"
+								aria-label="Upload icon"
+								:disabled="!hasPermission"
+								@change="showPreviewImage"
+							>
+								<UploadIcon aria-hidden="true" />
+							</FileButton>
+							<Button
+								v-if="!deletedIcon && (previewImage || project.icon_url)"
+								:disabled="!hasPermission"
+								@click="markIconForDeletion"
+							>
+								<TrashIcon aria-hidden="true" />
+								Remove icon
+							</Button>
 						</div>
 					</div>
 				</div>
@@ -160,25 +159,24 @@
 							</label>
 						</div>
 						<div class="mt-2 flex items-center gap-2">
-							<ButtonStyled>
-								<FileInput
-									:max-size="524288"
-									:show-icon="true"
-									accept="image/png,image/jpeg,image/gif,image/webp"
-									class="button-like"
-									prompt="Upload banner"
-									:disabled="!hasPermission"
-									@change="showBannerPreview"
-								>
-									<UploadIcon aria-hidden="true" />
-								</FileInput>
-							</ButtonStyled>
-							<ButtonStyled v-if="!deletedBanner && (bannerPreview || bannerGalleryImage?.url)">
-								<button :disabled="!hasPermission" @click="markBannerForDeletion">
-									<TrashIcon aria-hidden="true" />
-									Remove banner
-								</button>
-							</ButtonStyled>
+							<FileButton
+								:max-size="524288"
+								accept="image/png,image/jpeg,image/gif,image/webp"
+								class="button-like"
+								prompt="Upload banner"
+								:disabled="!hasPermission"
+								@change="showBannerPreview"
+							>
+								<UploadIcon aria-hidden="true" />
+							</FileButton>
+							<Button
+								v-if="!deletedBanner && (bannerPreview || bannerGalleryImage?.url)"
+								:disabled="!hasPermission"
+								@click="markBannerForDeletion"
+							>
+								<TrashIcon aria-hidden="true" />
+								Remove banner
+							</Button>
 						</div>
 						<div class="mt-2 text-secondary">Gif, 468×60px recommended.</div>
 					</div>
@@ -279,24 +277,24 @@
 					</span>
 				</div>
 				<div v-if="isStaff" class="mt-2">
-					<ButtonStyled color="orange">
-						<button
-							v-if="!isForceDemonetized"
-							:disabled="loadingModeratorMonetization"
-							@click="updateMonetizationStatus('force-demonetized')"
-						>
-							<ScaleIcon aria-hidden="true" />
-							Disable monetization
-						</button>
-						<button
-							v-else
-							:disabled="loadingModeratorMonetization"
-							@click="updateMonetizationStatus('monetized')"
-						>
-							<ScaleIcon aria-hidden="true" />
-							Allow monetization
-						</button>
-					</ButtonStyled>
+					<Button
+						v-if="!isForceDemonetized"
+						type="colored"
+						color="orange"
+						:disabled="loadingModeratorMonetization"
+						@click="updateMonetizationStatus('force-demonetized')"
+					>
+						<ScaleIcon aria-hidden="true" />
+						Disable monetization
+					</Button>
+					<Button
+						v-else
+						:disabled="loadingModeratorMonetization"
+						@click="updateMonetizationStatus('monetized')"
+					>
+						<ScaleIcon aria-hidden="true" />
+						Allow monetization
+					</Button>
 				</div>
 			</div>
 		</section>
@@ -311,12 +309,15 @@
 				Removes your project from Modrinth's servers and search. Clicking on this will delete your
 				project, so be extra careful!
 			</p>
-			<ButtonStyled color="red">
-				<button :disabled="!hasDeletePermission" @click="$refs.modal_confirm.show()">
-					<TrashIcon aria-hidden="true" />
-					Delete project
-				</button>
-			</ButtonStyled>
+			<Button
+				type="colored"
+				color="red"
+				:disabled="!hasDeletePermission"
+				@click="$refs.modal_confirm.show()"
+			>
+				<TrashIcon aria-hidden="true" />
+				Delete project
+			</Button>
 		</section>
 		<UnsavedChangesPopup
 			:original="original"
@@ -334,10 +335,11 @@ import { ImageIcon, ScaleIcon, TrashIcon, TriangleAlertIcon, UploadIcon } from '
 import { MIN_SUMMARY_CHARS } from '@modrinth/moderation'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	Combobox,
 	ConfirmLeaveModal,
 	ConfirmModal,
+	FileButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
@@ -349,7 +351,6 @@ import {
 } from '@modrinth/ui'
 import { fileIsValid, formatProjectStatus, formatProjectType } from '@modrinth/utils'
 
-import FileInput from '~/components/ui/FileInput.vue'
 import { useAuth } from '~/composables/auth.js'
 import { useFeatureFlags } from '~/composables/featureFlags.ts'
 
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/license.vue b/apps/frontend/src/pages/[type]/[project]/settings/license.vue
index 34e2f3564d..b4de71aee8 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/license.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/license.vue
@@ -28,12 +28,13 @@
 				</label>
 
 				<div class="w-1/2">
-					<DropdownSelect
-						v-model="current.license"
-						name="License selector"
-						:options="builtinLicenses"
-						:display-name="(chosen: BuiltinLicense) => chosen.friendly"
+					<Combobox
+						v-model="selectedLicense"
+						:options="licenseOptions"
+						:display-value="current.license.friendly || undefined"
 						placeholder="Select license..."
+						:disabled="!hasPermission"
+						trigger-type="base"
 					/>
 				</div>
 			</div>
@@ -155,24 +156,25 @@
 <script setup lang="ts">
 import {
 	Checkbox,
+	Combobox,
+	type ComboboxOption,
 	ConfirmLeaveModal,
-	DropdownSelect,
 	injectProjectPageContext,
 	StyledInput,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useSavable,
 } from '@modrinth/ui'
-import {
-	type BuiltinLicense,
-	builtinLicenses,
-	formatProjectType,
-	TeamMemberPermission,
-} from '@modrinth/utils'
+import { builtinLicenses, formatProjectType, TeamMemberPermission } from '@modrinth/utils'
 import { computed } from 'vue'
 
 const { projectV2: project, currentMember, patchProject } = injectProjectPageContext()
 
+const licenseOptions: ComboboxOption<string>[] = builtinLicenses.map((license) => ({
+	value: license.short,
+	label: license.friendly,
+}))
+
 function getInitialLicense() {
 	const oldLicenseId = project.value.license.id
 	const trimmedLicenseId = oldLicenseId
@@ -224,6 +226,14 @@ const { saved, current, saving, hasChanges, reset, save } = useSavable(
 
 const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
 
+const selectedLicense = computed({
+	get: () => (current.value.license.friendly === 'Custom' ? '' : current.value.license.short),
+	set: (short: string) => {
+		const license = builtinLicenses.find((option) => option.short === short)
+		if (license) current.value.license = license
+	},
+})
+
 const hasPermission = computed(() => {
 	return (currentMember.value?.permissions ?? 0) & TeamMemberPermission.EDIT_DETAILS
 })
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/links.vue b/apps/frontend/src/pages/[type]/[project]/settings/links.vue
index 090260ddef..46256f3fe3 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/links.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/links.vue
@@ -105,12 +105,15 @@
 				/>
 			</div>
 			<div class="button-group">
-				<ButtonStyled color="brand">
-					<button :disabled="!hasServerChanges" @click="saveServerChanges()">
-						<SaveIcon />
-						Save changes
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="!hasServerChanges"
+					@click="saveServerChanges()"
+				>
+					<SaveIcon />
+					Save changes
+				</Button>
 			</div>
 		</section>
 
@@ -258,26 +261,22 @@
 					:disabled="!hasPermission"
 					@update:model-value="updateDonationLinks"
 				/>
-				<DropdownSelect
+				<Combobox
 					v-model="donationLink.id"
-					name="Donation platform selector"
-					:options="tags.donationPlatforms.map((x) => x.short)"
-					:display-name="
-						(option) => tags.donationPlatforms.find((platform) => platform.short === option)?.name
-					"
+					:options="donationPlatformOptions"
 					placeholder="Select platform"
-					render-up
-					class="platform-selector"
+					:disabled="!hasPermission"
+					force-direction="up"
+					trigger-type="base"
+					class="platform-selector !w-80"
 					@update:model-value="updateDonationLinks"
 				/>
 			</div>
 			<div class="button-group">
-				<ButtonStyled color="brand">
-					<button :disabled="!hasChanges" @click="saveChanges()">
-						<SaveIcon />
-						Save changes
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="!hasChanges" @click="saveChanges()">
+					<SaveIcon />
+					Save changes
+				</Button>
 			</div>
 		</section>
 	</div>
@@ -287,8 +286,8 @@
 import { SaveIcon, TriangleAlertIcon } from '@modrinth/assets'
 import { commonLinkDomains, isCommonUrl, isDiscordUrl, isLinkShortener } from '@modrinth/moderation'
 import {
-	ButtonStyled,
-	DropdownSelect,
+	Button,
+	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
@@ -297,6 +296,13 @@ import {
 
 const tags = useGeneratedState()
 
+const donationPlatformOptions = computed(() =>
+	tags.value.donationPlatforms.map((platform) => ({
+		value: platform.short,
+		label: platform.name,
+	})),
+)
+
 const {
 	projectV2: project,
 	projectV3,
@@ -553,10 +559,6 @@ function checkDifference(newLink, existingLink) {
 		flex-grow: 2;
 		max-width: 26rem;
 	}
-
-	:deep(.animated-dropdown .selected) {
-		height: 40px;
-	}
 }
 
 .button-group {
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/members.vue b/apps/frontend/src/pages/[type]/[project]/settings/members.vue
index e6ed7a5a59..1ba42b6c1a 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/members.vue
@@ -41,33 +41,33 @@
 					@keypress.enter="inviteTeamMember()"
 				/>
 				<label for="username" class="hidden">Username</label>
-				<ButtonStyled color="brand">
-					<button
-						:disabled="(currentMember?.permissions & MANAGE_INVITES) !== MANAGE_INVITES"
-						@click="inviteTeamMember()"
-					>
-						<UserPlusIcon />
-						Invite
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="(currentMember?.permissions & MANAGE_INVITES) !== MANAGE_INVITES"
+					@click="inviteTeamMember()"
+				>
+					<UserPlusIcon />
+					Invite
+				</Button>
 			</div>
 			<div class="adjacent-input">
 				<span class="label">
 					<span class="label__title">Leave project</span>
 					<span class="label__description"> Remove yourself as a member of this project. </span>
 				</span>
-				<ButtonStyled color="red">
-					<button
-						:disabled="currentMember?.is_owner"
-						:title="
-							currentMember?.is_owner ? 'You cannot leave the project if you are the owner!' : ''
-						"
-						@click="leaveProject()"
-					>
-						<UserXIcon />
-						Leave project
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="red"
+					:disabled="currentMember?.is_owner"
+					:title="
+						currentMember?.is_owner ? 'You cannot leave the project if you are the owner!' : ''
+					"
+					@click="leaveProject()"
+				>
+					<UserXIcon />
+					Leave project
+				</Button>
 			</div>
 		</Card>
 		<div
@@ -90,18 +90,17 @@
 				<div class="side-buttons">
 					<Badge v-if="member.accepted" type="accepted" />
 					<Badge v-else type="pending" />
-					<ButtonStyled circular>
-						<button
-							class="dropdown-icon"
-							@click="
-								openTeamMembers.indexOf(member.user.id) === -1
-									? openTeamMembers.push(member.user.id)
-									: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
-							"
-						>
-							<DropdownIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						label="Toggle details"
+						class="dropdown-icon"
+						@click="
+							openTeamMembers.indexOf(member.user.id) === -1
+								? openTeamMembers.push(member.user.id)
+								: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
+						"
+					>
+						<DropdownIcon />
+					</IconButton>
 				</div>
 			</div>
 			<div class="content">
@@ -229,30 +228,32 @@
 					</div>
 				</template>
 				<div class="input-group">
-					<ButtonStyled color="brand">
-						<button
-							:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
-							@click="updateTeamMember(index)"
-						>
-							<SaveIcon />
-							Save changes
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="!member.is_owner" color="red">
-						<button
-							:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
-							@click="removeTeamMember(index)"
-						>
-							<UserXIcon />
-							Remove member
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="!member.is_owner && currentMember?.is_owner && member.accepted">
-						<button @click="openTransferModal(index, $event)">
-							<TransferIcon />
-							Transfer ownership
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
+						@click="updateTeamMember(index)"
+					>
+						<SaveIcon />
+						Save changes
+					</Button>
+					<Button
+						v-if="!member.is_owner"
+						type="colored"
+						color="red"
+						:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
+						@click="removeTeamMember(index)"
+					>
+						<UserXIcon />
+						Remove member
+					</Button>
+					<Button
+						v-if="!member.is_owner && currentMember?.is_owner && member.accepted"
+						@click="openTransferModal(index, $event)"
+					>
+						<TransferIcon />
+						Transfer ownership
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -308,19 +309,20 @@
 					force-direction="up"
 					:disabled="!currentMember?.is_owner || organizationOptions.length === 0"
 				/>
-				<ButtonStyled color="brand">
-					<button :disabled="!selectedOrganization" @click="openTransferToOrgModal($event)">
-						<CheckIcon />
-						<span class="w-max"> Transfer management </span>
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="!selectedOrganization"
+					@click="openTransferToOrgModal($event)"
+				>
+					<CheckIcon />
+					<span class="w-max"> Transfer management </span>
+				</Button>
 			</div>
-			<ButtonStyled v-if="organization">
-				<button @click="$refs.modal_remove.show()">
-					<OrganizationIcon />
-					Remove from organization
-				</button>
-			</ButtonStyled>
+			<Button v-if="organization" @click="$refs.modal_remove.show()">
+				<OrganizationIcon />
+				Remove from organization
+			</Button>
 		</section>
 		<div
 			v-for="(member, index) in allOrgMembers"
@@ -342,18 +344,17 @@
 				<div class="side-buttons">
 					<Badge v-if="member.accepted" type="accepted" />
 					<Badge v-else type="pending" />
-					<ButtonStyled circular>
-						<button
-							class="dropdown-icon"
-							@click="
-								openTeamMembers.indexOf(member.user.id) === -1
-									? openTeamMembers.push(member.user.id)
-									: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
-							"
-						>
-							<DropdownIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						label="Toggle details"
+						class="dropdown-icon"
+						@click="
+							openTeamMembers.indexOf(member.user.id) === -1
+								? openTeamMembers.push(member.user.id)
+								: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
+						"
+					>
+						<DropdownIcon />
+					</IconButton>
 				</div>
 			</div>
 			<div class="content">
@@ -527,18 +528,18 @@
 
 					we don't allow clicking the button in that last case.
 					-->
-					<ButtonStyled color="brand">
-						<button
-							:disabled="
-								(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
-								(!allOrgMembers[index].oldOverride && !allOrgMembers[index].override)
-							"
-							@click="updateOrgMember(index)"
-						>
-							<SaveIcon />
-							Save changes
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="
+							(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
+							(!allOrgMembers[index].oldOverride && !allOrgMembers[index].override)
+						"
+						@click="updateOrgMember(index)"
+					>
+						<SaveIcon />
+						Save changes
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -560,11 +561,12 @@ import {
 import {
 	Avatar,
 	Badge,
-	ButtonStyled,
+	Button,
 	Card,
 	Checkbox,
 	Combobox,
 	ConfirmModal,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue b/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
index 16997ddf54..5d6314022e 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
@@ -6,7 +6,6 @@ import {
 	ClockArrowDownIcon,
 	FoldVerticalIcon,
 	PauseIcon,
-	RightArrowIcon,
 	ScaleIcon,
 	SearchIcon,
 	SpinnerIcon,
@@ -14,9 +13,9 @@ import {
 	UnfoldVerticalIcon,
 	XCircleIcon,
 } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
 	Admonition,
-	ButtonStyled,
 	Combobox,
 	type ComboboxOption,
 	commonMessages,
@@ -495,13 +494,6 @@ function dismissInfoBanner() {
 				</nuxt-link>
 			</template>
 		</IntlFormatted>
-		<template v-if="false" #actions>
-			<div class="flex">
-				<ButtonStyled color="blue">
-					<a> {{ formatMessage(messages.learnMore) }} <RightArrowIcon /> </a>
-				</ButtonStyled>
-			</div>
-		</template>
 	</Admonition>
 	<template v-if="pending">
 		<div class="flex flex-col gap-3">
@@ -579,9 +571,10 @@ function dismissInfoBanner() {
 				<div>
 					<Combobox
 						v-model="currentSortType"
-						class="!w-full flex-grow sm:!w-[220px] sm:flex-grow-0 [&>span]:h-[40px]"
+						class="!w-full flex-grow sm:!w-[220px] sm:flex-grow-0"
 						:options="sortTypes"
 						:placeholder="formatMessage(commonMessages.sortByLabel)"
+						trigger-size="lg"
 					>
 						<template #selected>
 							<span class="flex flex-row gap-2 align-middle font-semibold">
@@ -606,31 +599,30 @@ function dismissInfoBanner() {
 						</template>
 					</Combobox>
 				</div>
-				<ButtonStyled>
-					<button type="button" class="!h-[40px]" @click="toggleAllCardsCollapsed">
-						<UnfoldVerticalIcon
-							v-if="allCardsCollapsed"
-							class="size-5 flex-shrink-0 text-secondary"
-						/>
-						<FoldVerticalIcon v-else class="size-5 flex-shrink-0 text-secondary" />
-						{{ expandCollapseAllLabel }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="isModerator" color="red" type="outlined">
-					<button
-						type="button"
-						class="!h-[40px]"
-						:disabled="deleteAllGroupsMutation.isPending.value"
-						@click="showDeleteAllGroupsConfirmation"
-					>
-						<SpinnerIcon
-							v-if="deleteAllGroupsMutation.isPending.value"
-							class="size-5 flex-shrink-0 animate-spin"
-						/>
-						<TrashIcon v-else class="size-5 flex-shrink-0" />
-						{{ formatMessage(messages.deleteAllGroups) }}
-					</button>
-				</ButtonStyled>
+				<Button native-type="button" size="lg" @click="toggleAllCardsCollapsed">
+					<UnfoldVerticalIcon
+						v-if="allCardsCollapsed"
+						class="size-5 flex-shrink-0 text-secondary"
+					/>
+					<FoldVerticalIcon v-else class="size-5 flex-shrink-0 text-secondary" />
+					{{ expandCollapseAllLabel }}
+				</Button>
+				<Button
+					v-if="isModerator"
+					type="outlined"
+					native-type="button"
+					size="lg"
+					class="!text-red !shadow-[inset_0_0_0_1px_var(--color-red)] [&>svg]:!text-red"
+					:disabled="deleteAllGroupsMutation.isPending.value"
+					@click="showDeleteAllGroupsConfirmation"
+				>
+					<SpinnerIcon
+						v-if="deleteAllGroupsMutation.isPending.value"
+						class="size-5 flex-shrink-0 animate-spin"
+					/>
+					<TrashIcon v-else class="size-5 flex-shrink-0" />
+					{{ formatMessage(messages.deleteAllGroups) }}
+				</Button>
 			</div>
 		</div>
 		<div v-if="isModerator" class="mt-4 flex flex-wrap items-center gap-3">
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/server.vue b/apps/frontend/src/pages/[type]/[project]/settings/server.vue
index 4df46c828d..1d3509b2fa 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/server.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/server.vue
@@ -79,22 +79,20 @@
 							'items-start': javaPingResult && !javaPingResult.online,
 						}"
 					>
-						<ButtonStyled
+						<IconButton
 							v-if="(javaAddress && javaPingResult) || javaPingLoading"
-							circular
-							type="transparent"
-							size="small"
-							color="oranges"
+							v-tooltip="formatMessage(messages.refreshPingTooltip)"
+							class="!size-6"
+							type="quiet"
+							color="orange"
+							size="xs"
+							:label="formatMessage(messages.refreshPingTooltip)"
+							:disabled="javaPingLoading"
+							@click="pingJavaServer"
 						>
-							<button
-								v-tooltip="formatMessage(messages.refreshPingTooltip)"
-								:disabled="javaPingLoading"
-								@click="pingJavaServer"
-							>
-								<SpinnerIcon v-if="javaPingLoading" class="animate-spin" />
-								<RefreshCwIcon v-else />
-							</button>
-						</ButtonStyled>
+							<SpinnerIcon v-if="javaPingLoading" class="animate-spin" />
+							<RefreshCwIcon v-else />
+						</IconButton>
 						<div
 							v-if="javaPingResult !== null && !javaPingLoading && javaPingResult.online"
 							class="mt-0.5 flex items-center gap-1.5 text-green"
@@ -170,10 +168,10 @@
 <script setup>
 import { InfoIcon, RefreshCwIcon, SpinnerIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	Combobox,
 	ConfirmLeaveModal,
 	defineMessages,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/versions.vue b/apps/frontend/src/pages/[type]/[project]/settings/versions.vue
index a0f385a639..1343a79171 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/versions.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/versions.vue
@@ -35,16 +35,16 @@
 		>
 			<template #actions>
 				<div class="flex">
-					<ButtonStyled color="orange">
-						<nuxt-link
-							:to="`/${project.project_type}/${
-								project.slug ? project.slug : project.id
-							}/settings/permissions`"
-						>
-							{{ formatMessage(commonProjectSettingsMessages.withheldVersionsWarningResolve) }}
-							<RightArrowIcon />
-						</nuxt-link>
-					</ButtonStyled>
+					<ButtonLink
+						type="colored"
+						color="orange"
+						:to="`/${project.project_type}/${
+							project.slug ? project.slug : project.id
+						}/settings/permissions`"
+					>
+						{{ formatMessage(commonProjectSettingsMessages.withheldVersionsWarningResolve) }}
+						<RightArrowIcon />
+					</ButtonLink>
 				</div>
 			</template>
 		</Admonition>
@@ -67,180 +67,189 @@
 			:open-modal="currentMember ? () => handleOpenCreateVersionModal() : undefined"
 		>
 			<template #actions="{ version }">
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
-						v-tooltip="formatMessage(messages.editVersionTooltip)"
-						class="hover:!bg-button-bg [&>svg]:!text-green"
-						:dropdown-id="`${baseDropdownId}-edit-${version.id}`"
-						:options="[
-							{
-								id: 'edit-metadata',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+				<TeleportOverflowMenu
+					type="quiet"
+					:label="formatMessage(messages.editVersionTooltip)"
+					:tooltip="formatMessage(messages.editVersionTooltip)"
+					class="hover:!bg-button-bg [&>svg]:!text-green"
+					:options="[
+						{
+							id: 'edit-metadata',
+							label: formatMessage(messages.editMetadataOption),
+							action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+						},
+						{
+							id: 'edit-details',
+							label: formatMessage(messages.editDetailsOption),
+							action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
+						},
+						{
+							id: 'edit-files',
+							label: formatMessage(messages.editFilesOption),
+							action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
+						},
+					]"
+				>
+					<EditIcon aria-hidden="true" />
+					<template #edit-files>
+						<FileIcon aria-hidden="true" />
+						{{ formatMessage(messages.editFilesOption) }}
+					</template>
+					<template #edit-details>
+						<InfoIcon aria-hidden="true" />
+						{{ formatMessage(messages.editDetailsOption) }}
+					</template>
+					<template #edit-metadata>
+						<BoxIcon aria-hidden="true" />
+						{{ formatMessage(messages.editMetadataOption) }}
+					</template>
+				</TeleportOverflowMenu>
+				<TeleportOverflowMenu
+					type="quiet"
+					:label="formatMessage(commonMessages.moreOptionsButton)"
+					:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+					class="hover:!bg-button-bg"
+					:options="[
+						{
+							id: 'download',
+							label: formatMessage(commonMessages.downloadButton),
+							type: 'link',
+							tone: 'brand',
+							hoverFilled: true,
+							href: createDownloadUrl(version),
+							download: getPrimaryFile(version)?.filename,
+							shown: !!getPrimaryFile(version),
+						},
+						{
+							id: 'new-tab',
+							label: formatMessage(messages.openInNewTabOption),
+							type: 'link',
+							href: `/${project.project_type}/${
+								project.slug ? project.slug : project.id
+							}/version/${encodeURI(version.displayUrlEnding ? version.displayUrlEnding : version.id)}`,
+							target: '_blank',
+						},
+						{
+							id: 'copy-link',
+							label: formatMessage(messages.copyLinkOption),
+							action: () =>
+								copyToClipboard(
+									`https://modrinth.com/${project.project_type}/${
+										project.slug ? project.slug : project.id
+									}/version/${encodeURI(version.displayUrlEnding ? version.displayUrlEnding : version.id)}`,
+								),
+						},
+						{
+							id: 'share',
+							label: formatMessage(messages.shareOption),
+							action: () => {},
+							shown: false,
+						},
+						{
+							id: 'report',
+							label: formatMessage(commonMessages.reportButton),
+							tone: 'red',
+							hoverFilled: true,
+							action: () =>
+								auth.user ? reportVersion(version.id) : navigateTo(getSignInRouteObj(route)),
+							shown: !currentMember,
+						},
+						{ type: 'divider', shown: !!currentMember || flags.developerMode },
+						{
+							id: 'copy-id',
+							label: formatMessage(messages.copyIdOption),
+							action: () => {
+								copyToClipboard(version.id)
 							},
-							{
-								id: 'edit-details',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
+							shown: !!currentMember || flags.developerMode,
+						},
+						{
+							id: 'copy-maven',
+							label: formatMessage(messages.copyMavenCoordinatesOption),
+							action: () => {
+								copyToClipboard(`maven.modrinth:${project.slug}:${version.id}`)
 							},
-							{
-								id: 'edit-files',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
+							shown: flags.developerMode,
+						},
+						{ type: 'divider', shown: !!currentMember },
+						{
+							id: 'edit-details',
+							label: formatMessage(messages.editDetailsOption),
+							action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
+							shown: !!currentMember,
+						},
+						{
+							id: 'edit-metadata',
+							label: formatMessage(messages.editMetadataOption),
+							action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+							shown: !!currentMember,
+						},
+						{
+							id: 'edit-files',
+							label: formatMessage(messages.editFilesOption),
+							action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
+							shown: !!currentMember,
+						},
+						{
+							id: 'delete',
+							label: formatMessage(commonMessages.deleteLabel),
+							tone: 'red',
+							hoverFilled: true,
+							action: () => {
+								selectedVersion = version.id
+								deleteVersionModal?.show()
 							},
-						]"
-						:aria-label="formatMessage(messages.editVersionTooltip)"
-					>
-						<EditIcon aria-hidden="true" />
-						<template #edit-files>
-							<FileIcon aria-hidden="true" />
-							{{ formatMessage(messages.editFilesOption) }}
-						</template>
-						<template #edit-details>
-							<InfoIcon aria-hidden="true" />
-							{{ formatMessage(messages.editDetailsOption) }}
-						</template>
-						<template #edit-metadata>
-							<BoxIcon aria-hidden="true" />
-							{{ formatMessage(messages.editMetadataOption) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
-						v-tooltip="formatMessage(commonMessages.moreOptionsButton)"
-						class="hover:!bg-button-bg"
-						:dropdown-id="`${baseDropdownId}-${version.id}`"
-						:options="[
-							{
-								id: 'download',
-								color: 'primary',
-								hoverFilled: true,
-								link: createDownloadUrl(version),
-								download: getPrimaryFile(version)?.filename,
-								action: () => {
-									emit('onDownload')
-								},
-								shown: !!getPrimaryFile(version),
-							},
-							{
-								id: 'new-tab',
-								action: () => {},
-								link: `/${project.project_type}/${
-									project.slug ? project.slug : project.id
-								}/version/${encodeURI(version.displayUrlEnding ? version.displayUrlEnding : version.id)}`,
-								external: true,
-							},
-							{
-								id: 'copy-link',
-								action: () =>
-									copyToClipboard(
-										`https://modrinth.com/${project.project_type}/${
-											project.slug ? project.slug : project.id
-										}/version/${encodeURI(version.displayUrlEnding ? version.displayUrlEnding : version.id)}`,
-									),
-							},
-							{
-								id: 'share',
-								action: () => {},
-								shown: false,
-							},
-							{
-								id: 'report',
-								color: 'red',
-								hoverFilled: true,
-								action: () =>
-									auth.user ? reportVersion(version.id) : navigateTo(getSignInRouteObj(route)),
-								shown: !currentMember,
-							},
-							{ divider: true, shown: !!currentMember || flags.developerMode },
-							{
-								id: 'copy-id',
-								action: () => {
-									copyToClipboard(version.id)
-								},
-								shown: !!currentMember || flags.developerMode,
-							},
-							{
-								id: 'copy-maven',
-								action: () => {
-									copyToClipboard(`maven.modrinth:${project.slug}:${version.id}`)
-								},
-								shown: flags.developerMode,
-							},
-							{ divider: true, shown: !!currentMember },
-							{
-								id: 'edit-details',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
-								shown: !!currentMember,
-							},
-							{
-								id: 'edit-metadata',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
-								shown: !!currentMember,
-							},
-							{
-								id: 'edit-files',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
-								shown: !!currentMember,
-							},
-							{
-								id: 'delete',
-								color: 'red',
-								hoverFilled: true,
-								action: () => {
-									selectedVersion = version.id
-									deleteVersionModal?.show()
-								},
-								shown: !!currentMember,
-							},
-						]"
-						:aria-label="formatMessage(commonMessages.moreOptionsButton)"
-					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #download>
-							<DownloadIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.downloadButton) }}
-						</template>
-						<template #new-tab>
-							<ExternalIcon aria-hidden="true" />
-							{{ formatMessage(messages.openInNewTabOption) }}
-						</template>
-						<template #copy-link>
-							<LinkIcon aria-hidden="true" />
-							{{ formatMessage(messages.copyLinkOption) }}
-						</template>
-						<template #share>
-							<ShareIcon aria-hidden="true" />
-							{{ formatMessage(messages.shareOption) }}
-						</template>
-						<template #report>
-							<ReportIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.reportButton) }}
-						</template>
-						<template #edit-files>
-							<FileIcon aria-hidden="true" />
-							{{ formatMessage(messages.editFilesOption) }}
-						</template>
-						<template #edit-details>
-							<InfoIcon aria-hidden="true" />
-							{{ formatMessage(messages.editDetailsOption) }}
-						</template>
-						<template #edit-metadata>
-							<BoxIcon aria-hidden="true" />
-							{{ formatMessage(messages.editMetadataOption) }}
-						</template>
-						<template #delete>
-							<TrashIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.deleteLabel) }}
-						</template>
-						<template #copy-id>
-							<ClipboardCopyIcon aria-hidden="true" />
-							{{ formatMessage(messages.copyIdOption) }}
-						</template>
-						<template #copy-maven>
-							<ClipboardCopyIcon aria-hidden="true" />
-							{{ formatMessage(messages.copyMavenCoordinatesOption) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+							shown: !!currentMember,
+						},
+					]"
+					@select="$event.id === 'download' && emit('onDownload')"
+				>
+					<MoreVerticalIcon aria-hidden="true" />
+					<template #download>
+						<DownloadIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.downloadButton) }}
+					</template>
+					<template #new-tab>
+						<ExternalIcon aria-hidden="true" />
+						{{ formatMessage(messages.openInNewTabOption) }}
+					</template>
+					<template #copy-link>
+						<LinkIcon aria-hidden="true" />
+						{{ formatMessage(messages.copyLinkOption) }}
+					</template>
+					<template #share>
+						<ShareIcon aria-hidden="true" />
+						{{ formatMessage(messages.shareOption) }}
+					</template>
+					<template #report>
+						<ReportIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.reportButton) }}
+					</template>
+					<template #edit-files>
+						<FileIcon aria-hidden="true" />
+						{{ formatMessage(messages.editFilesOption) }}
+					</template>
+					<template #edit-details>
+						<InfoIcon aria-hidden="true" />
+						{{ formatMessage(messages.editDetailsOption) }}
+					</template>
+					<template #edit-metadata>
+						<BoxIcon aria-hidden="true" />
+						{{ formatMessage(messages.editMetadataOption) }}
+					</template>
+					<template #delete>
+						<TrashIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.deleteLabel) }}
+					</template>
+					<template #copy-id>
+						<ClipboardCopyIcon aria-hidden="true" />
+						{{ formatMessage(messages.copyIdOption) }}
+					</template>
+					<template #copy-maven>
+						<ClipboardCopyIcon aria-hidden="true" />
+						{{ formatMessage(messages.copyMavenCoordinatesOption) }}
+					</template>
+				</TeleportOverflowMenu>
 			</template>
 		</ProjectPageVersions>
 
@@ -304,11 +313,13 @@
 					<div class="text-2xl font-semibold text-contrast">No versions created</div>
 					<div>Create your first project version.</div>
 					<br />
-					<ButtonStyled color="green">
-						<button @click="() => createProjectVersionModal?.openCreateVersionModal()">
-							<PlusIcon /> Create version
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="green"
+						@click="() => createProjectVersionModal?.openCreateVersionModal()"
+					>
+						<PlusIcon /> Create version
+					</Button>
 				</div>
 			</div>
 		</template>
@@ -335,7 +346,8 @@ import {
 } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	commonProjectSettingsMessages,
 	ConfirmModal,
@@ -343,8 +355,8 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	OverflowMenu,
 	ProjectPageVersions,
+	TeleportOverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { useTemplateRef, watch } from 'vue'
diff --git a/apps/frontend/src/pages/[type]/[project]/version/[version].vue b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
index 5facef220d..25fd9b2851 100644
--- a/apps/frontend/src/pages/[type]/[project]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
@@ -65,18 +65,19 @@
 				</div>
 
 				<div class="ml-auto mt-4 flex items-center gap-2">
-					<ButtonStyled type="outlined">
-						<button @click="packageModal?.hide()">
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="packageLoaders.length === 0" @click="createDataPackVersionHandler">
-							{{ formatMessage(messages.packageDataPack) }}
-							<RightArrowIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="packageModal?.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="packageLoaders.length === 0"
+						@click="createDataPackVersionHandler"
+					>
+						{{ formatMessage(messages.packageDataPack) }}
+						<RightArrowIcon aria-hidden="true" />
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -104,16 +105,16 @@
 				>
 					<template #actions>
 						<div class="flex">
-							<ButtonStyled color="orange">
-								<nuxt-link
-									:to="`/${project.project_type}/${
-										project.slug ? project.slug : project.id
-									}/settings/permissions`"
-								>
-									{{ formatMessage(commonProjectSettingsMessages.withheldVersionsWarningResolve) }}
-									<RightArrowIcon />
-								</nuxt-link>
-							</ButtonStyled>
+							<ButtonLink
+								type="colored"
+								color="orange"
+								:to="`/${project.project_type}/${
+									project.slug ? project.slug : project.id
+								}/settings/permissions`"
+							>
+								{{ formatMessage(commonProjectSettingsMessages.withheldVersionsWarningResolve) }}
+								<RightArrowIcon />
+							</ButtonLink>
 						</div>
 					</template>
 				</Admonition>
@@ -127,23 +128,23 @@
 					class="mb-4"
 				>
 					<template #headerActions="{ primaryFile, promotedFiles }">
-						<ButtonStyled color="brand">
-							<a
-								v-tooltip="
-									primaryFile?.url
-										? primaryFile.filename + ' (' + formatBytes(primaryFile.size) + ')'
-										: formatMessage(messages.noPrimaryFile)
-								"
-								:href="decoratedPrimaryFileUrl"
-								:download="primaryFile?.filename"
-								:disabled="primaryFile?.url === undefined"
-								@click="emit('onDownload')"
-							>
-								<DownloadIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.downloadButton) }}
-							</a>
-						</ButtonStyled>
-						<ButtonStyled
+						<ButtonLink
+							v-tooltip="
+								primaryFile?.url
+									? primaryFile.filename + ' (' + formatBytes(primaryFile.size) + ')'
+									: formatMessage(messages.noPrimaryFile)
+							"
+							type="colored"
+							color="brand"
+							:href="decoratedPrimaryFileUrl"
+							:download="primaryFile?.filename"
+							:disabled="primaryFile?.url === undefined"
+							@click="emit('onDownload')"
+						>
+							<DownloadIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.downloadButton) }}
+						</ButtonLink>
+						<ButtonLink
 							v-for="file in promotedFiles.filter(
 								(x) =>
 									!!x &&
@@ -151,235 +152,237 @@
 										x.file_type === 'optional-resource-pack'),
 							)"
 							:key="`promoted-file-${file.hashes.sha1}`"
+							v-tooltip="file.filename + ' (' + formatBytes(file.size) + ')'"
+							:href="
+								createProjectDownloadUrl(file.url, {
+									reason: 'dependency',
+								})
+							"
+							:download="primaryFile?.filename"
+							:disabled="primaryFile?.url === undefined"
+							@click="emit('onDownload')"
 						>
-							<a
-								v-tooltip="file.filename + ' (' + formatBytes(file.size) + ')'"
-								:href="
-									createProjectDownloadUrl(file.url, {
-										reason: 'dependency',
-									})
-								"
-								:download="primaryFile?.filename"
-								:disabled="primaryFile?.url === undefined"
-								@click="emit('onDownload')"
-							>
-								<DownloadIcon aria-hidden="true" />
-								<template v-if="file.file_type === 'required-resource-pack'">
-									{{ formatMessage(messages.requiredResourcePack) }}
-								</template>
-								<template v-else-if="file.file_type === 'optional-resource-pack'">
-									{{ formatMessage(messages.optionalResourcePack) }}
-								</template>
-							</a>
-						</ButtonStyled>
+							<DownloadIcon aria-hidden="true" />
+							<template v-if="file.file_type === 'required-resource-pack'">
+								{{ formatMessage(messages.requiredResourcePack) }}
+							</template>
+							<template v-else-if="file.file_type === 'optional-resource-pack'">
+								{{ formatMessage(messages.optionalResourcePack) }}
+							</template>
+						</ButtonLink>
 						<template v-if="currentMember">
-							<ButtonStyled
+							<Button
 								v-if="
 									version.loaders.some((x: string) => tags.loaderData.dataPackLoaders.includes(x))
 								"
+								@click="packageModal?.show()"
 							>
-								<button @click="packageModal?.show()">
-									<PackageClosedIcon aria-hidden="true" />
-									{{ formatMessage(messages.packageAsMod) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled>
-								<OverflowMenu
-									:dropdown-id="`${baseId}-edit-overflow`"
-									class="btn-dropdown-animation"
-									:options="[
-										{
-											id: 'edit-metadata',
-											action: () => handleOpenEditVersionModal(version!.id, project.id, 'metadata'),
-										},
-										{
-											id: 'edit-details',
-											action: () =>
-												handleOpenEditVersionModal(version!.id, project.id, 'add-details'),
-										},
-										{
-											id: 'edit-files',
-											action: () =>
-												handleOpenEditVersionModal(version!.id, project.id, 'add-files'),
-										},
-										{
-											id: 'delete',
-											color: 'red',
-											action: () => confirmModal?.show(),
-										},
-									]"
-								>
-									<SettingsIcon aria-hidden="true" /> {{ formatMessage(messages.edit) }}
-									<DropdownIcon class="h-5 w-5 text-secondary" />
-									<template #edit-metadata>
-										<BoxIcon aria-hidden="true" />
-										{{ formatMessage(messages.editMetadata) }}
-									</template>
-									<template #edit-details>
-										<InfoIcon aria-hidden="true" />
-										{{ formatMessage(messages.editDetails) }}
-									</template>
-									<template #edit-files>
-										<FileIcon aria-hidden="true" />
-										{{ formatMessage(messages.editFiles) }}
-									</template>
-									<template #delete>
-										<TrashIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.deleteLabel) }}
-									</template>
-								</OverflowMenu>
-							</ButtonStyled>
-						</template>
-						<ButtonStyled type="outlined" circular>
-							<OverflowMenu
-								v-tooltip="formatMessage(commonMessages.moreOptionsButton)"
+								<PackageClosedIcon aria-hidden="true" />
+								{{ formatMessage(messages.packageAsMod) }}
+							</Button>
+							<TeleportOverflowMenu
+								:label="formatMessage(messages.edit)"
+								:tooltip="formatMessage(messages.edit)"
 								:options="[
 									{
-										id: 'report',
-										color: 'red',
-										action: () =>
-											auth.user ? reportVersion(version!.id) : navigateTo(signInRouteObj),
-									},
-									{ divider: true, shown: flags.developerMode },
-									{
-										id: 'copy-id',
-										action: () => copyToClipboard(version!.id),
-										shown: flags.developerMode,
+										id: 'edit-metadata',
+										label: formatMessage(messages.editMetadata),
+										action: () => handleOpenEditVersionModal(version!.id, project.id, 'metadata'),
 									},
 									{
-										id: 'copy-permalink',
+										id: 'edit-details',
+										label: formatMessage(messages.editDetails),
 										action: () =>
-											copyToClipboard(
-												`https://modrinth.com/project/${project.id}/version/${version!.id}`,
-											),
-										shown: flags.developerMode,
+											handleOpenEditVersionModal(version!.id, project.id, 'add-details'),
+									},
+									{
+										id: 'edit-files',
+										label: formatMessage(messages.editFiles),
+										action: () => handleOpenEditVersionModal(version!.id, project.id, 'add-files'),
+									},
+									{
+										id: 'delete',
+										label: formatMessage(commonMessages.deleteLabel),
+										tone: 'red',
+										action: () => confirmModal?.show(),
 									},
 								]"
 							>
-								<MoreVerticalIcon />
-								<template #report>
-									<ReportIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.reportButton) }}
+								<SettingsIcon aria-hidden="true" />
+								<template #edit-metadata>
+									<BoxIcon aria-hidden="true" />
+									{{ formatMessage(messages.editMetadata) }}
 								</template>
-								<template #copy-link>
-									<ReportIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.reportButton) }}
+								<template #edit-details>
+									<InfoIcon aria-hidden="true" />
+									{{ formatMessage(messages.editDetails) }}
 								</template>
-								<template #copy-id>
-									<ClipboardCopyIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.copyIdButton) }}
+								<template #edit-files>
+									<FileIcon aria-hidden="true" />
+									{{ formatMessage(messages.editFiles) }}
 								</template>
-								<template #copy-permalink>
-									<ClipboardCopyIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.copyPermalinkButton) }}
+								<template #delete>
+									<TrashIcon aria-hidden="true" />
+									{{ formatMessage(commonMessages.deleteLabel) }}
 								</template>
-							</OverflowMenu>
-						</ButtonStyled>
+							</TeleportOverflowMenu>
+						</template>
+						<TeleportOverflowMenu
+							type="outlined"
+							:label="formatMessage(commonMessages.moreOptionsButton)"
+							:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+							:options="[
+								{
+									id: 'report',
+									label: formatMessage(commonMessages.reportButton),
+									tone: 'red',
+									action: () =>
+										auth.user ? reportVersion(version!.id) : navigateTo(signInRouteObj),
+								},
+								{ type: 'divider', shown: flags.developerMode },
+								{
+									id: 'copy-id',
+									label: formatMessage(commonMessages.copyIdButton),
+									action: () => copyToClipboard(version!.id),
+									shown: flags.developerMode,
+								},
+								{
+									id: 'copy-permalink',
+									label: formatMessage(commonMessages.copyPermalinkButton),
+									action: () =>
+										copyToClipboard(
+											`https://modrinth.com/project/${project.id}/version/${version!.id}`,
+										),
+									shown: flags.developerMode,
+								},
+							]"
+						>
+							<MoreVerticalIcon />
+							<template #report>
+								<ReportIcon aria-hidden="true" />
+								{{ formatMessage(commonMessages.reportButton) }}
+							</template>
+							<template #copy-link>
+								<ReportIcon aria-hidden="true" />
+								{{ formatMessage(commonMessages.reportButton) }}
+							</template>
+							<template #copy-id>
+								<ClipboardCopyIcon aria-hidden="true" />
+								{{ formatMessage(commonMessages.copyIdButton) }}
+							</template>
+							<template #copy-permalink>
+								<ClipboardCopyIcon aria-hidden="true" />
+								{{ formatMessage(commonMessages.copyPermalinkButton) }}
+							</template>
+						</TeleportOverflowMenu>
 					</template>
 					<template #supplementaryResourceActions="{ file }">
-						<ButtonStyled>
-							<a
-								:href="decorateDownloadUrl(file.url)"
-								:title="`Download ${file.filename}`"
-								:download="file.filename"
-								tabindex="0"
-							>
-								<DownloadIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.downloadButton) }}
-							</a>
-						</ButtonStyled>
-						<ButtonStyled type="outlined" circular>
-							<OverflowMenu
-								:tooltip="formatMessage(commonMessages.moreOptionsButton)"
-								:options="[
-									{
-										id: 'copy-sha1',
-										action: () => copyFileHash(file, 'sha1'),
-									},
-									{
-										id: 'copy-sha512',
-										action: () => copyFileHash(file, 'sha512'),
-									},
-								]"
-								:dropdown-id="`${baseId}-supplementary-resource-actions`"
-							>
-								<MoreVerticalIcon aria-hidden="true" />
-								<template #copy-sha1>
-									<CopyIcon aria-hidden="true" />
-									{{ formatMessage(messages.copySha1) }}
-								</template>
-								<template #copy-sha512>
-									<CopyIcon aria-hidden="true" />
-									{{ formatMessage(messages.copySha512) }}
-								</template>
-							</OverflowMenu>
-						</ButtonStyled>
+						<ButtonLink
+							:href="decorateDownloadUrl(file.url)"
+							:title="`Download ${file.filename}`"
+							:download="file.filename"
+							tabindex="0"
+						>
+							<DownloadIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.downloadButton) }}
+						</ButtonLink>
+						<TeleportOverflowMenu
+							type="outlined"
+							:label="formatMessage(commonMessages.moreOptionsButton)"
+							:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+							:options="[
+								{
+									id: 'copy-sha1',
+									label: formatMessage(messages.copySha1),
+									action: () => copyFileHash(file, 'sha1'),
+								},
+								{
+									id: 'copy-sha512',
+									label: formatMessage(messages.copySha512),
+									action: () => copyFileHash(file, 'sha512'),
+								},
+							]"
+						>
+							<MoreVerticalIcon aria-hidden="true" />
+							<template #copy-sha1>
+								<CopyIcon aria-hidden="true" />
+								{{ formatMessage(messages.copySha1) }}
+							</template>
+							<template #copy-sha512>
+								<CopyIcon aria-hidden="true" />
+								{{ formatMessage(messages.copySha512) }}
+							</template>
+						</TeleportOverflowMenu>
 					</template>
 					<template #dependencyActions="{ dependency }">
-						<ButtonStyled circular>
-							<nuxt-link
-								v-if="
-									createDependencyLink({
-										project: dependency.project,
-										version: dependency.version ?? getDependencyVersion(dependency.dependency),
-									})
-								"
-								v-tooltip="
-									formatMessage(
-										(dependency.version ?? getDependencyVersion(dependency.dependency))
-											? messages.viewVersion
-											: messages.viewProject,
-									)
-								"
-								:to="
-									createDependencyLink({
-										project: dependency.project,
-										version: dependency.version ?? getDependencyVersion(dependency.dependency),
-									})
-								"
-								target="_blank"
-							>
-								<ExternalIcon />
-							</nuxt-link>
-						</ButtonStyled>
-						<ButtonStyled circular color="brand" color-fill="text">
-							<a
-								v-if="
-									(dependency.version ?? getDependencyVersion(dependency.dependency)) &&
-									dependency.dependency.dependency_type !== 'incompatible'
-								"
-								v-tooltip="
-									getDependencyPrimaryFileTooltip(
-										dependency.version ?? getDependencyVersion(dependency.dependency),
-									)
-								"
-								:href="
-									getDependencyDownloadUrl(
-										dependency.version ?? getDependencyVersion(dependency.dependency),
-									)
-								"
-								:download="
-									getDependencyPrimaryFile(
-										dependency.version ?? getDependencyVersion(dependency.dependency),
-									)?.filename
-								"
-								:disabled="
-									!getDependencyPrimaryFile(
-										dependency.version ?? getDependencyVersion(dependency.dependency),
-									)?.url
-								"
-							>
-								<DownloadIcon />
-							</a>
-							<button
-								v-else-if="dependency.project"
-								v-tooltip="formatMessage(messages.downloadProject)"
-								:aria-label="formatMessage(messages.downloadProject)"
-								@click="openDependencyDownloadModal(dependency.project, $event)"
-							>
-								<DownloadIcon />
-							</button>
-						</ButtonStyled>
+						<ButtonLink
+							v-if="
+								createDependencyLink({
+									project: dependency.project,
+									version: dependency.version ?? getDependencyVersion(dependency.dependency),
+								})
+							"
+							v-tooltip="
+								formatMessage(
+									(dependency.version ?? getDependencyVersion(dependency.dependency))
+										? messages.viewVersion
+										: messages.viewProject,
+								)
+							"
+							:to="
+								createDependencyLink({
+									project: dependency.project,
+									version: dependency.version ?? getDependencyVersion(dependency.dependency),
+								})
+							"
+							target="_blank"
+							class="!w-9 !rounded-full !px-0"
+						>
+							<ExternalIcon />
+						</ButtonLink>
+						<ButtonLink
+							v-if="
+								(dependency.version ?? getDependencyVersion(dependency.dependency)) &&
+								dependency.dependency.dependency_type !== 'incompatible'
+							"
+							v-tooltip="
+								getDependencyPrimaryFileTooltip(
+									dependency.version ?? getDependencyVersion(dependency.dependency),
+								)
+							"
+							:href="
+								getDependencyDownloadUrl(
+									dependency.version ?? getDependencyVersion(dependency.dependency),
+								)
+							"
+							:download="
+								getDependencyPrimaryFile(
+									dependency.version ?? getDependencyVersion(dependency.dependency),
+								)?.filename
+							"
+							:disabled="
+								!getDependencyPrimaryFile(
+									dependency.version ?? getDependencyVersion(dependency.dependency),
+								)?.url
+							"
+							:aria-label="
+								getDependencyPrimaryFileTooltip(
+									dependency.version ?? getDependencyVersion(dependency.dependency),
+								)
+							"
+							class="!w-9 !rounded-full !px-0 !text-brand [&>svg]:!text-brand"
+						>
+							<DownloadIcon />
+						</ButtonLink>
+						<IconButton
+							v-else-if="dependency.project"
+							v-tooltip="formatMessage(messages.downloadProject)"
+							:label="formatMessage(messages.downloadProject)"
+							class="!text-brand [&>svg]:!text-brand"
+							@click="openDependencyDownloadModal(dependency.project, $event)"
+						>
+							<DownloadIcon />
+						</IconButton>
 					</template>
 				</VersionPage>
 				<section
@@ -501,7 +504,8 @@ import {
 } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	Collapsible,
 	commonMessages,
 	commonProjectSettingsMessages,
@@ -509,13 +513,14 @@ import {
 	CopyCode,
 	defineMessages,
 	formatLoader,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
 	IntlFormatted,
 	MultiSelect,
 	NewModal,
-	OverflowMenu,
+	TeleportOverflowMenu,
 	useFormatBytes,
 	useFormatDateTime,
 	useVIntl,
@@ -577,7 +582,6 @@ const devInfoCollapsed = computed({
 	},
 })
 
-const baseId = useId()
 const signInRouteObj = computed(() => getSignInRouteObj(route))
 
 const versionRouteParam = computed(() => route.params.version as string)
diff --git a/apps/frontend/src/pages/[type]/[project]/versions.vue b/apps/frontend/src/pages/[type]/[project]/versions.vue
index 7770d541b6..48bec39fc7 100644
--- a/apps/frontend/src/pages/[type]/[project]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[project]/versions.vue
@@ -41,192 +41,202 @@
 				:open-modal="currentMember ? () => handleOpenCreateVersionModal() : undefined"
 			>
 				<template #actions="{ version }">
-					<ButtonStyled v-if="getPrimaryFile(version)" circular type="transparent">
-						<a
-							v-tooltip="`Download`"
-							:href="createDownloadUrl(version)"
-							:download="getPrimaryFile(version)?.filename"
-							class="hover:!bg-button-bg [&>svg]:!text-green"
-							aria-label="Download"
-							@click="emit('onDownload')"
-						>
+					<ButtonLink
+						v-if="getPrimaryFile(version)"
+						v-tooltip="`Download`"
+						type="quiet"
+						:href="createDownloadUrl(version)"
+						:download="getPrimaryFile(version)?.filename"
+						class="!w-9 !rounded-full !px-0 hover:!bg-button-bg [&>svg]:!text-green"
+						aria-label="Download"
+						@click="emit('onDownload')"
+					>
+						<DownloadIcon aria-hidden="true" />
+					</ButtonLink>
+					<TeleportOverflowMenu
+						v-if="currentMember"
+						type="quiet"
+						label="Edit version"
+						tooltip="Edit version"
+						class="hover:!bg-button-bg"
+						:options="[
+							{
+								id: 'edit-metadata',
+								label: 'Edit metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+							},
+							{
+								id: 'edit-details',
+								label: 'Edit details',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
+							},
+							{
+								id: 'edit-files',
+								label: 'Edit files',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
+							},
+						]"
+					>
+						<EditIcon aria-hidden="true" />
+						<template #edit-files>
+							<FileIcon aria-hidden="true" />
+							Edit files
+						</template>
+						<template #edit-details>
+							<InfoIcon aria-hidden="true" />
+							Edit details
+						</template>
+						<template #edit-metadata>
+							<BoxIcon aria-hidden="true" />
+							Edit metadata
+						</template>
+					</TeleportOverflowMenu>
+					<TeleportOverflowMenu
+						type="quiet"
+						label="More options"
+						tooltip="More options"
+						class="hover:!bg-button-bg"
+						:options="[
+							{
+								id: 'download',
+								label: 'Download',
+								type: 'link',
+								tone: 'brand',
+								hoverFilled: true,
+								href: createDownloadUrl(version),
+								download: getPrimaryFile(version)?.filename,
+								shown: !!getPrimaryFile(version),
+							},
+							{
+								id: 'new-tab',
+								label: 'Open in new tab',
+								type: 'link',
+								href: `/${project.project_type}/${
+									project.slug ? project.slug : project.id
+								}/version/${encodeURI(version.displayUrlEnding ? version.displayUrlEnding : version.id)}`,
+								target: '_blank',
+							},
+							{
+								id: 'copy-link',
+								label: 'Copy link',
+								action: () =>
+									copyToClipboard(
+										`https://modrinth.com/${project.project_type}/${
+											project.slug ? project.slug : project.id
+										}/version/${encodeURI(version.displayUrlEnding ? version.displayUrlEnding : version.id)}`,
+									),
+							},
+							{
+								id: 'share',
+								label: 'Share',
+								action: () => {},
+								shown: false,
+							},
+							{
+								id: 'report',
+								label: 'Report',
+								tone: 'red',
+								hoverFilled: true,
+								action: () =>
+									auth.user ? reportVersion(version.id) : navigateTo(getSignInRouteObj(route)),
+								shown: !currentMember,
+							},
+							{ type: 'divider', shown: currentMember || flags.developerMode },
+							{
+								id: 'copy-id',
+								label: 'Copy ID',
+								action: () => {
+									copyToClipboard(version.id)
+								},
+								shown: currentMember || flags.developerMode,
+							},
+							{
+								id: 'copy-maven',
+								label: 'Copy Maven coordinates',
+								action: () => {
+									copyToClipboard(`maven.modrinth:${project.slug}:${version.id}`)
+								},
+								shown: flags.developerMode,
+							},
+							{ type: 'divider', shown: !!currentMember },
+							{
+								id: 'edit-metadata',
+								label: 'Edit metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+								shown: !!currentMember,
+							},
+							{
+								id: 'edit-details',
+								label: 'Edit details',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
+								shown: !!currentMember,
+							},
+							{
+								id: 'edit-files',
+								label: 'Edit files',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
+								shown: !!currentMember,
+							},
+							{
+								id: 'delete',
+								label: 'Delete',
+								tone: 'red',
+								hoverFilled: true,
+								action: () => {
+									selectedVersion = version.id
+									deleteVersionModal?.show()
+								},
+								shown: !!currentMember,
+							},
+						]"
+						@select="$event.id === 'download' && emit('onDownload')"
+					>
+						<MoreVerticalIcon aria-hidden="true" />
+						<template #download>
 							<DownloadIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled v-if="currentMember" circular type="transparent">
-						<OverflowMenu
-							v-tooltip="'Edit version'"
-							class="hover:!bg-button-bg"
-							:dropdown-id="`${baseDropdownId}-edit-${version.id}`"
-							:options="[
-								{
-									id: 'edit-metadata',
-									action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
-								},
-								{
-									id: 'edit-details',
-									action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
-								},
-								{
-									id: 'edit-files',
-									action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
-								},
-							]"
-							aria-label="Edit version"
-						>
-							<EditIcon aria-hidden="true" />
-							<template #edit-files>
-								<FileIcon aria-hidden="true" />
-								Edit files
-							</template>
-							<template #edit-details>
-								<InfoIcon aria-hidden="true" />
-								Edit details
-							</template>
-							<template #edit-metadata>
-								<BoxIcon aria-hidden="true" />
-								Edit metadata
-							</template>
-						</OverflowMenu>
-					</ButtonStyled>
-					<ButtonStyled circular type="transparent">
-						<OverflowMenu
-							v-tooltip="'More options'"
-							class="hover:!bg-button-bg"
-							:dropdown-id="`${baseDropdownId}-${version.id}`"
-							:options="[
-								{
-									id: 'download',
-									color: 'primary',
-									hoverFilled: true,
-									link: createDownloadUrl(version),
-									download: getPrimaryFile(version)?.filename,
-									action: () => {
-										emit('onDownload')
-									},
-									shown: !!getPrimaryFile(version),
-								},
-								{
-									id: 'new-tab',
-									action: () => {},
-									link: `/${project.project_type}/${
-										project.slug ? project.slug : project.id
-									}/version/${encodeURI(version.displayUrlEnding ? version.displayUrlEnding : version.id)}`,
-									external: true,
-								},
-								{
-									id: 'copy-link',
-									action: () =>
-										copyToClipboard(
-											`https://modrinth.com/${project.project_type}/${
-												project.slug ? project.slug : project.id
-											}/version/${encodeURI(version.displayUrlEnding ? version.displayUrlEnding : version.id)}`,
-										),
-								},
-								{
-									id: 'share',
-									action: () => {},
-									shown: false,
-								},
-								{
-									id: 'report',
-									color: 'red',
-									hoverFilled: true,
-									action: () =>
-										auth.user ? reportVersion(version.id) : navigateTo(getSignInRouteObj(route)),
-									shown: !currentMember,
-								},
-								{ divider: true, shown: currentMember || flags.developerMode },
-								{
-									id: 'copy-id',
-									action: () => {
-										copyToClipboard(version.id)
-									},
-									shown: currentMember || flags.developerMode,
-								},
-								{
-									id: 'copy-maven',
-									action: () => {
-										copyToClipboard(`maven.modrinth:${project.slug}:${version.id}`)
-									},
-									shown: flags.developerMode,
-								},
-								{ divider: true, shown: !!currentMember },
-								{
-									id: 'edit-metadata',
-									action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
-									shown: !!currentMember,
-								},
-								{
-									id: 'edit-details',
-									action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
-									shown: !!currentMember,
-								},
-								{
-									id: 'edit-files',
-									action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
-									shown: !!currentMember,
-								},
-								{
-									id: 'delete',
-									color: 'red',
-									hoverFilled: true,
-									action: () => {
-										selectedVersion = version.id
-										deleteVersionModal?.show()
-									},
-									shown: !!currentMember,
-								},
-							]"
-							aria-label="More options"
-						>
-							<MoreVerticalIcon aria-hidden="true" />
-							<template #download>
-								<DownloadIcon aria-hidden="true" />
-								Download
-							</template>
-							<template #new-tab>
-								<ExternalIcon aria-hidden="true" />
-								Open in new tab
-							</template>
-							<template #copy-link>
-								<LinkIcon aria-hidden="true" />
-								Copy link
-							</template>
-							<template #share>
-								<ShareIcon aria-hidden="true" />
-								Share
-							</template>
-							<template #report>
-								<ReportIcon aria-hidden="true" />
-								Report
-							</template>
-							<template #edit-files>
-								<FileIcon aria-hidden="true" />
-								Edit files
-							</template>
-							<template #edit-details>
-								<InfoIcon aria-hidden="true" />
-								Edit details
-							</template>
-							<template #edit-metadata>
-								<BoxIcon aria-hidden="true" />
-								Edit metadata
-							</template>
-							<template #delete>
-								<TrashIcon aria-hidden="true" />
-								Delete
-							</template>
-							<template #copy-id>
-								<ClipboardCopyIcon aria-hidden="true" />
-								Copy ID
-							</template>
-							<template #copy-maven>
-								<ClipboardCopyIcon aria-hidden="true" />
-								Copy Maven coordinates
-							</template>
-						</OverflowMenu>
-					</ButtonStyled>
+							Download
+						</template>
+						<template #new-tab>
+							<ExternalIcon aria-hidden="true" />
+							Open in new tab
+						</template>
+						<template #copy-link>
+							<LinkIcon aria-hidden="true" />
+							Copy link
+						</template>
+						<template #share>
+							<ShareIcon aria-hidden="true" />
+							Share
+						</template>
+						<template #report>
+							<ReportIcon aria-hidden="true" />
+							Report
+						</template>
+						<template #edit-files>
+							<FileIcon aria-hidden="true" />
+							Edit files
+						</template>
+						<template #edit-details>
+							<InfoIcon aria-hidden="true" />
+							Edit details
+						</template>
+						<template #edit-metadata>
+							<BoxIcon aria-hidden="true" />
+							Edit metadata
+						</template>
+						<template #delete>
+							<TrashIcon aria-hidden="true" />
+							Delete
+						</template>
+						<template #copy-id>
+							<ClipboardCopyIcon aria-hidden="true" />
+							Copy ID
+						</template>
+						<template #copy-maven>
+							<ClipboardCopyIcon aria-hidden="true" />
+							Copy Maven coordinates
+						</template>
+					</TeleportOverflowMenu>
 				</template>
 			</ProjectPageVersions>
 			<template v-else>
@@ -259,13 +269,13 @@ import {
 	TrashIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	ButtonLink,
 	ConfirmModal,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	OverflowMenu,
 	ProjectPageVersions,
+	TeleportOverflowMenu,
 } from '@modrinth/ui'
 import { onMounted, useTemplateRef, watch } from 'vue'
 
diff --git a/apps/frontend/src/pages/admin/affiliates.vue b/apps/frontend/src/pages/admin/affiliates.vue
index 92925757ce..c67abeb81c 100644
--- a/apps/frontend/src/pages/admin/affiliates.vue
+++ b/apps/frontend/src/pages/admin/affiliates.vue
@@ -27,12 +27,10 @@
 					placeholder="Search affiliates..."
 					clearable
 				/>
-				<ButtonStyled color="brand">
-					<button @click="createModal?.show">
-						<PlusIcon />
-						Create affiliate code
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="createModal?.show">
+					<PlusIcon />
+					Create affiliate code
+				</Button>
 			</div>
 		</div>
 		<Admonition v-if="error" type="critical">
@@ -90,7 +88,7 @@ import {
 	AffiliateLinkCard,
 	AffiliateLinkCreateModal,
 	Avatar,
-	ButtonStyled,
+	Button,
 	ConfirmModal,
 	injectModrinthClient,
 	injectNotificationManager,
diff --git a/apps/frontend/src/pages/admin/analytics/events.vue b/apps/frontend/src/pages/admin/analytics/events.vue
index a471615ce9..f3a9dddfb3 100644
--- a/apps/frontend/src/pages/admin/analytics/events.vue
+++ b/apps/frontend/src/pages/admin/analytics/events.vue
@@ -33,19 +33,20 @@
 				<div class="flex items-center justify-between">
 					<span class="label__title font-semibold">Announcement link (optional)</span>
 
-					<ButtonStyled v-if="committedNormalizedAnnouncementUrl" type="transparent" size="small">
-						<a
-							:href="committedNormalizedAnnouncementUrl"
-							target="_blank"
-							rel="noopener noreferrer"
-							aria-label="Check announcement link"
-							title="Check announcement link"
-							class="text-sm"
-						>
-							<ExternalIcon aria-hidden="true" />
-							Open link
-						</a>
-					</ButtonStyled>
+					<ButtonLink
+						v-if="committedNormalizedAnnouncementUrl"
+						type="quiet"
+						size="xs"
+						:href="committedNormalizedAnnouncementUrl"
+						target="_blank"
+						rel="noopener noreferrer"
+						aria-label="Check announcement link"
+						title="Check announcement link"
+						class="!h-6 text-sm"
+					>
+						<ExternalIcon aria-hidden="true" />
+						Open link
+					</ButtonLink>
 				</div>
 				<div class="flex items-center gap-2">
 					<StyledInput
@@ -110,15 +111,16 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="transparent">
-					<button @click="eventModal?.hide()">Cancel</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!canSaveEvent || isSaving" @click="saveEvent">
-						<SaveIcon aria-hidden="true" />
-						{{ modalMode === 'create' ? 'Create event' : 'Save' }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" @click="eventModal?.hide()">Cancel</Button>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="!canSaveEvent || isSaving"
+					@click="saveEvent"
+				>
+					<SaveIcon aria-hidden="true" />
+					{{ modalMode === 'create' ? 'Create event' : 'Save' }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -137,12 +139,10 @@
 						clearable
 						wrapper-class="w-full sm:w-72"
 					/>
-					<ButtonStyled color="brand">
-						<button :disabled="isSaving" @click="openCreateModal">
-							<PlusIcon aria-hidden="true" />
-							New event
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" :disabled="isSaving" @click="openCreateModal">
+						<PlusIcon aria-hidden="true" />
+						New event
+					</Button>
 				</div>
 			</div>
 
@@ -196,21 +196,23 @@
 
 				<template #cell-actions="{ row }">
 					<div class="flex justify-end gap-2">
-						<ButtonStyled circular type="outlined" color="red">
-							<button
-								:aria-label="`Delete ${row.title}`"
-								:disabled="isDeletingEvent(row.id)"
-								@click="openDeleteEventModal(row)"
-							>
-								<TrashIcon aria-hidden="true" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled type="outlined">
-							<button :disabled="isSaving || isDeletingEvent(row.id)" @click="openEditModal(row)">
-								Edit
-								<EditIcon aria-hidden="true" />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							type="outlined"
+							:label="`Delete ${row.title}`"
+							:disabled="isDeletingEvent(row.id)"
+							class="!text-red !shadow-[inset_0_0_0_1px_var(--color-red)] [&>svg]:!text-red"
+							@click="openDeleteEventModal(row)"
+						>
+							<TrashIcon aria-hidden="true" />
+						</IconButton>
+						<Button
+							type="outlined"
+							:disabled="isSaving || isDeletingEvent(row.id)"
+							@click="openEditModal(row)"
+						>
+							Edit
+							<EditIcon aria-hidden="true" />
+						</Button>
 					</div>
 				</template>
 
@@ -239,8 +241,8 @@ import {
 	SpinnerIcon,
 	TrashIcon,
 } from '@modrinth/assets'
+import { Button, ButtonLink, IconButton } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	ConfirmModal,
 	DatePicker,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/admin/billing/[user].vue b/apps/frontend/src/pages/admin/billing/[user].vue
index 936ac39ca3..72ad4e591b 100644
--- a/apps/frontend/src/pages/admin/billing/[user].vue
+++ b/apps/frontend/src/pages/admin/billing/[user].vue
@@ -43,18 +43,14 @@
 				<Toggle id="unprovision" v-model="unprovision" />
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button :disabled="refunding" @click="refundCharge">
-						<CheckIcon aria-hidden="true" />
-						Refund charge
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="refundModal.hide()">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="refunding" @click="refundCharge">
+					<CheckIcon aria-hidden="true" />
+					Refund charge
+				</Button>
+				<Button @click="refundModal.hide()">
+					<XIcon aria-hidden="true" />
+					Cancel
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -82,18 +78,14 @@
 				<Toggle id="cancel" v-model="cancel" />
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button :disabled="modifying" @click="modifyCharge">
-						<CheckIcon aria-hidden="true" />
-						Modify charge
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="modifyModal.hide()">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="modifying" @click="modifyCharge">
+					<CheckIcon aria-hidden="true" />
+					Modify charge
+				</Button>
+				<Button @click="modifyModal.hide()">
+					<XIcon aria-hidden="true" />
+					Cancel
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -117,18 +109,14 @@
 				<Toggle id="sendEmail" v-model="creditSendEmail" />
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button :disabled="crediting" @click="applyCredit">
-						<CheckIcon aria-hidden="true" />
-						Apply credit
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="creditModal.hide()">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="crediting" @click="applyCredit">
+					<CheckIcon aria-hidden="true" />
+					Apply credit
+				</Button>
+				<Button @click="creditModal.hide()">
+					<XIcon aria-hidden="true" />
+					Cancel
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -141,13 +129,11 @@
 				<h1 class="m-0 text-2xl font-extrabold">{{ user?.username }}'s subscriptions</h1>
 			</div>
 			<div class="flex items-center gap-2">
-				<ButtonStyled>
-					<nuxt-link :to="`/user/${user?.id}`">
-						<UserIcon aria-hidden="true" />
-						User profile
-						<ExternalIcon class="h-4 w-4" />
-					</nuxt-link>
-				</ButtonStyled>
+				<ButtonLink :to="`/user/${user?.id}`">
+					<UserIcon aria-hidden="true" />
+					User profile
+					<ExternalIcon class="h-4 w-4" />
+				</ButtonLink>
 			</div>
 		</div>
 		<div>
@@ -176,25 +162,20 @@
 					</div>
 					<div v-if="subscription.metadata?.id" class="flex flex-col items-end gap-2">
 						<CopyCode :text="subscription.metadata.id" />
-						<ButtonStyled
+						<ButtonLink
 							v-if="
 								subscription.metadata?.type === 'pyro' || subscription.metadata?.type === 'medal'
 							"
+							:to="`/hosting/manage/${subscription.metadata.id}`"
+							target="_blank"
+							class="w-fit"
 						>
-							<nuxt-link
-								:to="`/hosting/manage/${subscription.metadata.id}`"
-								target="_blank"
-								class="w-fit"
-							>
-								<ServerIcon /> Server panel <ExternalIcon class="h-4 w-4" />
-							</nuxt-link>
-						</ButtonStyled>
-						<ButtonStyled>
-							<button @click="showCreditModal(subscription)">
-								<CurrencyIcon />
-								Credit
-							</button>
-						</ButtonStyled>
+							<ServerIcon /> Server panel <ExternalIcon class="h-4 w-4" />
+						</ButtonLink>
+						<Button @click="showCreditModal(subscription)">
+							<CurrencyIcon />
+							Credit
+						</Button>
 					</div>
 				</div>
 				<div class="flex flex-col gap-2">
@@ -226,7 +207,8 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	CopyCode,
 	defineMessages,
 	DropdownSelect,
diff --git a/apps/frontend/src/pages/admin/docs.vue b/apps/frontend/src/pages/admin/docs.vue
index 557caf30fd..59847b213a 100644
--- a/apps/frontend/src/pages/admin/docs.vue
+++ b/apps/frontend/src/pages/admin/docs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, Card, StyledInput } from '@modrinth/ui'
+import { Button, Card, StyledInput } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import docs from '~/templates/docs'
@@ -60,12 +60,10 @@ onMounted(() => {
 						wrapper-class="w-72"
 					/>
 
-					<ButtonStyled color="brand">
-						<button :disabled="filtered.length === 0" @click="openAll">
-							<LibraryIcon class="h-4 w-4" aria-hidden="true" />
-							Open all ({{ counts.shown }})
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" :disabled="filtered.length === 0" @click="openAll">
+						<LibraryIcon class="h-4 w-4" aria-hidden="true" />
+						Open all ({{ counts.shown }})
+					</Button>
 
 					<span class="text-sm text-secondary">
 						Showing <span class="font-medium text-contrast">{{ counts.shown }}</span> of
@@ -96,18 +94,19 @@ onMounted(() => {
 						</div>
 
 						<div class="mt-auto flex gap-2">
-							<ButtonStyled color="brand">
-								<button class="w-full flex-1 justify-center" @click="openPreview(id)">
-									<PlayIcon class="h-4 w-4" aria-hidden="true" />
-									Preview
-								</button>
-							</ButtonStyled>
+							<Button
+								type="colored"
+								color="brand"
+								class="w-full flex-1 justify-center"
+								@click="openPreview(id)"
+							>
+								<PlayIcon class="h-4 w-4" aria-hidden="true" />
+								Preview
+							</Button>
 
-							<ButtonStyled>
-								<button class="justify-center" title="Copy preview URL" @click="copy(id)">
-									<CopyIcon class="h-4 w-4" aria-hidden="true" />
-								</button>
-							</ButtonStyled>
+							<Button class="justify-center" title="Copy preview URL" @click="copy(id)">
+								<CopyIcon class="h-4 w-4" aria-hidden="true" />
+							</Button>
 						</div>
 					</li>
 				</ul>
diff --git a/apps/frontend/src/pages/admin/emails.vue b/apps/frontend/src/pages/admin/emails.vue
index 71b08af93c..9d33284e40 100644
--- a/apps/frontend/src/pages/admin/emails.vue
+++ b/apps/frontend/src/pages/admin/emails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { Button, IconButton, NewModal, StyledInput } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import emails from '~/templates/emails'
@@ -182,9 +182,7 @@ onMounted(() => {
 					</div>
 
 					<div class="input-group mt-4">
-						<ButtonStyled type="transparent">
-							<button @click="closePreview">Close</button>
-						</ButtonStyled>
+						<Button type="quiet" @click="closePreview">Close</Button>
 					</div>
 				</div>
 			</div>
@@ -200,12 +198,10 @@ onMounted(() => {
 					wrapper-class="w-72"
 				/>
 
-				<ButtonStyled color="brand">
-					<button :disabled="filtered.length === 0" @click="openAll">
-						<LibraryIcon class="h-4 w-4" aria-hidden="true" />
-						Open all ({{ counts.shown }})
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="filtered.length === 0" @click="openAll">
+					<LibraryIcon class="h-4 w-4" aria-hidden="true" />
+					Open all ({{ counts.shown }})
+				</Button>
 
 				<span class="text-sm text-secondary">
 					Showing <span class="font-medium text-contrast">{{ counts.shown }}</span> of
@@ -236,18 +232,14 @@ onMounted(() => {
 					</div>
 
 					<div class="mt-auto flex gap-2">
-						<ButtonStyled color="brand">
-							<button @click="openPreview(id, $event)">
-								<PlayIcon aria-hidden="true" />
-								Preview
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" @click="openPreview(id, $event)">
+							<PlayIcon aria-hidden="true" />
+							Preview
+						</Button>
 
-						<ButtonStyled circular type="outlined">
-							<button title="Copy preview URL" @click="copy(id)">
-								<CopyIcon aria-hidden="true" />
-							</button>
-						</ButtonStyled>
+						<IconButton type="outlined" label="Copy" title="Copy preview URL" @click="copy(id)">
+							<CopyIcon aria-hidden="true" />
+						</IconButton>
 					</div>
 				</li>
 			</ul>
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index a3e8465714..3c2a8160f1 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -100,22 +100,24 @@
 				/>
 			</div>
 			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button v-if="editingNotice" :disabled="!!noticeSubmitError" @click="() => saveChanges()">
-						<SaveIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.saveChangesButton) }}
-					</button>
-					<button v-else :disabled="!!noticeSubmitError" @click="() => createNotice()">
-						<PlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.createNotice) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="createNoticeModal?.hide">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="editingNotice"
+					type="colored"
+					color="brand"
+					:disabled="!!noticeSubmitError"
+					@click="() => saveChanges()"
+				>
+					<SaveIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</Button>
+				<Button v-else :disabled="!!noticeSubmitError" @click="() => createNotice()">
+					<PlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.createNotice) }}
+				</Button>
+				<Button @click="createNoticeModal?.hide">
+					<XIcon aria-hidden="true" />
+					Cancel
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -125,12 +127,10 @@
 			class="mb-6 flex items-end justify-between border-0 border-b border-solid border-divider pb-4"
 		>
 			<h1 class="m-0 text-2xl">Server notices</h1>
-			<ButtonStyled color="brand">
-				<button @click="openNewNoticeModal">
-					<PlusIcon />
-					{{ formatMessage(messages.createNotice) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" @click="openNewNoticeModal">
+				<PlusIcon />
+				{{ formatMessage(messages.createNotice) }}
+			</Button>
 		</div>
 		<div>
 			<div v-if="!notices || notices.length === 0">
@@ -201,16 +201,12 @@
 							</TagItem>
 						</div>
 						<div class="col-span-2 flex gap-2 md:col-span-1">
-							<ButtonStyled>
-								<button @click="() => startEditing(notice)">
-									<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled color="red">
-								<button @click="() => deleteNotice(notice)">
-									<TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}
-								</button>
-							</ButtonStyled>
+							<Button @click="() => startEditing(notice)">
+								<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+							</Button>
+							<Button type="colored" color="red" @click="() => deleteNotice(notice)">
+								<TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}
+							</Button>
 						</div>
 					</div>
 					<div class="col-span-full grid">
@@ -263,7 +259,7 @@
 import type { Archon } from '@modrinth/api-client'
 import { EditIcon, PlusIcon, SaveIcon, SettingsIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	Combobox,
 	commonMessages,
 	CopyCode,
diff --git a/apps/frontend/src/pages/admin/servers/transfers.vue b/apps/frontend/src/pages/admin/servers/transfers.vue
index ed50e5be86..7a1c2b7e85 100644
--- a/apps/frontend/src/pages/admin/servers/transfers.vue
+++ b/apps/frontend/src/pages/admin/servers/transfers.vue
@@ -13,12 +13,10 @@
 			class="mb-6 flex items-end justify-between border-0 border-b border-solid border-divider pb-4"
 		>
 			<h1 class="m-0 text-2xl">Server transfers</h1>
-			<ButtonStyled color="brand">
-				<button @click="openTransferModal">
-					<PlusIcon />
-					New transfer
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" @click="openTransferModal">
+				<PlusIcon />
+				New transfer
+			</Button>
 		</div>
 		<div>
 			<div v-if="loading" class="py-8 text-center text-secondary">Loading transfers...</div>
@@ -67,12 +65,16 @@
 								<span class="text-sm text-secondary">
 									{{ batch.log_count }} transfer{{ batch.log_count === 1 ? '' : 's' }}
 								</span>
-								<ButtonStyled v-if="canCancel(batch)" color="red" color-fill="text">
-									<button @click="showCancelModal(batch.id)">
-										<XCircleIcon />
-										Cancel
-									</button>
-								</ButtonStyled>
+								<Button
+									v-if="canCancel(batch)"
+									type="quiet"
+									color="red"
+									class="!text-red [&>svg]:!text-red"
+									@click="showCancelModal(batch.id)"
+								>
+									<XCircleIcon />
+									Cancel
+								</Button>
 							</div>
 						</div>
 						<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-secondary">
@@ -112,7 +114,7 @@ import type { Archon } from '@modrinth/api-client'
 import { PlusIcon, XCircleIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	ConfirmModal,
 	injectModrinthClient,
 	injectNotificationManager,
diff --git a/apps/frontend/src/pages/admin/user_email.vue b/apps/frontend/src/pages/admin/user_email.vue
index 30169a1470..ab52a529af 100644
--- a/apps/frontend/src/pages/admin/user_email.vue
+++ b/apps/frontend/src/pages/admin/user_email.vue
@@ -20,12 +20,10 @@
 					/>
 				</div>
 				<div class="flex gap-2">
-					<ButtonStyled color="brand">
-						<button @click="getUserFromEmail">
-							<MailIcon aria-hidden="true" />
-							Get user account
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" @click="getUserFromEmail">
+						<MailIcon aria-hidden="true" />
+						Get user account
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -33,7 +31,7 @@
 </template>
 <script setup lang="ts">
 import { MailIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
 
 const { addNotification } = injectNotificationManager()
 
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index 000bee5d50..284e9bd844 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -17,10 +17,11 @@ import {
 	Accordion,
 	Avatar,
 	Badge,
-	ButtonStyled,
+	Button,
 	Checkbox,
 	commonMessages,
 	defineMessages,
+	IconButton,
 	IntlFormatted,
 	useVIntl,
 } from '@modrinth/ui'
@@ -546,20 +547,16 @@ useSeoMeta({
 				{{ formatMessage(messages.description) }}
 			</h2>
 			<div class="button-group">
-				<ButtonStyled v-if="os" color="brand" size="large">
-					<button rel="noopener nofollow" @click="handleDownload">
-						<LinuxIcon v-if="os === 'Linux'" />
-						<WindowsIcon v-else-if="os === 'Windows'" />
-						<AppleIcon v-else-if="os === 'Mac'" />
-						{{ formatMessage(messages.downloadModrinthAppButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled type="outlined" size="large">
-					<button @click="scrollToSection">
-						<ArrowDownIcon />
-						{{ formatMessage(messages.moreDownloadOptions) }}
-					</button>
-				</ButtonStyled>
+				<Button v-if="os" type="colored" color="brand" size="xl" @click="handleDownload">
+					<LinuxIcon v-if="os === 'Linux'" />
+					<WindowsIcon v-else-if="os === 'Windows'" />
+					<AppleIcon v-else-if="os === 'Mac'" />
+					{{ formatMessage(messages.downloadModrinthAppButton) }}
+				</Button>
+				<Button type="outlined" size="xl" @click="scrollToSection">
+					<ArrowDownIcon />
+					{{ formatMessage(messages.moreDownloadOptions) }}
+				</Button>
 			</div>
 			<img src="https://cdn-raw.modrinth.com/app-landing/app-screenshot.webp" alt="" />
 			<div class="bottom-transition" />
@@ -602,11 +599,9 @@ useSeoMeta({
 							<div class="cell">{{ mod.version }}</div>
 							<div class="cell check">
 								<Checkbox :model-value="true" tabindex="-1" />
-								<ButtonStyled circular type="transparent">
-									<button tabindex="-1">
-										<TrashIcon />
-									</button>
-								</ButtonStyled>
+								<IconButton type="quiet" label="Delete" tabindex="-1">
+									<TrashIcon />
+								</IconButton>
 							</div>
 						</div>
 					</div>
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index ac04aa6edf..9a09b069ed 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -59,18 +59,21 @@
 				</div>
 			</div>
 			<div class="button-row">
-				<ButtonStyled size="large">
-					<button class="wide-button" :disabled="pending" @click="onReject">
-						<XIcon />
-						{{ formatMessage(messages.decline) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand" size="large">
-					<button class="wide-button" :disabled="pending" @click="onAuthorize">
-						<CheckIcon />
-						{{ formatMessage(messages.authorize) }}
-					</button>
-				</ButtonStyled>
+				<Button size="xl" class="wide-button" :disabled="pending" @click="onReject">
+					<XIcon />
+					{{ formatMessage(messages.decline) }}
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					size="xl"
+					class="wide-button"
+					:disabled="pending"
+					@click="onAuthorize"
+				>
+					<CheckIcon />
+					{{ formatMessage(messages.authorize) }}
+				</Button>
 			</div>
 			<div class="flex flex-col gap-2 text-center">
 				<p class="m-0 text-sm">
@@ -91,7 +94,7 @@
 import { CheckIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 86f6bcab04..68a37a8a1a 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -38,15 +38,15 @@
 				<HCaptcha ref="captcha" v-model="token" />
 			</div>
 
-			<ButtonStyled color="brand">
-				<button
-					class="!w-full"
-					:disabled="(globals?.captcha_enabled ? !token : false) || !email"
-					@click="recovery"
-				>
-					<SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				type="colored"
+				color="brand"
+				class="!w-full"
+				:disabled="(globals?.captcha_enabled ? !token : false) || !email"
+				@click="recovery"
+			>
+				<SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
+			</Button>
 		</template>
 		<template v-else-if="step === 'passed_challenge'">
 			<Admonition :type="'info'">
@@ -84,11 +84,9 @@
 					wrapper-class="w-full"
 				/>
 
-				<ButtonStyled color="brand">
-					<button class="!w-full" @click="changePassword">
-						{{ formatMessage(postChallengeMessages.action) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" class="!w-full" @click="changePassword">
+					{{ formatMessage(postChallengeMessages.action) }}
+				</Button>
 			</div>
 		</template>
 	</div>
@@ -97,7 +95,7 @@
 import { KeyIcon, MailIcon, SendIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/auth/verify-email.vue b/apps/frontend/src/pages/auth/verify-email.vue
index 5118bfd8b6..6bf46eb25e 100644
--- a/apps/frontend/src/pages/auth/verify-email.vue
+++ b/apps/frontend/src/pages/auth/verify-email.vue
@@ -12,17 +12,13 @@
 			</Admonition>
 
 			<div class="grid grid-cols-2 gap-2">
-				<ButtonStyled>
-					<NuxtLink class="shadow-none" to="/settings/account">
-						<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
-					</NuxtLink>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<NuxtLink to="/discover/mods">
-						{{ formatMessage(messages.discoverMods) }}
-						<RightArrowIcon />
-					</NuxtLink>
-				</ButtonStyled>
+				<ButtonLink class="shadow-none" to="/settings/account">
+					<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
+				</ButtonLink>
+				<ButtonLink type="colored" color="brand" to="/discover/mods">
+					{{ formatMessage(messages.discoverMods) }}
+					<RightArrowIcon />
+				</ButtonLink>
 			</div>
 		</template>
 
@@ -37,25 +33,19 @@
 
 			<template v-if="auth.user">
 				<div class="grid grid-cols-2 gap-2">
-					<ButtonStyled>
-						<NuxtLink to="/settings/account">
-							<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
-						</NuxtLink>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<NuxtLink to="/discover/mods">
-							{{ formatMessage(messages.discoverMods) }}
-							<RightArrowIcon />
-						</NuxtLink>
-					</ButtonStyled>
+					<ButtonLink to="/settings/account">
+						<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
+					</ButtonLink>
+					<ButtonLink type="colored" color="brand" to="/discover/mods">
+						{{ formatMessage(messages.discoverMods) }}
+						<RightArrowIcon />
+					</ButtonLink>
 				</div>
 			</template>
-			<ButtonStyled v-else color="brand">
-				<NuxtLink to="/auth/sign-in" class="!w-full">
-					{{ formatMessage(commonMessages.signInButton) }}
-					<RightArrowIcon />
-				</NuxtLink>
-			</ButtonStyled>
+			<ButtonLink v-else type="colored" color="brand" to="/auth/sign-in" class="!w-full">
+				{{ formatMessage(commonMessages.signInButton) }}
+				<RightArrowIcon />
+			</ButtonLink>
 		</template>
 
 		<template v-else>
@@ -70,18 +60,20 @@
 				{{ formatMessage(failedVerificationMessages.description) }}
 			</Admonition>
 
-			<ButtonStyled v-if="auth.user" color="brand">
-				<button class="!w-full" @click="handleResendEmailVerification">
-					{{ formatMessage(failedVerificationMessages.action) }}
-					<RightArrowIcon />
-				</button>
-			</ButtonStyled>
-			<ButtonStyled v-else color="brand">
-				<NuxtLink to="/auth/sign-in" class="!w-full">
-					{{ formatMessage(commonMessages.signInButton) }}
-					<RightArrowIcon />
-				</NuxtLink>
-			</ButtonStyled>
+			<Button
+				v-if="auth.user"
+				type="colored"
+				color="brand"
+				class="!w-full"
+				@click="handleResendEmailVerification"
+			>
+				{{ formatMessage(failedVerificationMessages.action) }}
+				<RightArrowIcon />
+			</Button>
+			<ButtonLink v-else type="colored" color="brand" to="/auth/sign-in" class="!w-full">
+				{{ formatMessage(commonMessages.signInButton) }}
+				<RightArrowIcon />
+			</ButtonLink>
 		</template>
 	</div>
 </template>
@@ -89,7 +81,8 @@
 import { RightArrowIcon, SettingsIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
diff --git a/apps/frontend/src/pages/collection/[collection].vue b/apps/frontend/src/pages/collection/[collection].vue
index db4424666e..167ce44566 100644
--- a/apps/frontend/src/pages/collection/[collection].vue
+++ b/apps/frontend/src/pages/collection/[collection].vue
@@ -16,13 +16,17 @@
 			<div class="flex w-[30rem] flex-col gap-3">
 				<div class="flow-root">
 					<div class="group relative float-end ml-4">
-						<OverflowMenu
-							v-tooltip="formatMessage(messages.editIconButton)"
-							:dropdown-id="`${baseId}-edit-icon`"
+						<TeleportOverflowMenu
+							:label="formatMessage(messages.editIconButton)"
+							:tooltip="formatMessage(messages.editIconButton)"
 							class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
 							:options="[
 								{
 									id: 'select',
+									label:
+										previewImage || collection.icon_url
+											? formatMessage(messages.replaceIcon)
+											: formatMessage(messages.selectIcon),
 									action: () => {
 										const input = iconInputRef?.$el?.querySelector('input')
 										input?.click()
@@ -30,7 +34,7 @@
 								},
 								{
 									id: 'remove',
-									color: 'danger',
+									label: formatMessage(messages.removeIconButton),
 									action: () => {
 										deletedIcon = true
 										previewImage = null
@@ -64,7 +68,7 @@
 								<XIcon />
 								{{ formatMessage(messages.removeIconButton) }}
 							</template>
-						</OverflowMenu>
+						</TeleportOverflowMenu>
 						<FileInput
 							id="collection-icon-input"
 							ref="iconInputRef"
@@ -117,23 +121,19 @@
 					</RadioButtons>
 				</div>
 				<div class="flex justify-end gap-2">
-					<ButtonStyled>
-						<button class="w-24" @click="() => editModal?.hide()">
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button class="w-36" :disabled="saving" @click="save()">
-							<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
-							<SaveIcon v-else aria-hidden="true" />
-							{{
-								saving
-									? formatMessage(commonMessages.savingButton)
-									: formatMessage(commonMessages.saveButton)
-							}}
-						</button>
-					</ButtonStyled>
+					<Button class="w-24" @click="() => editModal?.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button type="colored" color="brand" class="w-36" :disabled="saving" @click="save()">
+						<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
+						<SaveIcon v-else aria-hidden="true" />
+						{{
+							saving
+								? formatMessage(commonMessages.savingButton)
+								: formatMessage(commonMessages.saveButton)
+						}}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -204,31 +204,29 @@
 						</div>
 						<div class="col-span-2 flex items-center gap-2 sm:col-span-1">
 							<template v-if="canEdit">
-								<ButtonStyled size="large">
-									<button @click="openEditModal">
-										<EditIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.editButton) }}
-									</button>
-								</ButtonStyled>
-								<ButtonStyled size="large" circular type="transparent">
-									<OverflowMenu
-										:dropdown-id="`${baseId}-more-options`"
-										:options="[
-											{
-												id: 'delete',
-												color: 'red',
-												action: () => deleteModal?.show(),
-											},
-										]"
-										:aria-label="formatMessage(commonMessages.moreOptionsButton)"
-									>
-										<MoreVerticalIcon aria-hidden="true" />
-										<template #delete>
-											<TrashIcon aria-hidden="true" />
-											{{ formatMessage(commonMessages.deleteLabel) }}
-										</template>
-									</OverflowMenu>
-								</ButtonStyled>
+								<Button size="xl" @click="openEditModal">
+									<EditIcon aria-hidden="true" />
+									{{ formatMessage(commonMessages.editButton) }}
+								</Button>
+								<TeleportOverflowMenu
+									type="quiet"
+									size="xl"
+									:label="formatMessage(commonMessages.moreOptionsButton)"
+									:options="[
+										{
+											id: 'delete',
+											label: formatMessage(commonMessages.deleteLabel),
+											tone: 'red',
+											action: () => deleteModal?.show(),
+										},
+									]"
+								>
+									<MoreVerticalIcon aria-hidden="true" />
+									<template #delete>
+										<TrashIcon aria-hidden="true" />
+										{{ formatMessage(commonMessages.deleteLabel) }}
+									</template>
+								</TeleportOverflowMenu>
 							</template>
 						</div>
 					</div>
@@ -350,30 +348,35 @@
 					"
 				>
 					<template v-if="canEdit || collection.id === 'following'" #actions>
-						<ButtonStyled v-if="canEdit">
-							<button class="remove-btn" :disabled="removing" @click="() => removeProject(project)">
-								<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
-								<XIcon v-else aria-hidden="true" />
-								{{ formatMessage(messages.removeProjectButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="collection.id === 'following'">
-							<button @click="unfollowProject(project)">
-								<HeartMinusIcon aria-hidden="true" />
-								{{ formatMessage(messages.unfollowProjectButton) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-if="canEdit"
+							class="remove-btn"
+							:disabled="removing"
+							@click="() => removeProject(project)"
+						>
+							<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
+							<XIcon v-else aria-hidden="true" />
+							{{ formatMessage(messages.removeProjectButton) }}
+						</Button>
+						<Button v-if="collection.id === 'following'" @click="unfollowProject(project)">
+							<HeartMinusIcon aria-hidden="true" />
+							{{ formatMessage(messages.unfollowProjectButton) }}
+						</Button>
 					</template>
 				</ProjectCard>
 			</ProjectCardList>
 			<EmptyState v-else type="empty-inbox" :heading="formatMessage(messages.noProjectsLabel)">
 				<template #actions>
-					<ButtonStyled v-if="auth.user && auth.user.id === creator.id" color="brand">
-						<nuxt-link class="mx-auto w-min" to="/discover/mods">
-							<CompassIcon class="size-5" />
-							{{ formatMessage(messages.discoverModsButton) }}
-						</nuxt-link>
-					</ButtonStyled>
+					<ButtonLink
+						v-if="auth.user && auth.user.id === creator.id"
+						type="colored"
+						color="brand"
+						class="mx-auto w-min"
+						to="/discover/mods"
+					>
+						<CompassIcon class="size-5" />
+						{{ formatMessage(messages.discoverModsButton) }}
+					</ButtonLink>
 				</template>
 			</EmptyState>
 		</NormalPage>
@@ -400,7 +403,8 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	commonProjectTypeCategoryMessages,
 	commonProjectTypeSentenceMessages,
@@ -417,12 +421,12 @@ import {
 	NewModal,
 	normalizeChildren,
 	NormalPage,
-	OverflowMenu,
 	ProjectCard,
 	ProjectCardList,
 	RadioButtons,
 	SidebarCard,
 	StyledInput,
+	TeleportOverflowMenu,
 	useCompactNumber,
 	useFormatDateTime,
 	useRelativeTime,
@@ -451,8 +455,6 @@ const router = useRouter()
 const auth = await useAuth()
 const cosmetics = useCosmetics()
 const queryClient = useQueryClient()
-const baseId = useId()
-
 async function fetchProjectsByIds(projectIds) {
 	const segmentSize = 800
 	const segments = []
diff --git a/apps/frontend/src/pages/dashboard.vue b/apps/frontend/src/pages/dashboard.vue
index 2a82c1ab89..b6afc2fac3 100644
--- a/apps/frontend/src/pages/dashboard.vue
+++ b/apps/frontend/src/pages/dashboard.vue
@@ -65,12 +65,10 @@
 					}}
 				</div>
 				<template #actions>
-					<ButtonStyled color="blue">
-						<NuxtLink to="/discord/link" class="w-fit !px-4">
-							<ExternalIcon />
-							{{ formatMessage(messages.discordRoleBannerCta) }}
-						</NuxtLink>
-					</ButtonStyled>
+					<ButtonLink type="colored" color="blue" to="/discord/link" class="w-fit !px-4">
+						<ExternalIcon />
+						{{ formatMessage(messages.discordRoleBannerCta) }}
+					</ButtonLink>
 				</template>
 			</Admonition>
 			<NuxtPage :route="route" />
@@ -93,7 +91,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	ButtonLink,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/dashboard/affiliate-links.vue b/apps/frontend/src/pages/dashboard/affiliate-links.vue
index a02b7fea4d..ce10e0c94f 100644
--- a/apps/frontend/src/pages/dashboard/affiliate-links.vue
+++ b/apps/frontend/src/pages/dashboard/affiliate-links.vue
@@ -26,12 +26,10 @@
 					:placeholder="formatMessage(messages.searchAffiliateLinks)"
 					clearable
 				/>
-				<ButtonStyled color="brand">
-					<button @click="createModal?.show">
-						<PlusIcon />
-						{{ formatMessage(messages.createButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="createModal?.show">
+					<PlusIcon />
+					{{ formatMessage(messages.createButton) }}
+				</Button>
 			</div>
 		</div>
 		<Admonition v-if="error" type="critical">
@@ -63,7 +61,7 @@ import {
 	Admonition,
 	AffiliateLinkCard,
 	AffiliateLinkCreateModal,
-	ButtonStyled,
+	Button,
 	ConfirmModal,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index a2bf61191a..abdbb631ac 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -30,12 +30,15 @@
 					<span class="font-semibold text-secondary">{{ selected }}</span>
 				</DropdownSelect>
 
-				<ButtonStyled color="brand">
-					<button class="ml-auto" @click="(event) => $refs.modal_creation.show(event)">
-						<PlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.createNewButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					class="ml-auto"
+					@click="(event) => $refs.modal_creation.show(event)"
+				>
+					<PlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.createNewButton) }}
+				</Button>
 			</div>
 		</div>
 		<div class="collections-grid">
@@ -144,7 +147,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	DropdownSelect,
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index c394cd4b32..aa5b86ea05 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/apps/frontend/src/pages/dashboard/index.vue
@@ -50,12 +50,10 @@
 				</template>
 				<div v-else class="universal-body">
 					<p>{{ formatMessage(messages.noUnreadNotifications) }}</p>
-					<ButtonStyled>
-						<nuxt-link to="/dashboard/notifications/history" class="!mt-4 w-fit">
-							<HistoryIcon />
-							{{ formatMessage(messages.viewNotificationHistory) }}
-						</nuxt-link>
-					</ButtonStyled>
+					<ButtonLink to="/dashboard/notifications/history" class="!mt-4 w-fit">
+						<HistoryIcon />
+						{{ formatMessage(messages.viewNotificationHistory) }}
+					</ButtonLink>
 				</div>
 			</section>
 		</div>
@@ -65,7 +63,7 @@
 import { ChevronRightIcon, HistoryIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	ButtonLink,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index a53fc72c70..d910e4a28c 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -21,18 +21,14 @@
 					</h2>
 				</div>
 				<template v-if="!history">
-					<ButtonStyled v-if="data.hasRead">
-						<button @click="updateRoute()">
-							<HistoryIcon />
-							{{ formatMessage(messages.viewHistory) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="notifications.length > 0" color="red">
-						<button @click="readAll()">
-							<CheckCheckIcon />
-							{{ formatMessage(messages.markAllAsRead) }}
-						</button>
-					</ButtonStyled>
+					<Button v-if="data.hasRead" @click="updateRoute()">
+						<HistoryIcon />
+						{{ formatMessage(messages.viewHistory) }}
+					</Button>
+					<Button v-if="notifications.length > 0" type="colored" color="red" @click="readAll()">
+						<CheckCheckIcon />
+						{{ formatMessage(messages.markAllAsRead) }}
+					</Button>
 				</template>
 			</div>
 			<Chips
@@ -71,7 +67,7 @@
 <script setup>
 import { CheckCheckIcon, HistoryIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	Chips,
 	commonMessages,
 	defineMessages,
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index d30f91d6ca..d258f0e5af 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -5,12 +5,10 @@
 			<div class="header__row">
 				<h2 class="header__title text-2xl">{{ formatMessage(messages.organizationsTitle) }}</h2>
 				<div class="input-group">
-					<ButtonStyled color="brand">
-						<button @click="openCreateOrgModal">
-							<PlusIcon aria-hidden="true" />
-							{{ formatMessage(messages.createOrganization) }}
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" @click="openCreateOrgModal">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createOrganization) }}
+					</Button>
 				</div>
 			</div>
 			<template v-if="orgs?.length > 0">
@@ -53,7 +51,7 @@
 
 <script setup>
 import { PlusIcon, UsersIcon } from '@modrinth/assets'
-import { Avatar, ButtonStyled, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
+import { Avatar, Button, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 3d57d8402f..ec29a4ca46 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -17,17 +17,15 @@
 							:placeholder="getLinkInputPlaceholder(editLinks.issues.clear)"
 							:maxlength="2048"
 						/>
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.clearLinkLabel)"
-								class="label-button"
-								:aria-label="formatMessage(messages.clearLinkLabel)"
-								:data-active="editLinks.issues.clear"
-								@click="editLinks.issues.clear = !editLinks.issues.clear"
-							>
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.clearLinkLabel)"
+							:label="formatMessage(messages.clearLinkLabel)"
+							class="label-button"
+							:data-active="editLinks.issues.clear"
+							@click="editLinks.issues.clear = !editLinks.issues.clear"
+						>
+							<TrashIcon />
+						</IconButton>
 					</div>
 					<label for="source-code-input" :title="formatMessage(messages.sourceCodeDescription)">
 						<span class="label__title">{{ formatMessage(messages.sourceCodeLabel) }}</span>
@@ -42,17 +40,15 @@
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.source.clear)"
 						/>
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.clearLinkLabel)"
-								class="label-button"
-								:aria-label="formatMessage(messages.clearLinkLabel)"
-								:data-active="editLinks.source.clear"
-								@click="editLinks.source.clear = !editLinks.source.clear"
-							>
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.clearLinkLabel)"
+							:label="formatMessage(messages.clearLinkLabel)"
+							class="label-button"
+							:data-active="editLinks.source.clear"
+							@click="editLinks.source.clear = !editLinks.source.clear"
+						>
+							<TrashIcon />
+						</IconButton>
 					</div>
 					<label for="wiki-page-input" :title="formatMessage(messages.wikiPageDescription)">
 						<span class="label__title">{{ formatMessage(messages.wikiPageLabel) }}</span>
@@ -67,17 +63,15 @@
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.wiki.clear)"
 						/>
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.clearLinkLabel)"
-								class="label-button"
-								:aria-label="formatMessage(messages.clearLinkLabel)"
-								:data-active="editLinks.wiki.clear"
-								@click="editLinks.wiki.clear = !editLinks.wiki.clear"
-							>
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.clearLinkLabel)"
+							:label="formatMessage(messages.clearLinkLabel)"
+							class="label-button"
+							:data-active="editLinks.wiki.clear"
+							@click="editLinks.wiki.clear = !editLinks.wiki.clear"
+						>
+							<TrashIcon />
+						</IconButton>
 					</div>
 					<label
 						for="discord-invite-input"
@@ -95,17 +89,15 @@
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.discord.clear, true)"
 						/>
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.clearLinkLabel)"
-								class="label-button"
-								:aria-label="formatMessage(messages.clearLinkLabel)"
-								:data-active="editLinks.discord.clear"
-								@click="editLinks.discord.clear = !editLinks.discord.clear"
-							>
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.clearLinkLabel)"
+							:label="formatMessage(messages.clearLinkLabel)"
+							class="label-button"
+							:data-active="editLinks.discord.clear"
+							@click="editLinks.discord.clear = !editLinks.discord.clear"
+						>
+							<TrashIcon />
+						</IconButton>
 					</div>
 				</section>
 				<p>
@@ -141,18 +133,14 @@
 					:description="formatMessage(messages.showAllProjects)"
 				/>
 				<div class="input-group ml-auto mt-4">
-					<ButtonStyled type="outlined">
-						<button @click="$refs.editLinksModal.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button @click="bulkEditLinks()">
-							<SaveIcon />
-							{{ formatMessage(commonMessages.saveChangesButton) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="$refs.editLinksModal.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button type="colored" color="brand" @click="bulkEditLinks()">
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveChangesButton) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -173,12 +161,10 @@
 							{{ formatMessage(messages.headTitle) }}
 						</h2>
 						<div class="flex w-full flex-wrap items-center gap-2 md:w-auto">
-							<ButtonStyled color="brand">
-								<button @click="$refs.modal_creation.show($event)">
-									<PlusIcon />
-									{{ formatMessage(commonMessages.createAProjectButton) }}
-								</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" @click="$refs.modal_creation.show($event)">
+								<PlusIcon />
+								{{ formatMessage(commonMessages.createAProjectButton) }}
+							</Button>
 						</div>
 					</div>
 				</template>
@@ -251,26 +237,23 @@
 				</template>
 				<template #cell-actions="{ row: project }">
 					<div class="flex !flex-row items-center !justify-end gap-2">
-						<ButtonStyled
+						<ButtonLink
 							v-if="projectsWithMigrationWarning.includes(project.id)"
-							circular
+							v-tooltip="formatMessage(messages.reviewEnvironmentMetadata)"
+							type="colored"
 							color="orange"
+							:to="`${getProjectUrl(project)}?showEnvironmentMigrationWarning=true`"
+							class="!w-9 !rounded-full !px-0"
 						>
-							<nuxt-link
-								v-tooltip="formatMessage(messages.reviewEnvironmentMetadata)"
-								:to="`${getProjectUrl(project)}?showEnvironmentMigrationWarning=true`"
-							>
-								<TriangleAlertIcon />
-							</nuxt-link>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<nuxt-link
-								v-tooltip="formatMessage(commonMessages.settingsLabel)"
-								:to="`${getProjectUrl(project)}/settings`"
-							>
-								<SettingsIcon />
-							</nuxt-link>
-						</ButtonStyled>
+							<TriangleAlertIcon />
+						</ButtonLink>
+						<ButtonLink
+							v-tooltip="formatMessage(commonMessages.settingsLabel)"
+							:to="`${getProjectUrl(project)}/settings`"
+							class="!w-9 !rounded-full !px-0"
+						>
+							<SettingsIcon />
+						</ButtonLink>
 					</div>
 				</template>
 			</Table>
@@ -320,25 +303,27 @@
 					{{ formatMessage(messages.selectedProjectsCount, { count: selectedProjects.length }) }}
 				</span>
 				<div class="mx-0.5 h-6 w-px bg-surface-5" />
-				<ButtonStyled type="transparent">
-					<button
-						v-tooltip="formatMessage(commonMessages.clearButton)"
-						class="!text-primary"
-						@click="clearProjectSelection()"
-					>
-						<XIcon class="cq-show-icon hidden" />
-						<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="formatMessage(commonMessages.clearButton)"
+					type="quiet"
+					class="!text-primary"
+					@click="clearProjectSelection()"
+				>
+					<XIcon class="cq-show-icon hidden" />
+					<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
+				</Button>
 			</div>
 
 			<div class="ml-auto flex items-center gap-0.5">
-				<ButtonStyled color="brand">
-					<button v-tooltip="formatMessage(messages.editLinksButton)" @click="showEditLinksModal()">
-						<EditIcon />
-						<span class="bar-label">{{ formatMessage(messages.editLinksButton) }}</span>
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="formatMessage(messages.editLinksButton)"
+					type="colored"
+					color="brand"
+					@click="showEditLinksModal()"
+				>
+					<EditIcon />
+					<span class="bar-label">{{ formatMessage(messages.editLinksButton) }}</span>
+				</Button>
 			</div>
 		</FloatingActionBar>
 	</div>
@@ -357,12 +342,14 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	Checkbox,
 	commonMessages,
 	CopyCode,
 	defineMessages,
 	FloatingActionBar,
+	IconButton,
 	injectNotificationManager,
 	IntlFormatted,
 	NewModal,
diff --git a/apps/frontend/src/pages/dashboard/revenue/transfers.vue b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
index 2dadf99100..5fb7030005 100644
--- a/apps/frontend/src/pages/dashboard/revenue/transfers.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
@@ -13,16 +13,15 @@
 					"
 					listbox
 				/>
-				<ButtonStyled circular>
-					<button
-						v-tooltip="formatMessage(messages.downloadCsv)"
-						:disabled="buildingCsv"
-						@click="onDownloadCSV"
-					>
-						<SpinnerIcon v-if="buildingCsv" class="animate-spin" />
-						<DownloadIcon v-else />
-					</button>
-				</ButtonStyled>
+				<IconButton
+					v-tooltip="formatMessage(messages.downloadCsv)"
+					:label="formatMessage(messages.downloadCsv)"
+					:disabled="buildingCsv"
+					@click="onDownloadCSV"
+				>
+					<SpinnerIcon v-if="buildingCsv" class="animate-spin" />
+					<DownloadIcon v-else />
+				</IconButton>
 			</div>
 		</div>
 		<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
@@ -90,10 +89,10 @@ import {
 	SpinnerIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	Combobox,
 	defineMessages,
 	EmptyState,
+	IconButton,
 	injectModrinthClient,
 	useFormatDateTime,
 	useFormatMoney,
diff --git a/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index dece65edec..3b7767f78b 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -50,21 +50,23 @@
 					<div
 						class="flex w-full flex-col items-center gap-5 text-center align-middle sm:w-fit sm:flex-row"
 					>
-						<ButtonStyled color="brand" size="large">
-							<nuxt-link class="w-fit" to="#plan">
-								<GameIcon aria-hidden="true" />
-								{{
-									hasServers
-										? formatMessage(messages.startANewServer)
-										: formatMessage(messages.startYourServer)
-								}}
-							</nuxt-link>
-						</ButtonStyled>
-						<ButtonStyled v-if="hasServers" type="outlined" size="large">
-							<nuxt-link class="w-fit" to="/hosting/manage">
-								<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.manageYourServers) }}
-							</nuxt-link>
-						</ButtonStyled>
+						<ButtonLink type="colored" color="brand" size="xl" class="w-fit" to="#plan">
+							<GameIcon aria-hidden="true" />
+							{{
+								hasServers
+									? formatMessage(messages.startANewServer)
+									: formatMessage(messages.startYourServer)
+							}}
+						</ButtonLink>
+						<ButtonLink
+							v-if="hasServers"
+							type="outlined"
+							size="xl"
+							class="w-fit"
+							to="/hosting/manage"
+						>
+							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.manageYourServers) }}
+						</ButtonLink>
 					</div>
 				</div>
 			</div>
@@ -603,12 +605,10 @@
 					</div>
 
 					<div class="flex w-full flex-col-reverse gap-2 md:w-auto md:flex-col md:items-center">
-						<ButtonStyled color="standard" size="large">
-							<button class="w-full md:w-fit" @click="selectProduct('custom')">
-								{{ formatMessage(messages.getStartedButton) }}
-								<RightArrowIcon class="shrink-0" />
-							</button>
-						</ButtonStyled>
+						<Button size="xl" class="w-full md:w-fit" @click="selectProduct('custom')">
+							{{ formatMessage(messages.getStartedButton) }}
+							<RightArrowIcon class="shrink-0" />
+						</Button>
 						<p v-if="lowestPrice" class="m-0 text-sm">
 							{{
 								formatMessage(messages.startingAtPrice, {
@@ -634,7 +634,8 @@ import {
 	VersionIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 406db83516..c226a6d8c7 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -26,22 +26,24 @@
 				{{ formatMessage(messages.discoverHeading) }}
 			</h2>
 			<div class="button-group">
-				<ButtonStyled color="brand" size="large">
-					<nuxt-link to="/discover/mods">
-						<CompassIcon aria-hidden="true" />
-						{{ formatMessage(messages.discoverMods) }}
-					</nuxt-link>
-				</ButtonStyled>
-				<ButtonStyled size="large" type="outlined">
-					<nuxt-link v-if="!auth.user" to="/auth/sign-up" rel="noopener nofollow">
-						<LogInIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.signUpButton) }}
-					</nuxt-link>
-					<nuxt-link v-else to="/dashboard/projects">
-						<DashboardIcon aria-hidden="true" />
-						{{ formatMessage(messages.goToDashboard) }}
-					</nuxt-link>
-				</ButtonStyled>
+				<ButtonLink type="colored" color="brand" size="xl" to="/discover/mods">
+					<CompassIcon aria-hidden="true" />
+					{{ formatMessage(messages.discoverMods) }}
+				</ButtonLink>
+				<ButtonLink
+					v-if="!auth.user"
+					type="outlined"
+					size="xl"
+					to="/auth/sign-up"
+					rel="noopener nofollow"
+				>
+					<LogInIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.signUpButton) }}
+				</ButtonLink>
+				<ButtonLink v-else type="outlined" size="xl" to="/dashboard/projects">
+					<DashboardIcon aria-hidden="true" />
+					{{ formatMessage(messages.goToDashboard) }}
+				</ButtonLink>
 			</div>
 		</div>
 		<div class="users-section-outer">
@@ -444,7 +446,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	ButtonLink,
 	commonMessages,
 	defineMessages,
 	DropdownSelect,
diff --git a/apps/frontend/src/pages/moderation/external-projects.vue b/apps/frontend/src/pages/moderation/external-projects.vue
index fde7ff7ef2..f77e72e99d 100644
--- a/apps/frontend/src/pages/moderation/external-projects.vue
+++ b/apps/frontend/src/pages/moderation/external-projects.vue
@@ -37,14 +37,10 @@
 				class="w-[30rem]"
 			/>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<button @click="closeEditModal">Cancel</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button type="submit" :disabled="isSavingEdit">
-						{{ isSavingEdit ? 'Saving...' : 'Save' }}
-					</button>
-				</ButtonStyled>
+				<Button @click="closeEditModal">Cancel</Button>
+				<Button type="colored" color="brand" native-type="submit" :disabled="isSavingEdit">
+					{{ isSavingEdit ? 'Saving...' : 'Save' }}
+				</Button>
 			</div>
 		</form>
 	</NewModal>
@@ -59,24 +55,18 @@
 				clearable
 				wrapper-class="flex-1 w-full"
 			/>
-			<ButtonStyled color="brand">
-				<button type="submit">
-					<SearchIcon aria-hidden="true" />
-					Search by title
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button type="button" @click="executeFlameIdLookup">
-					<BinaryIcon aria-hidden="true" />
-					Lookup CurseForge ID
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button type="button" @click="executeSha1Lookup">
-					<HashIcon aria-hidden="true" />
-					Lookup SHA-1
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" native-type="submit">
+				<SearchIcon aria-hidden="true" />
+				Search by title
+			</Button>
+			<Button native-type="button" @click="executeFlameIdLookup">
+				<BinaryIcon aria-hidden="true" />
+				Lookup CurseForge ID
+			</Button>
+			<Button native-type="button" @click="executeSha1Lookup">
+				<HashIcon aria-hidden="true" />
+				Lookup SHA-1
+			</Button>
 		</form>
 		<div>
 			<template v-if="lastSearchKind !== 'none'">
@@ -106,12 +96,10 @@
 							:cf_id="project.flame_project_id"
 						>
 							<template #actions>
-								<ButtonStyled>
-									<button @click="openEditModal(project)">
-										<EditIcon />
-										Edit
-									</button>
-								</ButtonStyled>
+								<Button @click="openEditModal(project)">
+									<EditIcon />
+									Edit
+								</Button>
 							</template>
 						</ExternalProjectLookupCard>
 					</div>
@@ -130,8 +118,8 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { BinaryIcon, EditIcon, HashIcon, SearchIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	Combobox,
 	type ComboboxOption,
 	EmptyState,
diff --git a/apps/frontend/src/pages/moderation/global-traces/[key].vue b/apps/frontend/src/pages/moderation/global-traces/[key].vue
index 96121bc2c0..5adc6c9041 100644
--- a/apps/frontend/src/pages/moderation/global-traces/[key].vue
+++ b/apps/frontend/src/pages/moderation/global-traces/[key].vue
@@ -1,12 +1,10 @@
 <template>
 	<div class="flex flex-col gap-4">
 		<div>
-			<ButtonStyled>
-				<NuxtLink to="/moderation/global-traces">
-					<ArrowLeftIcon aria-hidden="true" />
-					Back to global traces
-				</NuxtLink>
-			</ButtonStyled>
+			<ButtonLink to="/moderation/global-traces">
+				<ArrowLeftIcon aria-hidden="true" />
+				Back to global traces
+			</ButtonLink>
 		</div>
 
 		<EmptyState
@@ -49,12 +47,10 @@
 				</div>
 				<div class="flex shrink-0 flex-nowrap items-center gap-2">
 					<Badge :type="trace.verdict" />
-					<ButtonStyled color="red">
-						<button :disabled="isRemoving" @click="removeGlobalTrace">
-							<TrashIcon aria-hidden="true" />
-							Remove
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="red" :disabled="isRemoving" @click="removeGlobalTrace">
+						<TrashIcon aria-hidden="true" />
+						Remove
+					</Button>
 				</div>
 			</div>
 
@@ -95,7 +91,8 @@ import type { Labrinth } from '@modrinth/api-client'
 import { ArrowLeftIcon, HashIcon, TrashIcon } from '@modrinth/assets'
 import {
 	Badge,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	EmptyState,
 	injectModrinthClient,
 	injectNotificationManager,
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index f89d6d2c8c..a0af2fbbf0 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -18,7 +18,8 @@
 					<Combobox
 						v-model="currentFilterType"
 						class="!w-full flex-grow sm:!w-[280px] sm:flex-grow-0 lg:!w-[280px]"
-						trigger-class="!h-10"
+						trigger-type="base"
+						trigger-size="lg"
 						:options="filterTypes"
 						:placeholder="formatMessage(commonMessages.filterByLabel)"
 						@select="goToPage(1)"
@@ -36,7 +37,8 @@
 					<Combobox
 						v-model="currentSortType"
 						class="!w-full flex-grow sm:!w-[240px] sm:flex-grow-0"
-						trigger-class="!h-10"
+						trigger-type="base"
+						trigger-size="lg"
 						:options="sortTypes"
 						:placeholder="formatMessage(commonMessages.sortByLabel)"
 						@select="goToPage(1)"
@@ -56,7 +58,8 @@
 					<Combobox
 						v-model="itemsPerPage"
 						class="!w-full flex-grow sm:!w-[160px] sm:flex-grow-0 lg:!w-[140px]"
-						trigger-class="!h-10"
+						trigger-type="base"
+						trigger-size="lg"
 						:options="itemsPerPageOptions"
 						placeholder="Items per page"
 						@select="goToPage(1)"
@@ -69,17 +72,17 @@
 					</Combobox>
 				</div>
 
-				<ButtonStyled color="orange">
-					<button
-						class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
-						:disabled="pending || paginatedProjects?.length === 0"
-						@click="moderateAllInFilter()"
-					>
-						<ScaleIcon class="flex-shrink-0" />
-						<span class="hidden sm:inline">{{ formatMessage(messages.moderate) }}</span>
-						<span class="sm:hidden">Moderate</span>
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="orange"
+					class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
+					:disabled="pending || paginatedProjects?.length === 0"
+					@click="moderateAllInFilter()"
+				>
+					<ScaleIcon class="flex-shrink-0" />
+					<span class="hidden sm:inline">{{ formatMessage(messages.moderate) }}</span>
+					<span class="sm:hidden">Moderate</span>
+				</Button>
 			</div>
 		</div>
 
@@ -139,8 +142,8 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { ListFilterIcon, ScaleIcon, SearchIcon, SortAscIcon, SortDescIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
 import {
-	ButtonStyled,
 	Combobox,
 	type ComboboxOption,
 	commonMessages,
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index 69b82307dc..67973d5e54 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -21,6 +21,8 @@
 					class="!w-full flex-grow sm:!w-[200px] sm:flex-grow-0"
 					:options="messageFilterTypes"
 					:placeholder="formatMessage(commonMessages.filterByLabel)"
+					trigger-type="base"
+					trigger-size="lg"
 					@select="goToPage(1)"
 				>
 					<template #selected="{ label: messageLabel }">
@@ -38,6 +40,8 @@
 					class="!w-full flex-grow sm:!w-[150px] sm:flex-grow-0 lg:!w-[150px]"
 					:options="sortTypes"
 					:placeholder="formatMessage(commonMessages.sortByLabel)"
+					trigger-type="base"
+					trigger-size="lg"
 					@select="goToPage(1)"
 				>
 					<template #selected="{ label: sortingLabel }">
@@ -61,6 +65,8 @@
 					:searchable="reporterOrProjectOptions.length > 6"
 					:max-tag-rows="1"
 					fit-content
+					trigger-type="base"
+					trigger-size="lg"
 					checkbox-position="right"
 					show-selection-actions
 					should-show-select-all
@@ -69,7 +75,7 @@
 					<template #input-content="{ isOpen, openDirection }">
 						<div class="flex min-h-7 min-w-0 max-w-full flex-1 items-center gap-1.5 pr-1">
 							<LayersIcon class="size-5 shrink-0 text-primary" />
-							<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-primary">
+							<span class="min-w-0 flex-1 truncate px-0.5 font-semibold text-inherit">
 								{{
 									currentReporterOrProject.length === 0
 										? 'All Reports'
@@ -118,8 +124,11 @@
 					</template>
 				</MultiSelect>
 
-				<FloatingPanel button-class="!h-10 !shadow-none !text-contrast" :auto-focus="false">
-					<BlendIcon class="size-5" /> Advanced filters
+				<TeleportPopoutMenu label="Advanced filters" size="lg" :auto-focus="false">
+					<template #trigger>
+						<BlendIcon aria-hidden="true" />
+						Advanced filters
+					</template>
 					<template #panel>
 						<div class="flex min-w-64 flex-col gap-3">
 							<div class="flex flex-col gap-2">
@@ -156,7 +165,7 @@
 							</div>
 						</div>
 					</template>
-				</FloatingPanel>
+				</TeleportPopoutMenu>
 			</div>
 		</div>
 
@@ -208,12 +217,12 @@ import {
 	Combobox,
 	type ComboboxOption,
 	commonMessages,
-	FloatingPanel,
 	injectModrinthClient,
 	MultiSelect,
 	type MultiSelectItem,
 	Pagination,
 	StyledInput,
+	TeleportPopoutMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import Fuse from 'fuse.js'
diff --git a/apps/frontend/src/pages/moderation/technical-review/[project].vue b/apps/frontend/src/pages/moderation/technical-review/[project].vue
index af938bca01..6f04ae4823 100644
--- a/apps/frontend/src/pages/moderation/technical-review/[project].vue
+++ b/apps/frontend/src/pages/moderation/technical-review/[project].vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { ArrowLeftIcon, LoaderCircleIcon } from '@modrinth/assets'
-import { ButtonStyled, injectModrinthClient } from '@modrinth/ui'
+import { ButtonLink, injectModrinthClient } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 
 import MaliciousSummaryModal, {
@@ -274,12 +274,10 @@ function refetch() {
 <template>
 	<div class="flex flex-col gap-4">
 		<div>
-			<ButtonStyled
-				><nuxt-link :to="'/moderation/technical-review'">
-					<ArrowLeftIcon class="size-5" />
-					Back to queue
-				</nuxt-link></ButtonStyled
-			>
+			<ButtonLink :to="'/moderation/technical-review'">
+				<ArrowLeftIcon class="size-5" />
+				Back to queue
+			</ButtonLink>
 		</div>
 
 		<div v-if="isLoading" class="flex flex-col gap-4">
diff --git a/apps/frontend/src/pages/moderation/technical-review/index.vue b/apps/frontend/src/pages/moderation/technical-review/index.vue
index d66a0a4b2f..23877ace6b 100644
--- a/apps/frontend/src/pages/moderation/technical-review/index.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/index.vue
@@ -12,10 +12,10 @@ import {
 	Combobox,
 	type ComboboxOption,
 	commonMessages,
-	FloatingPanel,
 	injectModrinthClient,
 	Pagination,
 	StyledInput,
+	TeleportPopoutMenu,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -611,6 +611,8 @@ watch(totalPages, (pages) => {
 					v-model="currentResponseFilter"
 					class="!w-full flex-grow sm:!w-[120px] sm:flex-grow-0"
 					:options="responseFilterTypes"
+					trigger-type="base"
+					trigger-size="lg"
 				>
 					<template #selected>
 						<span class="flex flex-row gap-2 align-middle font-semibold">
@@ -625,6 +627,8 @@ watch(totalPages, (pages) => {
 					class="!w-full flex-grow sm:!w-[215px] sm:flex-grow-0"
 					:options="sortTypes"
 					:placeholder="formatMessage(commonMessages.sortByLabel)"
+					trigger-type="base"
+					trigger-size="lg"
 				>
 					<template #selected>
 						<span class="flex flex-row gap-2 align-middle font-semibold">
@@ -638,8 +642,11 @@ watch(totalPages, (pages) => {
 					</template>
 				</Combobox>
 
-				<FloatingPanel button-class="!h-10 !shadow-none !text-contrast">
-					<BlendIcon class="size-5" /> Advanced filters
+				<TeleportPopoutMenu label="Advanced filters" size="lg">
+					<template #trigger>
+						<BlendIcon aria-hidden="true" />
+						Advanced filters
+					</template>
 					<template #panel>
 						<div class="flex min-w-64 flex-col gap-3">
 							<label class="flex cursor-pointer items-center justify-between gap-2 text-sm">
@@ -684,7 +691,7 @@ watch(totalPages, (pages) => {
 							</div>
 						</div>
 					</template>
-				</FloatingPanel>
+				</TeleportPopoutMenu>
 			</div>
 		</div>
 
diff --git a/apps/frontend/src/pages/news/article/[slug].vue b/apps/frontend/src/pages/news/article/[slug].vue
index e4131c8d51..e1aaafde2e 100644
--- a/apps/frontend/src/pages/news/article/[slug].vue
+++ b/apps/frontend/src/pages/news/article/[slug].vue
@@ -4,7 +4,7 @@ import { articles as rawArticles } from '@modrinth/blog'
 import {
 	ArticleBody,
 	Avatar,
-	ButtonStyled,
+	ButtonLink,
 	injectModrinthClient,
 	useFormatDateTime,
 } from '@modrinth/ui'
@@ -123,16 +123,23 @@ onMounted(() => {
 			</nuxt-link>
 			<div class="flex gap-2">
 				<NewsletterButton />
-				<ButtonStyled circular>
-					<a v-tooltip="`RSS feed`" aria-label="RSS feed" href="/news/feed/rss.xml" target="_blank">
-						<RssIcon />
-					</a>
-				</ButtonStyled>
-				<ButtonStyled circular>
-					<a v-tooltip="`Changelog`" href="/news/changelog" aria-label="Changelog">
-						<GitGraphIcon />
-					</a>
-				</ButtonStyled>
+				<ButtonLink
+					v-tooltip="`RSS feed`"
+					aria-label="RSS feed"
+					href="/news/feed/rss.xml"
+					target="_blank"
+					class="!w-9 !rounded-full !px-0"
+				>
+					<RssIcon />
+				</ButtonLink>
+				<ButtonLink
+					v-tooltip="`Changelog`"
+					href="/news/changelog"
+					aria-label="Changelog"
+					class="!w-9 !rounded-full !px-0"
+				>
+					<GitGraphIcon />
+				</ButtonLink>
 			</div>
 		</div>
 		<article class="mt-6 flex flex-col gap-4 px-6">
diff --git a/apps/frontend/src/pages/news/index.vue b/apps/frontend/src/pages/news/index.vue
index b15e1ee82c..0398072638 100644
--- a/apps/frontend/src/pages/news/index.vue
+++ b/apps/frontend/src/pages/news/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ChevronRightIcon, GitGraphIcon, RssIcon } from '@modrinth/assets'
 import { articles as rawArticles } from '@modrinth/blog'
-import { ButtonStyled, NewsArticleCard, useFormatDateTime } from '@modrinth/ui'
+import { ButtonLink, NewsArticleCard, useFormatDateTime } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import NewsletterButton from '~/components/ui/NewsletterButton.vue'
@@ -48,16 +48,23 @@ useSeoMeta({
 			</div>
 			<div class="flex gap-2">
 				<NewsletterButton />
-				<ButtonStyled circular>
-					<a v-tooltip="`RSS feed`" aria-label="RSS feed" href="/news/feed/rss.xml" target="_blank">
-						<RssIcon />
-					</a>
-				</ButtonStyled>
-				<ButtonStyled circular>
-					<a v-tooltip="`Changelog`" href="/news/changelog" aria-label="Changelog">
-						<GitGraphIcon />
-					</a>
-				</ButtonStyled>
+				<ButtonLink
+					v-tooltip="`RSS feed`"
+					aria-label="RSS feed"
+					href="/news/feed/rss.xml"
+					target="_blank"
+					class="!w-9 !rounded-full !px-0"
+				>
+					<RssIcon />
+				</ButtonLink>
+				<ButtonLink
+					v-tooltip="`Changelog`"
+					href="/news/changelog"
+					aria-label="Changelog"
+					class="!w-9 !rounded-full !px-0"
+				>
+					<GitGraphIcon />
+				</ButtonLink>
 			</div>
 		</div>
 
diff --git a/apps/frontend/src/pages/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index 23193af2fa..740318d10a 100644
--- a/apps/frontend/src/pages/organization/[organization].vue
+++ b/apps/frontend/src/pages/organization/[organization].vue
@@ -112,18 +112,14 @@
 					<h2>Invitation to join {{ organization.name }}</h2>
 					<p>You have been invited to join {{ organization.name }}.</p>
 					<div class="input-group">
-						<ButtonStyled color="brand">
-							<button @click="onAcceptInvite">
-								<CheckIcon />
-								Accept
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="red">
-							<button @click="onDeclineInvite">
-								<XIcon />
-								Decline
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" @click="onAcceptInvite">
+							<CheckIcon />
+							Accept
+						</Button>
+						<Button type="colored" color="red" @click="onDeclineInvite">
+							<XIcon />
+							Decline
+						</Button>
 					</div>
 				</div>
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
@@ -229,7 +225,7 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/index.vue b/apps/frontend/src/pages/organization/[organization]/settings/index.vue
index a4169823e6..1d56108c92 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/index.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/index.vue
@@ -2,9 +2,9 @@
 import { TrashIcon, UploadIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	ConfirmModal,
-	FileInput,
+	FileButton,
 	injectNotificationManager,
 	StyledInput,
 	UnsavedChangesPopup,
@@ -162,26 +162,25 @@ const onDeleteOrganization = useClientTry(async () => {
 					class="project__icon"
 				/>
 				<div class="flex flex-col gap-2">
-					<ButtonStyled>
-						<FileInput
-							id="project-icon"
-							:max-size="262144"
-							:show-icon="true"
-							accept="image/png,image/jpeg,image/gif,image/webp"
-							class="button-like"
-							prompt="Upload icon"
-							:disabled="!hasPermission"
-							@change="showPreviewImage"
-						>
-							<UploadIcon />
-						</FileInput>
-					</ButtonStyled>
-					<ButtonStyled v-if="!deletedIcon && (previewImage || organization.icon_url)">
-						<button :disabled="!hasPermission" @click="markIconForDeletion">
-							<TrashIcon />
-							Remove icon
-						</button>
-					</ButtonStyled>
+					<FileButton
+						id="project-icon"
+						:max-size="262144"
+						accept="image/png,image/jpeg,image/gif,image/webp"
+						class="button-like"
+						prompt="Upload icon"
+						:disabled="!hasPermission"
+						@change="showPreviewImage"
+					>
+						<UploadIcon />
+					</FileButton>
+					<Button
+						v-if="!deletedIcon && (previewImage || organization.icon_url)"
+						:disabled="!hasPermission"
+						@click="markIconForDeletion"
+					>
+						<TrashIcon />
+						Remove icon
+					</Button>
 				</div>
 			</div>
 
@@ -231,12 +230,10 @@ const onDeleteOrganization = useClientTry(async () => {
 				Deleting your organization will transfer all of its projects to the organization owner. This
 				action cannot be undone.
 			</p>
-			<ButtonStyled color="red">
-				<button @click="() => $refs.modal_deletion.show()">
-					<TrashIcon />
-					Delete organization
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="red" @click="() => $refs.modal_deletion.show()">
+				<TrashIcon />
+				Delete organization
+			</Button>
 		</div>
 		<UnsavedChangesPopup
 			:original="originalState"
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/members.vue b/apps/frontend/src/pages/organization/[organization]/settings/members.vue
index 59efe57a53..47f4b45fc8 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/members.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/members.vue
@@ -43,20 +43,20 @@
 					@keypress.enter="() => onInviteTeamMember(organization.team, currentUsername)"
 				/>
 				<label for="username" class="hidden">Username</label>
-				<ButtonStyled color="brand">
-					<button
-						:disabled="
-							!isPermission(
-								currentMember.organization_permissions,
-								organizationPermissions.MANAGE_INVITES,
-							)
-						"
-						@click="() => onInviteTeamMember(organization.team_id, currentUsername)"
-					>
-						<UserPlusIcon />
-						Invite
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="
+						!isPermission(
+							currentMember.organization_permissions,
+							organizationPermissions.MANAGE_INVITES,
+						)
+					"
+					@click="() => onInviteTeamMember(organization.team_id, currentUsername)"
+				>
+					<UserPlusIcon />
+					Invite
+				</Button>
 			</div>
 			<div class="adjacent-input">
 				<span class="label">
@@ -65,15 +65,15 @@
 						Remove yourself as a member of this organization.
 					</span>
 				</span>
-				<ButtonStyled color="red">
-					<button
-						:disabled="currentMember.is_owner"
-						@click="() => onLeaveProject(organization.team_id, auth.user.id)"
-					>
-						<UserRemoveIcon />
-						Leave organization
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="red"
+					:disabled="currentMember.is_owner"
+					@click="() => onLeaveProject(organization.team_id, auth.user.id)"
+				>
+					<UserRemoveIcon />
+					Leave organization
+				</Button>
 			</div>
 		</div>
 		<div
@@ -96,18 +96,18 @@
 				<div class="side-buttons">
 					<Badge v-if="member.accepted" type="accepted" />
 					<Badge v-else type="pending" />
-					<ButtonStyled circular type="transparent">
-						<button
-							class="dropdown-icon"
-							@click="
-								openTeamMembers.indexOf(member.user.id) === -1
-									? openTeamMembers.push(member.user.id)
-									: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
-							"
-						>
-							<DropdownIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						type="quiet"
+						label="Toggle details"
+						class="dropdown-icon"
+						@click="
+							openTeamMembers.indexOf(member.user.id) === -1
+								? openTeamMembers.push(member.user.id)
+								: (openTeamMembers = openTeamMembers.filter((it) => it !== member.user.id))
+						"
+					>
+						<DropdownIcon />
+					</IconButton>
 				</div>
 			</div>
 			<div class="content">
@@ -190,44 +190,46 @@
 					</div>
 				</template>
 				<div class="input-group">
-					<ButtonStyled color="brand">
-						<button
-							:disabled="
-								!isPermission(
-									currentMember.organization_permissions,
-									organizationPermissions.EDIT_MEMBER,
-								)
-							"
-							@click="onUpdateTeamMember(organization.team_id, member)"
-						>
-							<SaveIcon />
-							Save changes
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="!member.is_owner" color="red">
-						<button
-							:disabled="
-								!isPermission(
-									currentMember.organization_permissions,
-									organizationPermissions.EDIT_MEMBER,
-								) &&
-								!isPermission(
-									currentMember.organization_permissions,
-									organizationPermissions.REMOVE_MEMBER,
-								)
-							"
-							@click="onRemoveMember(organization.team_id, member)"
-						>
-							<UserRemoveIcon />
-							Remove member
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="!member.is_owner && currentMember.is_owner && member.accepted">
-						<button @click="(e) => openTransferModal(member, e)">
-							<TransferIcon />
-							Transfer ownership
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="
+							!isPermission(
+								currentMember.organization_permissions,
+								organizationPermissions.EDIT_MEMBER,
+							)
+						"
+						@click="onUpdateTeamMember(organization.team_id, member)"
+					>
+						<SaveIcon />
+						Save changes
+					</Button>
+					<Button
+						v-if="!member.is_owner"
+						type="colored"
+						color="red"
+						:disabled="
+							!isPermission(
+								currentMember.organization_permissions,
+								organizationPermissions.EDIT_MEMBER,
+							) &&
+							!isPermission(
+								currentMember.organization_permissions,
+								organizationPermissions.REMOVE_MEMBER,
+							)
+						"
+						@click="onRemoveMember(organization.team_id, member)"
+					>
+						<UserRemoveIcon />
+						Remove member
+					</Button>
+					<Button
+						v-if="!member.is_owner && currentMember.is_owner && member.accepted"
+						@click="(e) => openTransferModal(member, e)"
+					>
+						<TransferIcon />
+						Transfer ownership
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -246,8 +248,9 @@ import {
 import {
 	Avatar,
 	Badge,
-	ButtonStyled,
+	Button,
 	Checkbox,
+	IconButton,
 	injectNotificationManager,
 	StyledInput,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/projects.vue b/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
index d625181b13..58c6d58e66 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
@@ -17,17 +17,15 @@
 							:placeholder="getLinkInputPlaceholder(editLinks.issues.clear)"
 							:maxlength="2048"
 						/>
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.clearLinkLabel)"
-								class="label-button"
-								:aria-label="formatMessage(messages.clearLinkLabel)"
-								:data-active="editLinks.issues.clear"
-								@click="editLinks.issues.clear = !editLinks.issues.clear"
-							>
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.clearLinkLabel)"
+							:label="formatMessage(messages.clearLinkLabel)"
+							class="label-button"
+							:data-active="editLinks.issues.clear"
+							@click="editLinks.issues.clear = !editLinks.issues.clear"
+						>
+							<TrashIcon />
+						</IconButton>
 					</div>
 					<label for="source-code-input" :title="formatMessage(messages.sourceCodeDescription)">
 						<span class="label__title">{{ formatMessage(messages.sourceCodeLabel) }}</span>
@@ -42,17 +40,15 @@
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.source.clear)"
 						/>
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.clearLinkLabel)"
-								class="label-button"
-								:aria-label="formatMessage(messages.clearLinkLabel)"
-								:data-active="editLinks.source.clear"
-								@click="editLinks.source.clear = !editLinks.source.clear"
-							>
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.clearLinkLabel)"
+							:label="formatMessage(messages.clearLinkLabel)"
+							class="label-button"
+							:data-active="editLinks.source.clear"
+							@click="editLinks.source.clear = !editLinks.source.clear"
+						>
+							<TrashIcon />
+						</IconButton>
 					</div>
 					<label for="wiki-page-input" :title="formatMessage(messages.wikiPageDescription)">
 						<span class="label__title">{{ formatMessage(messages.wikiPageLabel) }}</span>
@@ -67,17 +63,15 @@
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.wiki.clear)"
 						/>
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.clearLinkLabel)"
-								class="label-button"
-								:aria-label="formatMessage(messages.clearLinkLabel)"
-								:data-active="editLinks.wiki.clear"
-								@click="editLinks.wiki.clear = !editLinks.wiki.clear"
-							>
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.clearLinkLabel)"
+							:label="formatMessage(messages.clearLinkLabel)"
+							class="label-button"
+							:data-active="editLinks.wiki.clear"
+							@click="editLinks.wiki.clear = !editLinks.wiki.clear"
+						>
+							<TrashIcon />
+						</IconButton>
 					</div>
 					<label
 						for="discord-invite-input"
@@ -95,17 +89,15 @@
 							:maxlength="2048"
 							:placeholder="getLinkInputPlaceholder(editLinks.discord.clear, true)"
 						/>
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.clearLinkLabel)"
-								class="label-button"
-								:aria-label="formatMessage(messages.clearLinkLabel)"
-								:data-active="editLinks.discord.clear"
-								@click="editLinks.discord.clear = !editLinks.discord.clear"
-							>
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.clearLinkLabel)"
+							:label="formatMessage(messages.clearLinkLabel)"
+							class="label-button"
+							:data-active="editLinks.discord.clear"
+							@click="editLinks.discord.clear = !editLinks.discord.clear"
+						>
+							<TrashIcon />
+						</IconButton>
 					</div>
 				</section>
 				<p>
@@ -141,18 +133,14 @@
 					:description="formatMessage(messages.showAllProjects)"
 				/>
 				<div class="input-group ml-auto mt-4">
-					<ButtonStyled type="outlined">
-						<button @click="$refs.editLinksModal.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button @click="bulkEditLinks()">
-							<SaveIcon />
-							{{ formatMessage(commonMessages.saveChangesButton) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="$refs.editLinksModal.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button type="colored" color="brand" @click="bulkEditLinks()">
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveChangesButton) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -177,12 +165,10 @@
 								:projects="usersOwnedProjects || []"
 								@submit="onProjectTransferSubmit"
 							/>
-							<ButtonStyled color="brand">
-								<button @click="$refs.modal_creation.show($event)">
-									<PlusIcon />
-									{{ formatMessage(commonMessages.createAProjectButton) }}
-								</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" @click="$refs.modal_creation.show($event)">
+								<PlusIcon />
+								{{ formatMessage(commonMessages.createAProjectButton) }}
+							</Button>
 						</div>
 					</div>
 				</template>
@@ -255,22 +241,23 @@
 				</template>
 				<template #cell-actions="{ row: project }">
 					<div class="flex !flex-row items-center !justify-end gap-2">
-						<ButtonStyled v-if="hasEnvironmentMigrationWarning(project)" circular color="orange">
-							<nuxt-link
-								v-tooltip="formatMessage(messages.reviewEnvironmentMetadata)"
-								:to="`${getProjectUrl(project)}?showEnvironmentMigrationWarning=true`"
-							>
-								<TriangleAlertIcon />
-							</nuxt-link>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<nuxt-link
-								v-tooltip="formatMessage(commonMessages.settingsLabel)"
-								:to="`${getProjectUrl(project)}/settings`"
-							>
-								<SettingsIcon />
-							</nuxt-link>
-						</ButtonStyled>
+						<ButtonLink
+							v-if="hasEnvironmentMigrationWarning(project)"
+							v-tooltip="formatMessage(messages.reviewEnvironmentMetadata)"
+							type="colored"
+							color="orange"
+							:to="`${getProjectUrl(project)}?showEnvironmentMigrationWarning=true`"
+							class="!w-9 !rounded-full !px-0"
+						>
+							<TriangleAlertIcon />
+						</ButtonLink>
+						<ButtonLink
+							v-tooltip="formatMessage(commonMessages.settingsLabel)"
+							:to="`${getProjectUrl(project)}/settings`"
+							class="!w-9 !rounded-full !px-0"
+						>
+							<SettingsIcon />
+						</ButtonLink>
 					</div>
 				</template>
 			</Table>
@@ -320,25 +307,27 @@
 					{{ formatMessage(messages.selectedProjectsCount, { count: selectedProjects.length }) }}
 				</span>
 				<div class="mx-0.5 h-6 w-px bg-surface-5" />
-				<ButtonStyled type="transparent">
-					<button
-						v-tooltip="formatMessage(commonMessages.clearButton)"
-						class="!text-primary"
-						@click="clearProjectSelection()"
-					>
-						<XIcon class="cq-show-icon hidden" />
-						<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="formatMessage(commonMessages.clearButton)"
+					type="quiet"
+					class="!text-primary"
+					@click="clearProjectSelection()"
+				>
+					<XIcon class="cq-show-icon hidden" />
+					<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
+				</Button>
 			</div>
 
 			<div class="ml-auto flex items-center gap-0.5">
-				<ButtonStyled color="brand">
-					<button v-tooltip="formatMessage(messages.editLinksButton)" @click="showEditLinksModal()">
-						<EditIcon />
-						<span class="bar-label">{{ formatMessage(messages.editLinksButton) }}</span>
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="formatMessage(messages.editLinksButton)"
+					type="colored"
+					color="brand"
+					@click="showEditLinksModal()"
+				>
+					<EditIcon />
+					<span class="bar-label">{{ formatMessage(messages.editLinksButton) }}</span>
+				</Button>
 			</div>
 		</FloatingActionBar>
 	</div>
@@ -357,12 +346,14 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	Checkbox,
 	commonMessages,
 	CopyCode,
 	defineMessages,
 	FloatingActionBar,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
diff --git a/apps/frontend/src/pages/plus.vue b/apps/frontend/src/pages/plus.vue
index 7367b88647..8caab3edf8 100644
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -38,20 +38,33 @@
 				{{ calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly) }}% with
 				annual billing!
 			</p>
-			<ButtonStyled v-if="auth.user && hasActiveMidas(auth.user)" color="purple" size="large">
-				<nuxt-link to="/settings/billing">
-					<SettingsIcon aria-hidden="true" />
-					Manage subscription
-				</nuxt-link>
-			</ButtonStyled>
-			<ButtonStyled v-else-if="auth.user" color="purple" size="large">
-				<button @click="purchaseModal.show()">Subscribe</button>
-			</ButtonStyled>
-			<ButtonStyled v-else color="purple" size="large">
-				<nuxt-link :to="`/auth/sign-in?redirect=${encodeURIComponent('/plus?showModal=true')}`">
-					Subscribe
-				</nuxt-link>
-			</ButtonStyled>
+			<ButtonLink
+				v-if="auth.user && hasActiveMidas(auth.user)"
+				type="colored"
+				color="purple"
+				size="xl"
+				to="/settings/billing"
+			>
+				<SettingsIcon aria-hidden="true" />
+				Manage subscription
+			</ButtonLink>
+			<Button
+				v-else-if="auth.user"
+				type="colored"
+				color="purple"
+				size="xl"
+				@click="purchaseModal.show()"
+				>Subscribe</Button
+			>
+			<ButtonLink
+				v-else
+				type="colored"
+				color="purple"
+				size="xl"
+				:to="`/auth/sign-in?redirect=${encodeURIComponent('/plus?showModal=true')}`"
+			>
+				Subscribe
+			</ButtonLink>
 		</div>
 	</div>
 	<div class="perks-hero">
@@ -83,7 +96,8 @@
 <script setup>
 import { HeartIcon, ModrinthPlusIcon, SettingsIcon, SparklesIcon, StarIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	injectNotificationManager,
 	PurchaseModal,
 	useFormatPrice,
diff --git a/apps/frontend/src/pages/report.vue b/apps/frontend/src/pages/report.vue
index 4457940c76..d43a69ef14 100644
--- a/apps/frontend/src/pages/report.vue
+++ b/apps/frontend/src/pages/report.vue
@@ -23,21 +23,17 @@
 					})
 				}}
 				<div class="flex gap-2">
-					<ButtonStyled v-if="itemLink">
-						<nuxt-link :to="itemLink">
-							<LeftArrowIcon />
-							{{
-								formatMessage(messages.backToItem, {
-									item: formatReportItemType(formatMessage, reportItem),
-								})
-							}}
-						</nuxt-link>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<nuxt-link :to="`/dashboard/report/${existingReport.id}`">
-							{{ formatMessage(messages.goToReport) }} <RightArrowIcon />
-						</nuxt-link>
-					</ButtonStyled>
+					<ButtonLink v-if="itemLink" :to="itemLink">
+						<LeftArrowIcon />
+						{{
+							formatMessage(messages.backToItem, {
+								item: formatReportItemType(formatMessage, reportItem),
+							})
+						}}
+					</ButtonLink>
+					<ButtonLink type="colored" color="brand" :to="`/dashboard/report/${existingReport.id}`">
+						{{ formatMessage(messages.goToReport) }} <RightArrowIcon />
+					</ButtonLink>
 				</div>
 			</div>
 			<template v-else>
@@ -196,11 +192,14 @@
 								item: formatReportItemType(formatMessage, reportItem),
 							})
 						}}
-						<ButtonStyled color="brand">
-							<nuxt-link :to="`/dashboard/report/${existingReport.id}`" class="w-fit">
-								{{ formatMessage(messages.goToReport) }} <RightArrowIcon />
-							</nuxt-link>
-						</ButtonStyled>
+						<ButtonLink
+							type="colored"
+							color="brand"
+							:to="`/dashboard/report/${existingReport.id}`"
+							class="w-fit"
+						>
+							{{ formatMessage(messages.goToReport) }} <RightArrowIcon />
+						</ButtonLink>
 					</template>
 					<template v-else>
 						<div class="flex flex-col gap-2" :class="{ hidden: !reportItemID }">
@@ -252,16 +251,16 @@
 							/>
 						</div>
 						<div :class="{ hidden: !reportType }">
-							<ButtonStyled color="brand">
-								<button
-									id="submit-button"
-									:disabled="submitLoading || !canSubmit"
-									@click="submitReport"
-								>
-									<SendIcon aria-hidden="true" />
-									{{ formatMessage(messages.submitReport) }}
-								</button>
-							</ButtonStyled>
+							<Button
+								id="submit-button"
+								type="colored"
+								color="brand"
+								:disabled="submitLoading || !canSubmit"
+								@click="submitReport"
+							>
+								<SendIcon aria-hidden="true" />
+								{{ formatMessage(messages.submitReport) }}
+							</Button>
 						</div>
 					</template>
 				</div>
@@ -284,10 +283,10 @@ import {
 	VersionIcon,
 	XCircleIcon,
 } from '@modrinth/assets'
+import { Button, ButtonLink } from '@modrinth/ui'
 import {
 	AutoLink,
 	Avatar,
-	ButtonStyled,
 	commonMessages,
 	defineMessage,
 	defineMessages,
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index ce57a33618..33942d51e5 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -34,18 +34,14 @@
 					/>
 				</div>
 				<div class="flex justify-end gap-2.5">
-					<ButtonStyled>
-						<button @click="$refs.changeEmailModal.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="!email" @click="saveEmail()">
-							<SaveIcon />
-							{{ formatMessage(messages.saveEmailButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="$refs.changeEmailModal.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button type="colored" color="brand" :disabled="!email" @click="saveEmail()">
+						<SaveIcon />
+						{{ formatMessage(messages.saveEmailButton) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -129,43 +125,39 @@
 					</div>
 				</template>
 				<div class="flex justify-end gap-2.5">
-					<ButtonStyled>
-						<button @click="$refs.managePasswordModal.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="$refs.managePasswordModal.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
 					<template v-if="removePasswordMode">
-						<ButtonStyled color="red">
-							<button :disabled="!oldPassword" @click="savePassword">
-								<TrashIcon />
-								{{ formatMessage(messages.removePasswordButton) }}
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="red" :disabled="!oldPassword" @click="savePassword">
+							<TrashIcon />
+							{{ formatMessage(messages.removePasswordButton) }}
+						</Button>
 					</template>
 					<template v-else>
-						<ButtonStyled
+						<Button
 							v-if="auth.user.has_password && auth.user.auth_providers.length > 0"
+							type="colored"
 							color="red"
+							@click="removePasswordMode = true"
 						>
-							<button @click="removePasswordMode = true">
-								<TrashIcon />
-								{{ formatMessage(messages.removePasswordButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button
-								:disabled="
-									newPassword.length == 0 ||
-									(auth.user.has_password && oldPassword.length == 0) ||
-									newPassword !== confirmNewPassword
-								"
-								@click="savePassword"
-							>
-								<SaveIcon />
-								{{ formatMessage(messages.savePasswordButton) }}
-							</button>
-						</ButtonStyled>
+							<TrashIcon />
+							{{ formatMessage(messages.removePasswordButton) }}
+						</Button>
+						<Button
+							type="colored"
+							color="brand"
+							:disabled="
+								newPassword.length == 0 ||
+								(auth.user.has_password && oldPassword.length == 0) ||
+								newPassword !== confirmNewPassword
+							"
+							@click="savePassword"
+						>
+							<SaveIcon />
+							{{ formatMessage(messages.savePasswordButton) }}
+						</Button>
 					</template>
 				</div>
 			</div>
@@ -202,18 +194,14 @@
 						{{ formatMessage(messages.twoFactorIncorrectError) }}
 					</p>
 					<div class="flex justify-end gap-2.5">
-						<ButtonStyled>
-							<button @click="$refs.manageTwoFactorModal.hide()">
-								<XIcon />
-								{{ formatMessage(commonMessages.cancelButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="red">
-							<button @click="removeTwoFactor">
-								<TrashIcon />
-								{{ formatMessage(messages.twoFactorRemoveButton) }}
-							</button>
-						</ButtonStyled>
+						<Button @click="$refs.manageTwoFactorModal.hide()">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</Button>
+						<Button type="colored" color="red" @click="removeTwoFactor">
+							<TrashIcon />
+							{{ formatMessage(messages.twoFactorRemoveButton) }}
+						</Button>
 					</div>
 				</template>
 				<template v-else>
@@ -280,30 +268,32 @@
 						</ul>
 					</template>
 					<div class="flex justify-end gap-2.5">
-						<ButtonStyled v-if="twoFactorStep === 1">
-							<button @click="twoFactorStep = 0">
-								<LeftArrowIcon />
-								{{ formatMessage(commonMessages.backButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="twoFactorStep !== 2">
-							<button @click="$refs.manageTwoFactorModal.hide()">
-								<XIcon />
-								{{ formatMessage(commonMessages.cancelButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="twoFactorStep <= 1" color="brand">
-							<button @click="twoFactorStep === 1 ? verifyTwoFactorCode() : (twoFactorStep = 1)">
-								<RightArrowIcon />
-								{{ formatMessage(commonMessages.continueButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="twoFactorStep === 2" color="brand">
-							<button @click="$refs.manageTwoFactorModal.hide()">
-								<CheckIcon />
-								{{ formatMessage(messages.completeSetupButton) }}
-							</button>
-						</ButtonStyled>
+						<Button v-if="twoFactorStep === 1" @click="twoFactorStep = 0">
+							<LeftArrowIcon />
+							{{ formatMessage(commonMessages.backButton) }}
+						</Button>
+						<Button v-if="twoFactorStep !== 2" @click="$refs.manageTwoFactorModal.hide()">
+							<XIcon />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</Button>
+						<Button
+							v-if="twoFactorStep <= 1"
+							type="colored"
+							color="brand"
+							@click="twoFactorStep === 1 ? verifyTwoFactorCode() : (twoFactorStep = 1)"
+						>
+							<RightArrowIcon />
+							{{ formatMessage(commonMessages.continueButton) }}
+						</Button>
+						<Button
+							v-if="twoFactorStep === 2"
+							type="colored"
+							color="brand"
+							@click="$refs.manageTwoFactorModal.hide()"
+						>
+							<CheckIcon />
+							{{ formatMessage(messages.completeSetupButton) }}
+						</Button>
 					</div>
 				</template>
 			</div>
@@ -322,25 +312,26 @@
 						</span>
 					</template>
 					<template #cell-actions="{ row }">
-						<ButtonStyled v-if="auth.user.auth_providers.includes(row.id)">
-							<button class="!w-full" @click="handleRemoveAuthProvider(row.id)">
-								<TrashIcon /> {{ formatMessage(commonMessages.removeButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-else>
-							<a :href="`${getAuthUrl(row.id, '/settings/account')}&token=${auth.token}`">
-								<ExternalIcon /> {{ formatMessage(messages.providerAddButton) }}
-							</a>
-						</ButtonStyled>
+						<Button
+							v-if="auth.user.auth_providers.includes(row.id)"
+							class="!w-full"
+							@click="handleRemoveAuthProvider(row.id)"
+						>
+							<TrashIcon /> {{ formatMessage(commonMessages.removeButton) }}
+						</Button>
+						<ButtonLink
+							v-else
+							:href="`${getAuthUrl(row.id, '/settings/account')}&token=${auth.token}`"
+						>
+							<ExternalIcon /> {{ formatMessage(messages.providerAddButton) }}
+						</ButtonLink>
 					</template>
 				</Table>
 				<div class="self-end">
-					<ButtonStyled>
-						<button @click="$refs.manageProvidersModal.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.closeButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="$refs.manageProvidersModal.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.closeButton) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -355,18 +346,16 @@
 					}}</span>
 				</label>
 				<div>
-					<ButtonStyled>
-						<button @click="$refs.changeEmailModal.show()">
-							<template v-if="auth.user.email">
-								<EditIcon />
-								{{ formatMessage(messages.changeEmailButton) }}
-							</template>
-							<template v-else>
-								<PlusIcon />
-								{{ formatMessage(messages.addEmailButton) }}
-							</template>
-						</button>
-					</ButtonStyled>
+					<Button @click="$refs.changeEmailModal.show()">
+						<template v-if="auth.user.email">
+							<EditIcon />
+							{{ formatMessage(messages.changeEmailButton) }}
+						</template>
+						<template v-else>
+							<PlusIcon />
+							{{ formatMessage(messages.addEmailButton) }}
+						</template>
+					</Button>
 				</div>
 			</div>
 			<div class="adjacent-input">
@@ -384,25 +373,23 @@
 					</span>
 				</label>
 				<div>
-					<ButtonStyled>
-						<button
-							@click="
-								() => {
-									oldPassword = ''
-									newPassword = ''
-									confirmNewPassword = ''
-									removePasswordMode = false
-									$refs.managePasswordModal.show()
-								}
-							"
-						>
-							<KeyIcon />
-							<template v-if="auth.user.has_password">{{
-								formatMessage(messages.changePasswordButton)
-							}}</template>
-							<template v-else> {{ formatMessage(messages.addPasswordButton) }} </template>
-						</button>
-					</ButtonStyled>
+					<Button
+						@click="
+							() => {
+								oldPassword = ''
+								newPassword = ''
+								confirmNewPassword = ''
+								removePasswordMode = false
+								$refs.managePasswordModal.show()
+							}
+						"
+					>
+						<KeyIcon />
+						<template v-if="auth.user.has_password">{{
+							formatMessage(messages.changePasswordButton)
+						}}</template>
+						<template v-else> {{ formatMessage(messages.addPasswordButton) }} </template>
+					</Button>
 				</div>
 			</div>
 			<div class="adjacent-input">
@@ -413,16 +400,14 @@
 					}}</span>
 				</label>
 				<div>
-					<ButtonStyled>
-						<button @click="showTwoFactorModal">
-							<template v-if="auth.user.has_totp">
-								<TrashIcon /> {{ formatMessage(messages.twoFactorRemoveButton) }}
-							</template>
-							<template v-else>
-								<PlusIcon /> {{ formatMessage(messages.twoFactorSetupButton) }}
-							</template>
-						</button>
-					</ButtonStyled>
+					<Button @click="showTwoFactorModal">
+						<template v-if="auth.user.has_totp">
+							<TrashIcon /> {{ formatMessage(messages.twoFactorRemoveButton) }}
+						</template>
+						<template v-else>
+							<PlusIcon /> {{ formatMessage(messages.twoFactorSetupButton) }}
+						</template>
+					</Button>
 				</div>
 			</div>
 			<div class="adjacent-input">
@@ -433,11 +418,9 @@
 					}}</span>
 				</label>
 				<div>
-					<ButtonStyled>
-						<button @click="$refs.manageProvidersModal.show()">
-							<SettingsIcon /> {{ formatMessage(messages.manageProvidersButton) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="$refs.manageProvidersModal.show()">
+						<SettingsIcon /> {{ formatMessage(messages.manageProvidersButton) }}
+					</Button>
 				</div>
 			</div>
 			<PasskeySettings />
@@ -446,33 +429,27 @@
 		<section id="data-export" class="universal-card">
 			<h2>{{ formatMessage(messages.dataExportTitle) }}</h2>
 			<p>{{ formatMessage(messages.dataExportDescription) }}</p>
-			<ButtonStyled v-if="generated">
-				<a :href="generated" download="export.json">
-					<DownloadIcon />
-					{{ formatMessage(messages.downloadExportButton) }}
-				</a>
-			</ButtonStyled>
-			<ButtonStyled v-else>
-				<button :disabled="generatingExport" @click="exportData">
-					<template v-if="generatingExport">
-						<UpdatedIcon /> {{ formatMessage(messages.generatingExportButton) }}
-					</template>
-					<template v-else>
-						<UpdatedIcon /> {{ formatMessage(messages.generateExportButton) }}
-					</template>
-				</button>
-			</ButtonStyled>
+			<ButtonLink v-if="generated" :href="generated" download="export.json">
+				<DownloadIcon />
+				{{ formatMessage(messages.downloadExportButton) }}
+			</ButtonLink>
+			<Button v-else :disabled="generatingExport" @click="exportData">
+				<template v-if="generatingExport">
+					<UpdatedIcon /> {{ formatMessage(messages.generatingExportButton) }}
+				</template>
+				<template v-else>
+					<UpdatedIcon /> {{ formatMessage(messages.generateExportButton) }}
+				</template>
+			</Button>
 		</section>
 
 		<section id="delete-account" class="universal-card">
 			<h2>{{ formatMessage(messages.deleteAccountSectionTitle) }}</h2>
 			<p>{{ formatMessage(messages.deleteAccountSectionDescription) }}</p>
-			<ButtonStyled color="red">
-				<button type="button" @click="$refs.modal_confirm.show()">
-					<TrashIcon />
-					{{ formatMessage(messages.deleteAccountButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="red" native-type="button" @click="$refs.modal_confirm.show()">
+				<TrashIcon />
+				{{ formatMessage(messages.deleteAccountButton) }}
+			</Button>
 		</section>
 	</div>
 </template>
@@ -494,7 +471,8 @@ import {
 } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	ConfirmModal,
 	defineMessages,
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index cf85773eb8..cf5e7e7fc7 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -28,17 +28,15 @@
 				</label>
 				<div v-if="editingId" class="icon-submission">
 					<Avatar size="md" :src="icon" />
-					<ButtonStyled>
-						<FileInput
-							:max-size="262144"
-							class="button-like"
-							:prompt="formatMessage(messages.uploadIcon)"
-							accept="image/png,image/jpeg,image/gif,image/webp"
-							@change="onImageSelection"
-						>
-							<UploadIcon />
-						</FileInput>
-					</ButtonStyled>
+					<FileButton
+						:max-size="262144"
+						class="button-like"
+						:prompt="formatMessage(messages.uploadIcon)"
+						accept="image/png,image/jpeg,image/gif,image/webp"
+						@change="onImageSelection"
+					>
+						<UploadIcon />
+					</FileButton>
 				</div>
 				<label v-if="editingId" for="app-url" class="mb-2 mt-4 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.urlLabel) }}
@@ -102,48 +100,51 @@
 								autocomplete="off"
 								:placeholder="formatMessage(messages.redirectUriPlaceholder)"
 							/>
-							<ButtonStyled v-if="index !== 0" circular>
-								<button @click="() => redirectUris.splice(index, 1)">
-									<TrashIcon />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="index === 0" color="brand">
-								<button @click="() => redirectUris.push('')">
-									<PlusIcon /> {{ formatMessage(messages.addMore) }}
-								</button>
-							</ButtonStyled>
+							<IconButton
+								v-if="index !== 0"
+								label="Delete"
+								@click="() => redirectUris.splice(index, 1)"
+							>
+								<TrashIcon />
+							</IconButton>
+							<Button
+								v-if="index === 0"
+								type="colored"
+								color="brand"
+								@click="() => redirectUris.push('')"
+							>
+								<PlusIcon /> {{ formatMessage(messages.addMore) }}
+							</Button>
 						</div>
 					</div>
 					<div v-if="redirectUris.length <= 0">
-						<ButtonStyled color="brand">
-							<button @click="() => redirectUris.push('')">
-								<PlusIcon /> {{ formatMessage(messages.addRedirectUri) }}
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" @click="() => redirectUris.push('')">
+							<PlusIcon /> {{ formatMessage(messages.addRedirectUri) }}
+						</Button>
 					</div>
 				</div>
 			</div>
 
 			<template #actions>
 				<div class="flex justify-end gap-2 p-2">
-					<ButtonStyled>
-						<button @click="$refs.appModal.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="editingId" color="brand">
-						<button :disabled="!canSubmit" @click="editApp">
-							<SaveIcon />
-							{{ formatMessage(commonMessages.saveChangesButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else color="brand">
-						<button :disabled="!canSubmit" @click="createApp">
-							<PlusIcon />
-							{{ formatMessage(messages.createApp) }}
-						</button>
-					</ButtonStyled>
+					<Button @click="$refs.appModal.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						v-if="editingId"
+						type="colored"
+						color="brand"
+						:disabled="!canSubmit"
+						@click="editApp"
+					>
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveChangesButton) }}
+					</Button>
+					<Button v-else type="colored" color="brand" :disabled="!canSubmit" @click="createApp">
+						<PlusIcon />
+						{{ formatMessage(messages.createApp) }}
+					</Button>
 				</div>
 			</template>
 		</NewModal>
@@ -152,22 +153,22 @@
 			<div class="header__title">
 				<h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.applications) }}</h2>
 			</div>
-			<ButtonStyled color="brand">
-				<button
-					@click="
-						() => {
-							name = null
-							icon = null
-							scopesVal = 0
-							redirectUris = ['']
-							editingId = null
-							$refs.appModal.show()
-						}
-					"
-				>
-					<PlusIcon /> {{ formatMessage(messages.newApplication) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				type="colored"
+				color="brand"
+				@click="
+					() => {
+						name = null
+						icon = null
+						scopesVal = 0
+						redirectUris = ['']
+						editingId = null
+						$refs.appModal.show()
+					}
+				"
+			>
+				<PlusIcon /> {{ formatMessage(messages.newApplication) }}
+			</Button>
 		</div>
 		<p>
 			<IntlFormatted :message-id="messages.descriptionIntro">
@@ -215,35 +216,33 @@
 				</div>
 			</div>
 			<div class="input-group">
-				<ButtonStyled>
-					<button
-						@click="
-							() => {
-								setForm({
-									...app,
-									redirect_uris: app.redirect_uris.map((u) => u.uri) || [],
-								})
-								$refs.appModal.show()
-							}
-						"
-					>
-						<EditIcon />
-						{{ formatMessage(commonMessages.editButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button
-						@click="
-							() => {
-								editingId = app.id
-								$refs.modal_confirm.show()
-							}
-						"
-					>
-						<TrashIcon />
-						{{ formatMessage(messages.delete) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					@click="
+						() => {
+							setForm({
+								...app,
+								redirect_uris: app.redirect_uris.map((u) => u.uri) || [],
+							})
+							$refs.appModal.show()
+						}
+					"
+				>
+					<EditIcon />
+					{{ formatMessage(commonMessages.editButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="red"
+					@click="
+						() => {
+							editingId = app.id
+							$refs.modal_confirm.show()
+						}
+					"
+				>
+					<TrashIcon />
+					{{ formatMessage(messages.delete) }}
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -252,14 +251,15 @@
 import { EditIcon, PlusIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	Checkbox,
 	commonMessages,
 	commonSettingsMessages,
 	ConfirmModal,
 	CopyCode,
 	defineMessages,
-	FileInput,
+	FileButton,
+	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index e176b22d4e..f59a03f07e 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -165,107 +165,114 @@
 						v-if="midasCharge && midasCharge.status === 'failed'"
 						class="ml-auto flex flex-row-reverse items-center gap-2"
 					>
-						<ButtonStyled v-if="midasCharge && midasCharge.status === 'failed'">
-							<button
-								@click="
-									() => {
-										$refs.midasPurchaseModal.show()
-									}
-								"
-							>
-								<UpdatedIcon />
-								{{ formatMessage(messages.updateMethod) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled type="transparent" circular>
-							<OverflowMenu
-								:dropdown-id="`${baseId}-cancel-midas`"
-								:options="[
-									{
-										id: 'cancel',
-										action: () => {
-											cancelSubscriptionId = midasSubscription.id
-											$refs.modalCancel.show()
-										},
-									},
-								]"
-							>
-								<MoreVerticalIcon />
-								<template #cancel
-									><XIcon /> {{ formatMessage(commonMessages.cancelButton) }}</template
-								>
-							</OverflowMenu>
-						</ButtonStyled>
-					</div>
-					<div
-						v-else-if="midasCharge && midasCharge.status !== 'cancelled'"
-						class="ml-auto flex gap-2"
-					>
-						<ButtonStyled>
-							<button
-								:disabled="changingInterval"
-								@click="
-									() => {
-										cancelSubscriptionId = midasSubscription.id
-										$refs.modalCancel.show()
-									}
-								"
-							>
-								<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled
-							:color="midasCharge.subscription_interval === 'yearly' ? 'standard' : 'purple'"
-							color-fill="text"
-						>
-							<button
-								v-tooltip="
-									midasCharge.subscription_interval === 'yearly'
-										? formatMessage(messages.monthlyBillingAdditionalPerYearTooltip, {
-												amount: formatPrice(
-													oppositePrice * 12 - midasCharge.amount,
-													midasCharge.currency_code,
-												),
-											})
-										: undefined
-								"
-								:disabled="changingInterval"
-								@click="switchMidasInterval(oppositeInterval)"
-							>
-								<SpinnerIcon v-if="changingInterval" class="animate-spin" />
-								<TransferIcon v-else />
-								{{
-									changingInterval
-										? formatMessage(messages.switchingToInterval, {
-												interval: oppositeInterval,
-											})
-										: formatMessage(messages.switchToInterval, {
-												interval: oppositeInterval,
-											})
-								}}
-							</button>
-						</ButtonStyled>
-					</div>
-					<ButtonStyled
-						v-else-if="midasCharge && midasCharge.status === 'cancelled'"
-						color="purple"
-					>
-						<button class="ml-auto" @click="cancelSubscription(midasSubscription.id, false)">
-							{{ formatMessage(messages.resubscribe) }} <RightArrowIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else color="purple" size="large">
-						<button
-							class="ml-auto"
+						<Button
+							v-if="midasCharge && midasCharge.status === 'failed'"
 							@click="
 								() => {
 									$refs.midasPurchaseModal.show()
 								}
 							"
 						>
-							{{ formatMessage(messages.subscribe) }} <RightArrowIcon />
-						</button>
-					</ButtonStyled>
+							<UpdatedIcon />
+							{{ formatMessage(messages.updateMethod) }}
+						</Button>
+						<TeleportOverflowMenu
+							type="quiet"
+							:label="formatMessage(commonMessages.moreOptionsButton)"
+							:options="[
+								{
+									id: 'cancel',
+									label: formatMessage(commonMessages.cancelButton),
+									action: () => {
+										cancelSubscriptionId = midasSubscription.id
+										$refs.modalCancel.show()
+									},
+								},
+							]"
+						>
+							<MoreVerticalIcon />
+							<template #cancel
+								><XIcon /> {{ formatMessage(commonMessages.cancelButton) }}</template
+							>
+						</TeleportOverflowMenu>
+					</div>
+					<div
+						v-else-if="midasCharge && midasCharge.status !== 'cancelled'"
+						class="ml-auto flex gap-2"
+					>
+						<Button
+							:disabled="changingInterval"
+							@click="
+								() => {
+									cancelSubscriptionId = midasSubscription.id
+									$refs.modalCancel.show()
+								}
+							"
+						>
+							<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
+						</Button>
+						<Button
+							v-tooltip="
+								midasCharge.subscription_interval === 'yearly'
+									? formatMessage(messages.monthlyBillingAdditionalPerYearTooltip, {
+											amount: formatPrice(
+												oppositePrice * 12 - midasCharge.amount,
+												midasCharge.currency_code,
+											),
+										})
+									: undefined
+							"
+							type="quiet"
+							:color="midasCharge.subscription_interval === 'yearly' ? undefined : 'purple'"
+							:disabled="changingInterval"
+							:style="{
+								'--legacy-button-color':
+									(midasCharge.subscription_interval === 'yearly' ? 'standard' : 'purple') &&
+									(midasCharge.subscription_interval === 'yearly' ? 'standard' : 'purple') !==
+										'standard'
+										? `var(--color-${midasCharge.subscription_interval === 'yearly' ? 'standard' : 'purple'})`
+										: undefined,
+							}"
+							class="!text-[var(--legacy-button-color,var(--color-base))] [&>svg]:!text-[var(--legacy-button-color,var(--color-primary))]"
+							@click="switchMidasInterval(oppositeInterval)"
+						>
+							<SpinnerIcon v-if="changingInterval" class="animate-spin" />
+							<TransferIcon v-else />
+							{{
+								changingInterval
+									? formatMessage(messages.switchingToInterval, {
+											interval: oppositeInterval,
+										})
+									: formatMessage(messages.switchToInterval, {
+											interval: oppositeInterval,
+										})
+							}}
+						</Button>
+					</div>
+					<Button
+						v-else-if="midasCharge && midasCharge.status === 'cancelled'"
+						type="colored"
+						color="purple"
+						size="xl"
+						class="ml-auto"
+						@click="cancelSubscription(midasSubscription.id, false)"
+					>
+						{{ formatMessage(messages.resubscribe) }} <RightArrowIcon />
+					</Button>
+					<Button
+						v-else
+						type="colored"
+						color="purple"
+						size="xl"
+						class="ml-auto"
+						@click="
+							() => {
+								$refs.midasPurchaseModal.show()
+							}
+						"
+					>
+						{{ formatMessage(messages.subscribe) }} <RightArrowIcon />
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -477,44 +484,44 @@
 										</div>
 									</div>
 									<div class="flex gap-2">
-										<ButtonStyled
+										<Button
 											v-if="
 												getPyroCharge(subscription) &&
 												getPyroCharge(subscription).status !== 'cancelled'
 											"
+											@click="showCancellationSurvey(subscription)"
 										>
-											<button @click="showCancellationSurvey(subscription)">
-												<XIcon />
-												{{ formatMessage(commonMessages.cancelButton) }}
-											</button>
-										</ButtonStyled>
-										<ButtonStyled
+											<XIcon />
+											{{ formatMessage(commonMessages.cancelButton) }}
+										</Button>
+										<Button
 											v-if="
 												getPyroCharge(subscription) &&
 												getPyroCharge(subscription).status !== 'cancelled' &&
 												getPyroCharge(subscription).status !== 'failed'
 											"
+											type="quiet"
 											color="green"
-											color-fill="text"
+											class="!text-green [&>svg]:!text-green"
+											@click="showPyroUpgradeModal(subscription)"
 										>
-											<button @click="showPyroUpgradeModal(subscription)">
-												<ArrowBigUpDashIcon />
-												{{ formatMessage(messages.upgrade) }}
-											</button>
-										</ButtonStyled>
-										<ButtonStyled
+											<ArrowBigUpDashIcon />
+											{{ formatMessage(messages.upgrade) }}
+										</Button>
+										<Button
 											v-else-if="
 												getPyroCharge(subscription) &&
 												(getPyroCharge(subscription).status === 'cancelled' ||
 													getPyroCharge(subscription).status === 'failed')
 											"
+											type="colored"
 											color="green"
+											size="xl"
+											@click="openPyroResubscribeModal(subscription)"
 										>
-											<button @click="openPyroResubscribeModal(subscription)">
-												{{ formatMessage(messages.resubscribe) }}
-												<RightArrowIcon />
-											</button>
-										</ButtonStyled>
+											{{ formatMessage(messages.resubscribe) }}
+											<RightArrowIcon />
+										</Button>
 									</div>
 								</div>
 							</div>
@@ -565,16 +572,12 @@
 			<div class="header__title">
 				<h2 class="text-2xl">{{ formatMessage(messages.paymentMethodTitle) }}</h2>
 			</div>
-			<ButtonStyled>
-				<nuxt-link to="/settings/billing/charges">
-					<HistoryIcon /> {{ formatMessage(messages.paymentMethodHistory) }}
-				</nuxt-link>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button @click="addPaymentMethod">
-					<PlusIcon /> {{ formatMessage(messages.paymentMethodAdd) }}
-				</button>
-			</ButtonStyled>
+			<ButtonLink to="/settings/billing/charges">
+				<HistoryIcon /> {{ formatMessage(messages.paymentMethodHistory) }}
+			</ButtonLink>
+			<Button @click="addPaymentMethod">
+				<PlusIcon /> {{ formatMessage(messages.paymentMethodAdd) }}
+			</Button>
 		</div>
 		<div
 			v-if="!paymentMethods || paymentMethods.length === 0"
@@ -633,43 +636,43 @@
 						</div>
 					</div>
 				</div>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
-						:dropdown-id="`${baseId}-payment-method-overflow-${index}`"
-						class="btn-dropdown-animation !w-10"
-						:options="
-							[
-								{
-									id: 'primary',
-									action: () => editPaymentMethod(index, true),
+				<TeleportOverflowMenu
+					type="quiet"
+					:label="formatMessage(commonMessages.moreOptionsButton)"
+					class="btn-dropdown-animation !w-10"
+					:options="
+						[
+							{
+								id: 'primary',
+								label: formatMessage(messages.paymentMethodMakePrimary),
+								action: () => editPaymentMethod(index, true),
+							},
+							{
+								id: 'remove',
+								label: formatMessage(commonMessages.deleteLabel),
+								action: () => {
+									removePaymentMethodIndex = index
+									$refs.modal_confirm.show()
 								},
-								{
-									id: 'remove',
-									action: () => {
-										removePaymentMethodIndex = index
-										$refs.modal_confirm.show()
-									},
-									color: 'red',
-									hoverOnly: true,
-								},
-							].slice(primaryPaymentMethodId === method.id ? 1 : 0, 2)
-						"
-					>
-						<MoreVerticalIcon />
-						<template #primary>
-							<StarIcon />
-							{{ formatMessage(messages.paymentMethodMakePrimary) }}
-						</template>
-						<template #edit>
-							<EditIcon />
-							{{ formatMessage(commonMessages.editButton) }}
-						</template>
-						<template #remove>
-							<TrashIcon />
-							{{ formatMessage(commonMessages.deleteLabel) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+								tone: 'red',
+							},
+						].slice(primaryPaymentMethodId === method.id ? 1 : 0, 2)
+					"
+				>
+					<MoreVerticalIcon />
+					<template #primary>
+						<StarIcon />
+						{{ formatMessage(messages.paymentMethodMakePrimary) }}
+					</template>
+					<template #edit>
+						<EditIcon />
+						{{ formatMessage(commonMessages.editButton) }}
+					</template>
+					<template #remove>
+						<TrashIcon />
+						{{ formatMessage(commonMessages.deleteLabel) }}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 		</div>
 	</section>
@@ -694,7 +697,8 @@ import {
 } from '@modrinth/assets'
 import {
 	AddPaymentMethodModal,
-	ButtonStyled,
+	Button,
+	ButtonLink,
 	commonMessages,
 	ConfirmModal,
 	CopyCode,
@@ -702,11 +706,11 @@ import {
 	getPaymentMethodIcon,
 	injectModrinthClient,
 	injectNotificationManager,
-	OverflowMenu,
 	paymentMethodMessages,
 	PurchaseModal,
 	ResubscribeModal,
 	ServerListing,
+	TeleportOverflowMenu,
 	useFormatDateTime,
 	useFormatPrice,
 	useServerBackupDownload,
@@ -729,7 +733,6 @@ definePageMeta({
 })
 
 const auth = await useAuth()
-const baseId = useId()
 
 useHead({
 	script: [
diff --git a/apps/frontend/src/pages/settings/flags.vue b/apps/frontend/src/pages/settings/flags.vue
index 796f6f6a69..57d0a35c71 100644
--- a/apps/frontend/src/pages/settings/flags.vue
+++ b/apps/frontend/src/pages/settings/flags.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, StyledInput, Toggle } from '@modrinth/ui'
+import { Button, StyledInput, Toggle } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import { computed, ref, shallowReactive } from 'vue'
 
@@ -68,11 +68,13 @@ useSeoMeta({
 				</p>
 			</label>
 			<div class="flex items-center gap-2">
-				<ButtonStyled type="transparent">
-					<button :disabled="flags[flag] === DEFAULT_FEATURE_FLAGS[flag]" @click="resetFlag(flag)">
-						Reset to default
-					</button>
-				</ButtonStyled>
+				<Button
+					type="quiet"
+					:disabled="flags[flag] === DEFAULT_FEATURE_FLAGS[flag]"
+					@click="resetFlag(flag)"
+				>
+					Reset to default
+				</Button>
 				<Toggle
 					:id="`toggle-${flag}`"
 					v-model="flags[flag]"
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 9ce6e58f10..339300eded 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -1,7 +1,9 @@
 <template>
 	<div>
-		<MessageBanner v-if="flags.developerMode" message-type="warning" class="developer-message">
-			<CodeIcon class="inline-flex" />
+		<Admonition v-if="flags.developerMode" type="critical" class="mb-4" show-actions-underneath>
+			<template #icon="{ iconClass }">
+				<CodeIcon :class="iconClass" aria-hidden="true" />
+			</template>
 			<IntlFormatted :message-id="developerModeBanner.description">
 				<template #strong="{ children }">
 					<strong>
@@ -9,12 +11,12 @@
 					</strong>
 				</template>
 			</IntlFormatted>
-			<ButtonStyled color="red" type="highlight">
-				<button class="mt-3" @click="disableDeveloperMode()">
+			<template #actions>
+				<Button type="colored" color="red" @click="disableDeveloperMode()">
 					{{ formatMessage(developerModeBanner.deactivate) }}
-				</button>
-			</ButtonStyled>
-		</MessageBanner>
+				</Button>
+			</template>
+		</Admonition>
 		<section class="universal-card">
 			<h2 class="text-2xl">{{ formatMessage(colorTheme.title) }}</h2>
 			<p>{{ formatMessage(colorTheme.description) }}</p>
@@ -180,7 +182,8 @@
 <script setup lang="ts">
 import { CodeIcon, RadioButtonCheckedIcon, RadioButtonIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Admonition,
+	Button,
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
@@ -191,7 +194,6 @@ import {
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
 
-import MessageBanner from '~/components/ui/MessageBanner.vue'
 import type { DisplayLocation } from '~/plugins/cosmetics'
 import { isDarkTheme, type Theme } from '~/plugins/theme/index.ts'
 
@@ -501,12 +503,4 @@ const listTypes = computed(() => {
 		justify-content: center;
 	}
 }
-
-.developer-message {
-	svg {
-		vertical-align: middle;
-		margin-bottom: 2px;
-		margin-right: 0.5rem;
-	}
-}
 </style>
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 1fa0849912..ec475b4f7d 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -72,24 +72,30 @@
 				</div>
 
 				<div class="ml-auto mt-4 flex gap-2">
-					<ButtonStyled type="outlined">
-						<button @click="$refs.patModal.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-if="editPatId !== null" color="brand">
-						<button :disabled="loading || !name || !isExpiryInFuture" @click="editPat">
-							<SaveIcon />
-							{{ formatMessage(commonMessages.saveChangesButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-else color="brand">
-						<button :disabled="loading || !name || !isExpiryInFuture" @click="createPat">
-							<PlusIcon />
-							{{ formatMessage(createModalMessages.action) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="$refs.patModal.hide()">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						v-if="editPatId !== null"
+						type="colored"
+						color="brand"
+						:disabled="loading || !name || !isExpiryInFuture"
+						@click="editPat"
+					>
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveChangesButton) }}
+					</Button>
+					<Button
+						v-else
+						type="colored"
+						color="brand"
+						:disabled="loading || !name || !isExpiryInFuture"
+						@click="createPat"
+					>
+						<PlusIcon />
+						{{ formatMessage(createModalMessages.action) }}
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -98,21 +104,21 @@
 			<div class="header__title">
 				<h2 class="text-2xl">{{ formatMessage(commonSettingsMessages.pats) }}</h2>
 			</div>
-			<ButtonStyled color="brand">
-				<button
-					@click="
-						() => {
-							name = null
-							scopesVal = 0
-							expires = null
-							editPatId = null
-							$refs.patModal.show()
-						}
-					"
-				>
-					<PlusIcon /> {{ formatMessage(messages.create) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				type="colored"
+				color="brand"
+				@click="
+					() => {
+						name = null
+						scopesVal = 0
+						expires = null
+						editPatId = null
+						$refs.patModal.show()
+					}
+				"
+			>
+				<PlusIcon /> {{ formatMessage(messages.create) }}
+			</Button>
 		</div>
 		<p>
 			<IntlFormatted :message-id="messages.description">
@@ -172,33 +178,29 @@
 				</div>
 			</div>
 			<div class="token-actions ml-auto flex flex-col gap-2">
-				<ButtonStyled>
-					<button
-						@click="
-							() => {
-								editPatId = pat.id
-								name = pat.name
-								scopesVal = pat.scopes
-								expires = $dayjs(pat.expires).format('YYYY-MM-DD')
-								$refs.patModal.show()
-							}
-						"
-					>
-						<EditIcon /> {{ formatMessage(tokenMessages.edit) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button
-						@click="
-							() => {
-								deletePatIndex = pat.id
-								$refs.modal_confirm.show()
-							}
-						"
-					>
-						<TrashIcon /> {{ formatMessage(tokenMessages.revoke) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					@click="
+						() => {
+							editPatId = pat.id
+							name = pat.name
+							scopesVal = pat.scopes
+							expires = $dayjs(pat.expires).format('YYYY-MM-DD')
+							$refs.patModal.show()
+						}
+					"
+				>
+					<EditIcon /> {{ formatMessage(tokenMessages.edit) }}
+				</Button>
+				<Button
+					@click="
+						() => {
+							deletePatIndex = pat.id
+							$refs.modal_confirm.show()
+						}
+					"
+				>
+					<TrashIcon /> {{ formatMessage(tokenMessages.revoke) }}
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -206,7 +208,7 @@
 <script setup>
 import { EditIcon, PlusIcon, SaveIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	Checkbox,
 	commonMessages,
 	commonSettingsMessages,
diff --git a/apps/frontend/src/pages/settings/sessions.vue b/apps/frontend/src/pages/settings/sessions.vue
index 993844a104..7acd04d343 100644
--- a/apps/frontend/src/pages/settings/sessions.vue
+++ b/apps/frontend/src/pages/settings/sessions.vue
@@ -34,11 +34,9 @@
 			</div>
 			<div class="input-group">
 				<i v-if="session.current">{{ formatMessage(messages.currentSessionLabel) }}</i>
-				<ButtonStyled v-else>
-					<button @click="revokeSession(session.id)">
-						<XIcon /> {{ formatMessage(messages.revokeSessionButton) }}
-					</button>
-				</ButtonStyled>
+				<Button v-else @click="revokeSession(session.id)">
+					<XIcon /> {{ formatMessage(messages.revokeSessionButton) }}
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -46,7 +44,7 @@
 <script setup>
 import { XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	commonSettingsMessages,
 	defineMessages,
diff --git a/apps/frontend/src/pages/share/[inviteId].vue b/apps/frontend/src/pages/share/[inviteId].vue
index 3e697d9676..d32602bf28 100644
--- a/apps/frontend/src/pages/share/[inviteId].vue
+++ b/apps/frontend/src/pages/share/[inviteId].vue
@@ -101,12 +101,10 @@
 				</div>
 			</div>
 
-			<ButtonStyled color="brand" size="large">
-				<button type="button" @click="acceptInvite">
-					<UserPlusIcon />
-					{{ formatMessage(messages.acceptInvite) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" size="xl" native-type="button" @click="acceptInvite">
+				<UserPlusIcon />
+				{{ formatMessage(messages.acceptInvite) }}
+			</Button>
 
 			<div class="flex w-full flex-col gap-2.5">
 				<span class="pl-3 font-medium text-primary">{{
@@ -133,7 +131,7 @@ import {
 import {
 	Admonition,
 	Avatar,
-	ButtonStyled,
+	Button,
 	defineMessages,
 	injectModrinthClient,
 	useVIntl,
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index f490b13777..35bb7a1a1d 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -45,7 +45,7 @@
 		margin-block-start: var(--gap-md);
 	}
 
-	:where(button, .button, .btn) {
+	:where(button:not([data-button]), .button, .btn) {
 		width: fit-content;
 	}
 
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
index a73d03b21f..7ef55d0e69 100644
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -1,11 +1,8 @@
-import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 import type { StorybookConfig } from '@storybook/vue3-vite'
 import { mergeConfig } from 'vite'
 
-const storybookDirectory = path.dirname(fileURLToPath(import.meta.url))
-
 const config: StorybookConfig = {
 	framework: {
 		name: '@storybook/vue3-vite',
@@ -22,7 +19,9 @@ const config: StorybookConfig = {
 			},
 			resolve: {
 				alias: {
-					'@modrinth/api-client': path.resolve(storybookDirectory, '../../api-client/src/index.ts'),
+					'@modrinth/api-client': fileURLToPath(
+						new URL('../../api-client/src/index.ts', import.meta.url),
+					),
 				},
 			},
 		}),
diff --git a/packages/ui/CLAUDE.md b/packages/ui/CLAUDE.md
index 69c0ee040c..280787caf8 100644
--- a/packages/ui/CLAUDE.md
+++ b/packages/ui/CLAUDE.md
@@ -26,7 +26,7 @@ Self-contained page layouts shared across frontends. Split into two categories:
 - **`shared/`** — Reusable layout modules with their own components, composables, providers, and types. Each module is a self-contained unit (e.g. `shared/content-tab/` contains the content/mods tab layout with its own `layout.vue`, `components/`, `composables/`, `providers/`, and `types.ts`).
 - **`wrapped/`** — Page-level Vue components that mirror route structures (e.g. `wrapped/hosting/manage/`). These are full page implementations consumed by both `apps/frontend` and `apps/app-frontend`.
 
-Files inside `layouts/` use the `#ui/*` import alias (resolved via the `"imports"` field in `package.json`) to reference other `src/` modules like `#ui/components/base/ButtonStyled.vue` or `#ui/composables/i18n`.
+Files inside `layouts/` use the `#ui/*` import alias (resolved via the `"imports"` field in `package.json`) to reference other `src/` modules like `#ui/components/base/buttons` or `#ui/composables/i18n`.
 
 # Code Guidelines
 
diff --git a/packages/ui/src/components/affiliate/AffiliateLinkCard.vue b/packages/ui/src/components/affiliate/AffiliateLinkCard.vue
index 9e9a04a89b..d920b82918 100644
--- a/packages/ui/src/components/affiliate/AffiliateLinkCard.vue
+++ b/packages/ui/src/components/affiliate/AffiliateLinkCard.vue
@@ -18,12 +18,16 @@
 			</div>
 			<div class="ml-auto flex items-center gap-2">
 				<slot />
-				<ButtonStyled v-if="showRevoke" color="red" color-fill="text">
-					<button @click="emit('revoke', affiliate)">
-						<XCircleIcon />
-						{{ formatMessage(messages.revokeAffiliateLink) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="showRevoke"
+					type="quiet"
+					color="red"
+					class="!text-red [&>svg]:!text-red"
+					@click="emit('revoke', affiliate)"
+				>
+					<XCircleIcon />
+					{{ formatMessage(messages.revokeAffiliateLink) }}
+				</Button>
 			</div>
 		</div>
 		<CopyCode :text="`https://modrinth.gg?afl=${affiliate.id}`" />
@@ -34,8 +38,10 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { AffiliateIcon, XCircleIcon } from '@modrinth/assets'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
-import { AutoBrandIcon, ButtonStyled, CopyCode } from '../index'
+import { AutoBrandIcon, CopyCode } from '../index'
 
 type AffiliateCode = Labrinth.Affiliate.Internal.AffiliateCode
 
diff --git a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
index 217102b74e..2773092034 100644
--- a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
+++ b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
@@ -46,13 +46,16 @@
 						input-class="pl-10"
 					/>
 				</div>
-				<ButtonStyled color="brand">
-					<button :disabled="creatingLink || !canCreate" @click="createAffiliateLink">
-						<SpinnerIcon v-if="creatingLink" class="animate-spin" />
-						<PlusIcon v-else />
-						{{ formatMessage(creatingLink ? messages.creatingButton : messages.createButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="creatingLink || !canCreate"
+					@click="createAffiliateLink"
+				>
+					<SpinnerIcon v-if="creatingLink" class="animate-spin" />
+					<PlusIcon v-else />
+					{{ formatMessage(creatingLink ? messages.creatingButton : messages.createButton) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -62,9 +65,11 @@
 import { AffiliateIcon, PlusIcon, SpinnerIcon, UserIcon } from '@modrinth/assets'
 import { computed, ref, useTemplateRef } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
-import { AutoBrandIcon, ButtonStyled, NewModal, StyledInput } from '../index'
+import { AutoBrandIcon, NewModal, StyledInput } from '../index'
 export type CreateAffiliateProps = { sourceName: string; username?: string }
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index 26a3bfef62..73a6bd76a8 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -58,17 +58,22 @@
 			class="col-start-3 row-start-1 flex shrink-0 items-center gap-2 self-start"
 		>
 			<slot name="top-right-actions" />
-			<ButtonStyled
+			<IconButton
 				v-if="dismissible"
-				circular
-				type="transparent"
-				:color="buttonColors[type]"
-				hover-color-fill="background"
+				type="quiet"
+				:color="
+					buttonColors[type] && buttonColors[type] !== 'standard'
+						? buttonColors[type] === 'medal-promo'
+							? 'medal_promotion'
+							: buttonColors[type]
+						: undefined
+				"
+				label="Dismiss"
+				native-type="button"
+				@click="$emit('dismiss')"
 			>
-				<button type="button" aria-label="Dismiss" @click="$emit('dismiss')">
-					<XIcon />
-				</button>
-			</ButtonStyled>
+				<XIcon />
+			</IconButton>
 		</div>
 		<div
 			v-if="progress != null"
@@ -96,9 +101,10 @@ import { ClockIcon, XIcon } from '@modrinth/assets'
 import { useNow } from '@vueuse/core'
 import { computed } from 'vue'
 
+import { IconButton } from '#ui/components/base/buttons'
+
 import { useFormatDateTime, useRelativeTime } from '../../composables'
 import { getSeverityIcon } from '../../utils'
-import ButtonStyled from './ButtonStyled.vue'
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index ff1f37419b..cc78d727eb 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -12,11 +12,9 @@
 				/>
 			</Transition>
 			<div v-if="!isAtBottom" class="absolute bottom-4 right-4 z-10">
-				<ButtonStyled circular type="highlight" size="large">
-					<button class="!shadow-2xl" aria-label="Scroll to bottom" @click="scrollToBottom">
-						<ChevronDownIcon />
-					</button>
-				</ButtonStyled>
+				<IconButton size="xl" label="Scroll to bottom" class="!shadow-2xl" @click="scrollToBottom">
+					<ChevronDownIcon />
+				</IconButton>
 			</div>
 		</div>
 		<div
@@ -43,7 +41,7 @@ import { ChevronDownIcon, TerminalSquareIcon } from '@modrinth/assets'
 import type { Terminal } from '@xterm/xterm'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { IconButton } from '#ui/components/base/buttons'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import { useTerminal } from '#ui/composables/terminal'
 
diff --git a/packages/ui/src/components/base/Button.vue b/packages/ui/src/components/base/Button.vue
deleted file mode 100644
index 48416b4f51..0000000000
--- a/packages/ui/src/components/base/Button.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup>
-import { ExternalIcon, UnknownIcon } from '@modrinth/assets'
-import { computed } from 'vue'
-
-const props = defineProps({
-	link: {
-		type: String,
-		default: null,
-	},
-	external: {
-		type: Boolean,
-		default: false,
-	},
-	download: {
-		type: String,
-		default: null,
-	},
-	action: {
-		type: Function,
-		default: null,
-	},
-	color: {
-		type: String,
-		default: 'default',
-	},
-	iconOnly: {
-		type: Boolean,
-		default: false,
-	},
-	large: {
-		type: Boolean,
-		default: false,
-	},
-	outline: {
-		type: Boolean,
-		default: false,
-	},
-	transparent: {
-		type: Boolean,
-		default: false,
-	},
-	hoverFilled: {
-		type: Boolean,
-		default: false,
-	},
-	hoverFilledOnly: {
-		type: Boolean,
-		default: false,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-const accentedButton = computed(() =>
-	['danger', 'primary', 'red', 'orange', 'green', 'blue', 'purple', 'gray'].includes(props.color),
-)
-
-const classes = computed(() => {
-	const color = props.color
-	return {
-		'icon-only': props.iconOnly,
-		'btn-large': props.large,
-		'btn-danger': color === 'danger',
-		'btn-primary': color === 'primary',
-		'btn-secondary': color === 'secondary',
-		'btn-highlight': color === 'highlight',
-		'btn-red': color === 'red',
-		'btn-orange': color === 'orange',
-		'btn-green': color === 'green',
-		'btn-blue': color === 'blue',
-		'btn-purple': color === 'purple',
-		'btn-gray': color === 'gray',
-		'btn-transparent': props.transparent,
-		'btn-hover-filled': props.hoverFilled,
-		'btn-hover-filled-only': props.hoverFilledOnly,
-		'btn-outline': props.outline,
-		'color-accent-contrast': accentedButton,
-		disabled: props.disabled,
-	}
-})
-</script>
-
-<template>
-	<router-link
-		v-if="link && link.startsWith('/')"
-		class="btn"
-		:class="classes"
-		:to="disabled ? '' : link"
-		:target="external ? '_blank' : '_self'"
-		@click="
-			(event) => {
-				if (disabled) {
-					event.preventDefault()
-					return
-				}
-				if (action) {
-					action(event)
-				}
-			}
-		"
-	>
-		<slot />
-		<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
-		<UnknownIcon v-if="!$slots.default" />
-	</router-link>
-	<a
-		v-else-if="link"
-		class="btn"
-		:class="classes"
-		:href="disabled ? undefined : link"
-		:download="download || undefined"
-		:target="external ? '_blank' : '_self'"
-		@click="
-			(event) => {
-				if (disabled) {
-					event.preventDefault()
-					return
-				}
-				if (action) {
-					action(event)
-				}
-			}
-		"
-	>
-		<slot />
-		<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
-		<UnknownIcon v-if="!$slots.default" />
-	</a>
-	<button v-else class="btn" :class="classes" :disabled="disabled" @click="action">
-		<slot />
-		<UnknownIcon v-if="!$slots.default" />
-	</button>
-</template>
-
-<style lang="scss" scoped>
-:where(button) {
-	background: none;
-	color: var(--color-base);
-}
-</style>
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
deleted file mode 100644
index f546054c16..0000000000
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(
-	defineProps<{
-		color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'medal-promo'
-		size?: 'standard' | 'large' | 'small'
-		circular?: boolean
-		type?: 'standard' | 'outlined' | 'transparent' | 'highlight' | 'highlight-colored-text' | 'chip'
-		colorFill?: 'auto' | 'background' | 'text' | 'none'
-		hoverColorFill?: 'auto' | 'background' | 'text' | 'none'
-		highlightedStyle?: 'main-nav-primary' | 'main-nav-secondary'
-		highlighted?: boolean
-	}>(),
-	{
-		color: 'standard',
-		size: 'standard',
-		circular: false,
-		type: 'standard',
-		colorFill: 'auto',
-		hoverColorFill: 'auto',
-		highlightedStyle: 'main-nav-primary',
-		highlighted: false,
-	},
-)
-
-const highlightedColorVar = computed(() => {
-	switch (props.color) {
-		case 'brand':
-			return 'var(--color-brand-highlight)'
-		case 'red':
-			return 'var(--color-red-highlight)'
-		case 'orange':
-			return 'var(--color-orange-highlight)'
-		case 'green':
-			return 'var(--color-green-highlight)'
-		case 'medal-promo':
-		case 'blue':
-			return 'var(--color-blue-highlight)'
-		case 'purple':
-			return 'var(--color-purple-highlight)'
-		case 'standard':
-		default:
-			return null
-	}
-})
-
-const colorVar = computed(() => {
-	switch (props.color) {
-		case 'brand':
-			return 'var(--color-brand)'
-		case 'red':
-			return 'var(--color-red)'
-		case 'orange':
-			return 'var(--color-orange)'
-		case 'green':
-			return 'var(--color-green)'
-		case 'blue':
-			return 'var(--color-blue)'
-		case 'purple':
-			return 'var(--color-purple)'
-		case 'medal-promo':
-			return 'var(--medal-promotion-text-orange)'
-		case 'standard':
-		default:
-			return null
-	}
-})
-
-const height = computed(() => {
-	if (props.size === 'large') {
-		return '3rem'
-	} else if (props.size === 'small') {
-		return '1.5rem'
-	}
-	return '2.25rem'
-})
-
-const width = computed(() => {
-	if (props.size === 'large') {
-		return props.circular ? '3rem' : 'auto'
-	} else if (props.size === 'small') {
-		return props.circular ? '1.5rem' : 'auto'
-	}
-	return props.circular ? '2.25rem' : 'auto'
-})
-
-const paddingX = computed(() => {
-	let padding = props.circular ? '0.5rem' : '0.75rem'
-	if (props.size === 'large') {
-		padding = props.circular ? '0.75rem' : '1rem'
-	} else if (props.size === 'small') {
-		padding = props.circular ? '0.125rem' : '0.5rem'
-	}
-	return `calc(${padding} - 0.125rem)`
-})
-
-const paddingY = computed(() => {
-	if (props.size === 'large') {
-		return '0.75rem'
-	}
-	return '0.5rem'
-})
-
-const gap = computed(() => {
-	if (props.size === 'large') {
-		return '0.5rem'
-	} else if (props.size === 'small') {
-		return '0.25rem'
-	}
-	return '0.375rem'
-})
-
-const fontWeight = computed(() => {
-	if (props.size === 'large') {
-		return '800'
-	}
-	return '600'
-})
-
-const radius = computed(() => {
-	if (props.circular) {
-		return '99999px'
-	}
-
-	if (props.size === 'large') {
-		return '1rem'
-	} else if (props.size === 'small') {
-		return '0.5rem'
-	}
-	return '0.75rem'
-})
-
-const iconSize = computed(() => {
-	if (props.size === 'large') {
-		return '1.5rem'
-	} else if (props.size === 'small') {
-		return '1rem'
-	}
-	return '1.25rem'
-})
-
-function setColorFill(
-	colors: { bg: string; text: string },
-	fill: 'background' | 'text' | 'none',
-): { bg: string; text: string } {
-	if (colorVar.value) {
-		if (fill === 'background') {
-			if (props.type === 'highlight' && highlightedColorVar.value) {
-				colors.bg = highlightedColorVar.value
-				colors.text = 'var(--color-contrast)'
-			} else if (props.type === 'highlight-colored-text' && highlightedColorVar.value) {
-				colors.bg = highlightedColorVar.value
-				colors.text = colorVar.value
-			} else {
-				colors.bg = colorVar.value
-				colors.text = 'var(--color-accent-contrast)'
-			}
-		} else if (fill === 'text') {
-			colors.text = colorVar.value
-		}
-	}
-	return colors
-}
-
-const colorVariables = computed(() => {
-	const defaultShadow =
-		props.type === 'standard' || props.type === 'highlight' || props.highlighted
-			? 'var(--shadow-button)'
-			: 'none'
-
-	if (props.highlighted) {
-		const colors = {
-			bg:
-				props.highlightedStyle === 'main-nav-primary'
-					? 'var(--color-button-bg-selected)'
-					: 'var(--color-button-bg)',
-			text:
-				props.highlightedStyle === 'main-nav-primary'
-					? 'var(--color-button-text-selected)'
-					: 'var(--color-contrast)',
-			icon:
-				props.type === 'chip'
-					? 'var(--color-contrast)'
-					: props.highlightedStyle === 'main-nav-primary'
-						? 'var(--color-button-text-selected)'
-						: 'var(--color-contrast)',
-		}
-		const hoverColors = JSON.parse(JSON.stringify(colors))
-		const boxShadow =
-			props.type === 'chip' && colorVar.value ? `0 0 0 1px ${colorVar.value}` : defaultShadow
-		return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_icon: ${colors.icon}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_hover-icon: ${hoverColors.icon}; --_box-shadow: ${boxShadow};`
-	}
-
-	let colors = {
-		bg: 'var(--color-button-bg)',
-		text: 'var(--color-base)',
-	}
-	let hoverColors = JSON.parse(JSON.stringify(colors))
-
-	if (props.type === 'outlined') {
-		hoverColors.bg = 'transparent'
-	}
-
-	if (props.type === 'outlined' || props.type === 'transparent') {
-		colors.bg = 'transparent'
-		colors = setColorFill(colors, props.colorFill === 'auto' ? 'text' : props.colorFill)
-		hoverColors = setColorFill(
-			hoverColors,
-			props.hoverColorFill === 'auto' ? 'text' : props.hoverColorFill,
-		)
-	} else if (props.type === 'chip') {
-		// Chip type uses highlight-colored-text styling when colored
-		if (colorVar.value && highlightedColorVar.value) {
-			colors.bg = highlightedColorVar.value
-			colors.text = colorVar.value
-			hoverColors.bg = highlightedColorVar.value
-			hoverColors.text = colorVar.value
-		}
-	} else {
-		colors = setColorFill(colors, props.colorFill === 'auto' ? 'background' : props.colorFill)
-		hoverColors = setColorFill(
-			hoverColors,
-			props.hoverColorFill === 'auto' ? 'background' : props.hoverColorFill,
-		)
-	}
-
-	const boxShadow =
-		props.type === 'chip' && colorVar.value ? `0 0 0 1px ${colorVar.value}` : defaultShadow
-	return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_box-shadow: ${boxShadow};`
-})
-
-const fontSize = computed(() => {
-	if (props.size === 'small') {
-		return 'text-sm'
-	}
-	return 'text-base'
-})
-</script>
-
-<template>
-	<div
-		class="btn-wrapper"
-		:class="[
-			{ outline: type === 'outlined', transparent: type === 'transparent', chip: type === 'chip' },
-			fontSize,
-		]"
-		:style="`${colorVariables}--_height:${height};--_width:${width};--_radius: ${radius};--_padding-x:${paddingX};--_padding-y:${paddingY};--_gap:${gap};--_font-weight:${fontWeight};--_icon-size:${iconSize};--_outline-color:${color === 'standard' && type === 'outlined' ? 'var(--surface-5)' : 'currentColor'}`"
-	>
-		<slot />
-	</div>
-</template>
-
-<style scoped lang="scss">
-.btn-wrapper {
-	display: contents;
-}
-
-/* Searches up to 4 children deep for valid button */
-.btn-wrapper :deep(:is(button, a, .button-like):first-child),
-.btn-wrapper :slotted(:is(button, a, .button-like):first-child),
-.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child,
-.btn-wrapper :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
-.btn-wrapper
-	:slotted(*)
-	> *:first-child
-	> *:first-child
-	> :is(button, a, .button-like):first-child {
-	@apply flex touch-manipulation cursor-pointer flex-row items-center justify-center border-solid border border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
-	box-shadow: var(--_box-shadow, inset 0 0 0 transparent);
-	transition:
-		scale 0.125s ease-in-out,
-		background-color 0.25s ease-in-out,
-		color 0.25s ease-in-out,
-		filter 0.25s ease-in-out;
-
-	svg:first-child {
-		color: var(--_icon, var(--_text));
-		transition: color 0.25s ease-in-out;
-		flex-shrink: 0;
-	}
-
-	&[disabled]:not([disabled='false']),
-	&[disabled='true'],
-	&.disabled,
-	&.looks-disabled {
-		@apply opacity-50;
-	}
-
-	&[disabled]:not([disabled='false']),
-	&[disabled='true'],
-	&.disabled {
-		@apply cursor-not-allowed;
-	}
-
-	&:not([disabled]:not([disabled='false'])):not([disabled='true']):not(.disabled) {
-		@apply hover:brightness-[--hover-brightness] focus-visible:brightness-[--hover-brightness] hover:bg-[--_hover-bg] hover:text-[--_hover-text] focus-visible:bg-[--_hover-bg] focus-visible:text-[--_hover-text];
-
-		&:hover svg:first-child,
-		&:focus-visible svg:first-child {
-			color: var(--_hover-icon, var(--_hover-text));
-		}
-	}
-}
-
-.btn-wrapper:not(.chip) :deep(:is(button, a, .button-like):first-child),
-.btn-wrapper:not(.chip) :slotted(:is(button, a, .button-like):first-child),
-.btn-wrapper:not(.chip) :slotted(*) > :is(button, a, .button-like):first-child,
-.btn-wrapper:not(.chip) :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
-.btn-wrapper:not(.chip)
-	:slotted(*)
-	> *:first-child
-	> *:first-child
-	> :is(button, a, .button-like):first-child {
-	&:not([disabled]:not([disabled='false'])):not([disabled='true']):not(.disabled) {
-		@apply active:scale-95;
-	}
-}
-
-.disable-advanced-rendering {
-	.btn-wrapper:not(.outline):not(.transparent) :deep(:is(button, a, .button-like):first-child),
-	.btn-wrapper:not(.outline):not(.transparent) :slotted(:is(button, a, .button-like):first-child),
-	.btn-wrapper:not(.outline):not(.transparent)
-		:slotted(*)
-		> :is(button, a, .button-like):first-child,
-	.btn-wrapper:not(.outline):not(.transparent)
-		:slotted(*)
-		> *:first-child
-		> :is(button, a, .button-like):first-child,
-	.btn-wrapper
-		:slotted(*)
-		> *:first-child
-		> *:first-child
-		> :is(button, a, .button-like):first-child {
-		@apply border border-[rgba(0,0,0,0.2)];
-	}
-}
-
-.btn-wrapper.outline :deep(:is(button, a, .button-like):first-child),
-.btn-wrapper.outline :slotted(:is(button, a, .button-like):first-child),
-.btn-wrapper.outline :slotted(*) > :is(button, a, .button-like):first-child,
-.btn-wrapper.outline :slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
-.btn-wrapper.outline
-	:slotted(*)
-	> *:first-child
-	> *:first-child
-	> :is(button, a, .button-like):first-child {
-	@apply border-[--_outline-color,currentColor];
-}
-
-/*noinspection CssUnresolvedCustomProperty*/
-.btn-wrapper :deep(:is(button, a, .button-like):first-child) > svg,
-.btn-wrapper :slotted(:is(button, a, .button-like):first-child) > svg,
-.btn-wrapper :slotted(*) > :is(button, a, .button-like):first-child > svg,
-.btn-wrapper :slotted(*) > *:first-child > :is(button, a, .button-like):first-child > svg,
-.btn-wrapper
-	:slotted(*)
-	> *:first-child
-	> *:first-child
-	> :is(button, a, .button-like):first-child
-	> svg {
-	display: block;
-	width: var(--_icon-size, 1rem);
-	height: var(--_icon-size, 1rem);
-	min-width: var(--_icon-size, 1rem);
-	min-height: var(--_icon-size, 1rem);
-}
-
-.joined-buttons {
-	display: flex;
-	gap: 1px;
-
-	> .btn-wrapper:not(:first-child) {
-		:deep(:is(button, a, .button-like):first-child),
-		:slotted(:is(button, a, .button-like):first-child),
-		:slotted(*) > :is(button, a, .button-like):first-child,
-		:slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
-		:slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0;
-		}
-	}
-
-	> :not(:last-child) {
-		:deep(:is(button, a, .button-like):first-child),
-		:slotted(:is(button, a, .button-like):first-child),
-		:slotted(*) > :is(button, a, .button-like):first-child,
-		:slotted(*) > *:first-child > :is(button, a, .button-like):first-child,
-		:slotted(*) > *:first-child > *:first-child > :is(button, a, .button-like):first-child {
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-	}
-}
-
-/* guys, I know this is nuts, I know */
-</style>
diff --git a/packages/ui/src/components/base/Card.vue b/packages/ui/src/components/base/Card.vue
index f52f4533b0..c481f17eb0 100644
--- a/packages/ui/src/components/base/Card.vue
+++ b/packages/ui/src/components/base/Card.vue
@@ -2,7 +2,7 @@
 import { DropdownIcon } from '@modrinth/assets'
 import { reactive } from 'vue'
 
-import ButtonStyled from './ButtonStyled.vue'
+import { IconButton } from '#ui/components/base/buttons'
 
 const props = defineProps({
 	collapsible: {
@@ -33,11 +33,9 @@ function toggleCollapsed() {
 		<div v-if="!!$slots.header || collapsible" class="header">
 			<slot name="header"></slot>
 			<div v-if="collapsible" class="btn-group">
-				<ButtonStyled circular>
-					<button @click="toggleCollapsed">
-						<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
-					</button>
-				</ButtonStyled>
+				<IconButton label="Toggle details" @click="toggleCollapsed">
+					<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
+				</IconButton>
 			</div>
 		</div>
 		<slot v-if="!state.collapsed" />
diff --git a/packages/ui/src/components/base/Chips.vue b/packages/ui/src/components/base/Chips.vue
index e1359c469e..e7daddc930 100644
--- a/packages/ui/src/components/base/Chips.vue
+++ b/packages/ui/src/components/base/Chips.vue
@@ -15,7 +15,11 @@
 			}"
 			@click="toggleItem(item)"
 		>
-			<CheckIcon v-if="selected === item && !hideCheckmarkIcon" />
+			<CheckIcon
+				v-if="selected === item && !hideCheckmarkIcon"
+				class="!text-brand"
+				aria-hidden="true"
+			/>
 			<span>{{ formatLabel(item) }}</span>
 		</Button>
 	</div>
@@ -24,7 +28,7 @@
 <script setup lang="ts" generic="T">
 import { CheckIcon } from '@modrinth/assets'
 
-import Button from './Button.vue'
+import Button from './buttons/Button.vue'
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/ui/src/components/base/CollapsibleAdmonition.vue b/packages/ui/src/components/base/CollapsibleAdmonition.vue
index 273be86a81..6df8073d40 100644
--- a/packages/ui/src/components/base/CollapsibleAdmonition.vue
+++ b/packages/ui/src/components/base/CollapsibleAdmonition.vue
@@ -17,24 +17,26 @@
 					</span>
 				</div>
 				<div class="flex items-center gap-2">
-					<ButtonStyled circular type="highlight-colored-text" :color="buttonColors[type]">
-						<button aria-label="Toggle" @click.stop="expanded = !expanded">
-							<ChevronDownIcon
-								class="h-4 w-4 transition-transform duration-300"
-								:class="expanded && 'rotate-180'"
-							/>
-						</button>
-					</ButtonStyled>
-					<ButtonStyled
-						v-if="dismissible"
-						circular
-						type="highlight-colored-text"
+					<IconButton
+						type="quiet"
 						:color="buttonColors[type]"
+						label="Toggle"
+						@click.stop="expanded = !expanded"
 					>
-						<button aria-label="Dismiss" @click.stop="handleDismiss">
-							<XIcon class="h-4 w-4" />
-						</button>
-					</ButtonStyled>
+						<ChevronDownIcon
+							class="h-4 w-4 transition-transform duration-300"
+							:class="expanded && 'rotate-180'"
+						/>
+					</IconButton>
+					<IconButton
+						v-if="dismissible"
+						type="quiet"
+						:color="buttonColors[type]"
+						label="Dismiss"
+						@click.stop="handleDismiss"
+					>
+						<XIcon class="h-4 w-4" />
+					</IconButton>
 				</div>
 			</div>
 
@@ -72,7 +74,7 @@
 import { ChevronDownIcon, LightBulbIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
-import ButtonStyled from './ButtonStyled.vue'
+import { IconButton } from '#ui/components/base/buttons'
 
 export interface CollapsibleAdmonitionItem {
 	title: string
diff --git a/packages/ui/src/components/base/CollapsibleRegion.vue b/packages/ui/src/components/base/CollapsibleRegion.vue
index 04a47d13dd..a9fd3d71f7 100644
--- a/packages/ui/src/components/base/CollapsibleRegion.vue
+++ b/packages/ui/src/components/base/CollapsibleRegion.vue
@@ -17,13 +17,15 @@
 		/>
 
 		<div class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
-			<ButtonStyled circular type="transparent">
-				<button class="flex items-center gap-1 text-xs" @click="collapsed = !collapsed">
-					<ExpandIcon v-if="collapsed" />
-					<CollapseIcon v-else />
-					{{ collapsed ? expandText : collapseText }}
-				</button>
-			</ButtonStyled>
+			<Button
+				type="quiet"
+				class="flex items-center gap-1 text-xs !rounded-full"
+				@click="collapsed = !collapsed"
+			>
+				<ExpandIcon v-if="collapsed" />
+				<CollapseIcon v-else />
+				{{ collapsed ? expandText : collapseText }}
+			</Button>
 		</div>
 	</div>
 </template>
@@ -31,7 +33,7 @@
 <script setup lang="ts">
 import { CollapseIcon, ExpandIcon } from '@modrinth/assets'
 
-import ButtonStyled from './ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 
 withDefaults(
 	defineProps<{
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 17821812a4..4a0c6bcd0a 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -49,19 +49,19 @@
 		</div>
 
 		<!-- Standard mode: button trigger -->
-		<span
+		<ButtonFrame
 			v-else
 			ref="triggerRef"
-			role="button"
-			tabindex="0"
-			class="relative flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-surface-4 px-4 py-2 text-left transition-all duration-200 text-button-text gap-2.5"
+			as="button"
+			native-type="button"
+			:type="triggerType"
+			:size="triggerSize"
+			:interaction="triggerInteraction"
+			:disabled="disabled"
 			:class="[
+				'min-w-full w-full !justify-between overflow-hidden text-left',
 				props.triggerClass,
-				{
-					'z-[9999]': isOpen,
-					'cursor-not-allowed opacity-50': disabled,
-					'cursor-pointer hover:brightness-[115%] active:brightness-[115%]': !disabled,
-				},
+				{ 'z-[9999]': isOpen },
 			]"
 			:aria-expanded="isOpen"
 			:aria-haspopup="listbox ? 'listbox' : 'menu'"
@@ -78,7 +78,7 @@
 				/>
 				<span
 					v-if="selectedOption"
-					class="min-w-0 truncate text-primary font-semibold leading-tight"
+					class="min-w-0 truncate font-semibold leading-tight text-inherit"
 				>
 					<slot name="selected" :label="selectedTriggerText">{{ selectedTriggerText }}</slot>
 				</span>
@@ -94,7 +94,7 @@
 					:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
 				/>
 			</div>
-		</span>
+		</ButtonFrame>
 
 		<Teleport to="#teleports">
 			<Transition
@@ -217,6 +217,13 @@ import {
 	watch,
 } from 'vue'
 
+import ButtonFrame from './buttons/ButtonFrame.vue'
+import type {
+	ButtonElementHandle,
+	ButtonInteraction,
+	ButtonSize,
+	ButtonType,
+} from './buttons/types'
 import StyledInput from './StyledInput.vue'
 
 export interface ComboboxOption<T> {
@@ -281,6 +288,10 @@ const props = withDefaults(
 		displayValue?: string
 		searchValue?: string
 		triggerClass?: string
+		/** Shared button frame style for non-searchable combobox triggers. */
+		triggerType?: ButtonType
+		triggerSize?: ButtonSize
+		triggerInteraction?: ButtonInteraction
 		dropdownClass?: string
 		/** Additional selectors to ignore when detecting outside clicks */
 		outsideClickIgnore?: string[]
@@ -322,6 +333,9 @@ const props = withDefaults(
 		selectSearchTextOnFocus: false,
 		showSearchIcon: false,
 		searchType: 'text',
+		triggerType: 'base',
+		triggerSize: 'md',
+		triggerInteraction: 'surface',
 		outsideClickIgnore: () => [],
 	},
 )
@@ -343,7 +357,7 @@ const searchQuery = ref('')
 const userHasTyped = ref(false)
 const focusedIndex = ref(-1)
 const containerRef = ref<HTMLElement>()
-const triggerRef = ref<HTMLElement>()
+const triggerRef = ref<ButtonElementHandle>()
 const searchTriggerRef = ref<InstanceType<typeof StyledInput>>()
 const dropdownRef = ref<HTMLElement>()
 const optionsScrollbarRef = ref<HTMLElement>()
@@ -357,10 +371,11 @@ const effectiveTriggerEl = computed(() => {
 	if (props.searchable && searchTriggerRef.value) {
 		return (searchTriggerRef.value as unknown as { $el: HTMLElement }).$el as HTMLElement
 	}
-	return triggerRef.value
+
+	return triggerRef.value?.element ?? undefined
 })
 const outsideClickIgnoreTargets = computed(() => [
-	triggerRef,
+	effectiveTriggerEl,
 	containerRef,
 	...props.outsideClickIgnore,
 ])
@@ -642,7 +657,7 @@ function closeDropdown() {
 
 	if (!props.searchable) {
 		nextTick(() => {
-			triggerRef.value?.focus()
+			effectiveTriggerEl.value?.focus()
 		})
 	}
 }
diff --git a/packages/ui/src/components/base/DatePicker.vue b/packages/ui/src/components/base/DatePicker.vue
index 17ab811f74..7a758c26c9 100644
--- a/packages/ui/src/components/base/DatePicker.vue
+++ b/packages/ui/src/components/base/DatePicker.vue
@@ -14,33 +14,43 @@
 			rangeEndpointMoveState ? 'is-moving-range-end' : '',
 		]"
 	>
-		<CalendarIcon
-			v-if="showIcon && !calendarOnly"
-			class="pointer-events-none absolute left-3 z-[1] h-5 w-5 text-secondary opacity-60 transition-colors"
-			aria-hidden="true"
-		/>
-		<input
-			:id="id"
-			ref="inputRef"
-			:name="name"
-			:placeholder="placeholder"
-			:disabled="disabled"
-			:readonly="readonly"
-			:autocomplete="autocomplete"
-			:class="inputClasses"
-			:tabindex="calendarOnly ? -1 : undefined"
-			:aria-hidden="calendarOnly ? 'true' : undefined"
-			type="text"
-		/>
-		<button
-			v-if="hasClearButton"
-			type="button"
-			class="absolute right-0.5 top-px z-[1] touch-manipulation cursor-pointer select-none border-none bg-transparent p-2 text-secondary transition-colors hover:text-contrast"
-			aria-label="Clear date"
-			@click.stop="clearValue"
+		<ButtonFrame
+			as="span"
+			:class="[
+				calendarOnly
+					? '!block !h-auto !min-w-0 !bg-transparent !p-0 !shadow-none hover:!brightness-100'
+					: 'w-full !justify-start !p-0',
+				disabled ? '!cursor-not-allowed' : '',
+			]"
 		>
-			<XIcon class="h-5 w-5" aria-hidden="true" />
-		</button>
+			<CalendarIcon
+				v-if="showIcon && !calendarOnly"
+				class="pointer-events-none absolute left-3 z-[1] h-5 w-5 text-secondary opacity-60 transition-colors"
+				aria-hidden="true"
+			/>
+			<input
+				:id="id"
+				ref="inputRef"
+				:name="name"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				:readonly="readonly"
+				:autocomplete="autocomplete"
+				:class="inputClasses"
+				:tabindex="calendarOnly ? -1 : undefined"
+				:aria-hidden="calendarOnly ? 'true' : undefined"
+				type="text"
+			/>
+			<button
+				v-if="hasClearButton"
+				type="button"
+				class="absolute right-0.5 top-px z-[1] touch-manipulation cursor-pointer select-none border-none bg-transparent p-2 text-secondary transition-colors hover:text-contrast"
+				aria-label="Clear date"
+				@click.stop="clearValue"
+			>
+				<XIcon class="h-5 w-5" aria-hidden="true" />
+			</button>
+		</ButtonFrame>
 	</div>
 </template>
 
@@ -55,6 +65,8 @@ import type { Instance } from 'flatpickr/dist/types/instance'
 import type { Options } from 'flatpickr/dist/types/options'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import ButtonFrame from './buttons/ButtonFrame.vue'
+
 type DatePickerValue = string | Date | null | undefined
 type RangeEdge = 'start' | 'end'
 type ViewDateAlignment = 'left' | 'right'
@@ -1188,11 +1200,11 @@ const hasClearButton = computed(
 const inputClasses = computed(() => [
 	props.calendarOnly
 		? 'sr-only pointer-events-none absolute h-0 w-0 opacity-0'
-		: 'w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow !outline-0',
+		: 'h-full w-full touch-manipulation appearance-none bg-transparent font-semibold text-primary shadow-none transition-[shadow,color] placeholder:text-secondary focus:text-contrast focus:ring-4 focus:ring-brand-shadow !outline-0',
 	!props.calendarOnly && props.showIcon ? 'pl-10' : '',
 	!props.calendarOnly && !props.showIcon ? 'pl-3' : '',
 	!props.calendarOnly
-		? `${hasClearButton.value ? 'pr-10' : 'pr-3'} h-9 py-2 text-base outline-none bg-surface-4 border-none rounded-xl`
+		? `${hasClearButton.value ? 'pr-10' : 'pr-3'} rounded-xl border-none py-2 text-base outline-none`
 		: '',
 	props.disabled && !props.calendarOnly ? 'cursor-not-allowed' : '',
 	props.inputClass,
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 73d61e6507..ceaea500db 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -20,6 +20,8 @@
 		:fit-content="true"
 		:searchable="preview.category.searchable"
 		:search-placeholder="preview.category.searchPlaceholder"
+		trigger-type="base"
+		trigger-size="lg"
 		:trigger-class="effectivePreviewTriggerClass"
 		:dropdown-width="getPreviewDropdownWidth(preview.category)"
 		:dropdown-min-width="getPreviewDropdownMinWidth(preview.category)"
@@ -105,24 +107,24 @@
 	</MultiSelect>
 
 	<div class="flex h-10 min-w-0 max-w-full items-center gap-2">
-		<ButtonStyled type="outlined">
-			<button
-				ref="addMenuTrigger"
-				type="button"
-				:class="addButtonClass ?? '!border'"
-				:aria-expanded="isAddMenuOpen"
-				aria-haspopup="menu"
-				@click="handleAddMenuTriggerClick"
-				@keydown="handleAddMenuTriggerKeydown"
-			>
-				<PlusIcon />
-				{{ addLabel }}
-			</button>
-		</ButtonStyled>
+		<Button
+			ref="addMenuTrigger"
+			type="outlined"
+			native-type="button"
+			:size="addButtonSize"
+			:class="addButtonClass ?? '!border'"
+			:aria-expanded="isAddMenuOpen"
+			aria-haspopup="menu"
+			@click="handleAddMenuTriggerClick"
+			@keydown="handleAddMenuTriggerKeydown"
+		>
+			<PlusIcon />
+			{{ addLabel }}
+		</Button>
 
-		<ButtonStyled v-if="shouldShowClear" type="transparent">
-			<button type="button" @click="clearAllFilters">{{ clearLabel }}</button>
-		</ButtonStyled>
+		<Button v-if="shouldShowClear" type="quiet" native-type="button" @click="clearAllFilters">{{
+			clearLabel
+		}}</Button>
 	</div>
 
 	<Teleport to="#teleports">
@@ -385,8 +387,9 @@ import { OverlayScrollbars, type PartialOptions } from 'overlayscrollbars'
 import type { Component, ComponentPublicInstance, CSSProperties } from 'vue'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
+import { Button, type ButtonSize } from '#ui/components/base/buttons'
+
 import { useVirtualScroll } from '../../composables/virtual-scroll'
-import ButtonStyled from './ButtonStyled.vue'
 import MultiSelect, { type MultiSelectItem } from './MultiSelect.vue'
 import StyledInput from './StyledInput.vue'
 
@@ -514,6 +517,7 @@ const props = withDefaults(
 		showPreviewFilterIcon?: boolean
 		previewTriggerClass?: string
 		addButtonClass?: string
+		addButtonSize?: ButtonSize
 		emptyOptionsLabel?: string
 		emptySearchLabel?: string
 		checkboxPosition?: 'left' | 'right'
@@ -525,6 +529,7 @@ const props = withDefaults(
 		showClear: false,
 		showLabel: true,
 		useFilterIcon: false,
+		addButtonSize: 'md',
 		applyImmediately: false,
 		showPreviewFilterIcon: false,
 		emptyOptionsLabel: 'No options available.',
@@ -752,8 +757,7 @@ const appliedFilterPreviews = computed(() =>
 
 const hasAppliedFilters = computed(() => appliedFilterPreviews.value.length > 0)
 const shouldShowClear = computed(() => hasAppliedFilters.value || props.showClear)
-const DEFAULT_PREVIEW_TRIGGER_CLASS =
-	'h-10 max-w-[16rem] bg-surface-4 px-4 py-1.5 transition-all bg-surface-4 hover:brightness-110 active:brightness-110'
+const DEFAULT_PREVIEW_TRIGGER_CLASS = 'max-w-[16rem]'
 const effectivePreviewTriggerClass = computed(
 	() => props.previewTriggerClass ?? DEFAULT_PREVIEW_TRIGGER_CLASS,
 )
diff --git a/packages/ui/src/components/base/ErrorInformationCard.vue b/packages/ui/src/components/base/ErrorInformationCard.vue
index 7f07733174..71f010070e 100644
--- a/packages/ui/src/components/base/ErrorInformationCard.vue
+++ b/packages/ui/src/components/base/ErrorInformationCard.vue
@@ -46,31 +46,29 @@
 		</div>
 
 		<div class="mt-4 flex !w-full flex-row gap-4">
-			<ButtonStyled
+			<Button
 				v-if="action"
-				size="large"
-				:color="action.color || 'brand'"
+				:type="action.color === 'standard' ? 'base' : 'colored'"
+				:color="action.color === 'standard' ? undefined : (action.color ?? 'brand')"
+				size="xl"
 				:disabled="action.disabled"
+				class="!w-full"
 				@click="action.onClick"
 			>
-				<button class="!w-full">
-					<component :is="action.icon" v-if="action.icon && !action.showAltIcon" class="size-4" />
-					<component
-						:is="action.altIcon"
-						v-else-if="action.icon && action.showAltIcon"
-						class="size-4"
-					/>
-					{{ action.label }}
-				</button>
-			</ButtonStyled>
+				<component :is="action.icon" v-if="action.icon && !action.showAltIcon" class="size-4" />
+				<component
+					:is="action.altIcon"
+					v-else-if="action.icon && action.showAltIcon"
+					class="size-4"
+				/>
+				{{ action.label }}
+			</Button>
 
-			<ButtonStyled v-if="errorDetails" size="large" color="standard" @click="copyErrorInformation">
-				<button class="!w-full">
-					<CopyIcon v-if="!infoCopied" class="size-4" />
-					<CheckIcon v-else class="size-4" />
-					Copy Information
-				</button>
-			</ButtonStyled>
+			<Button v-if="errorDetails" size="xl" class="!w-full" @click="copyErrorInformation">
+				<CopyIcon v-if="!infoCopied" class="size-4" />
+				<CheckIcon v-else class="size-4" />
+				Copy Information
+			</Button>
 		</div>
 	</div>
 </template>
@@ -80,7 +78,7 @@ import { CheckIcon, CopyIcon } from '@modrinth/assets'
 import type { Component } from 'vue'
 import { ref } from 'vue'
 
-import ButtonStyled from './ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 
 const infoCopied = ref(false)
 
diff --git a/packages/ui/src/components/base/FloatingPanel.vue b/packages/ui/src/components/base/FloatingPanel.vue
index b4d45d1267..e06aa00761 100644
--- a/packages/ui/src/components/base/FloatingPanel.vue
+++ b/packages/ui/src/components/base/FloatingPanel.vue
@@ -2,7 +2,7 @@
 import { onClickOutside } from '@vueuse/core'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 
-import ButtonStyled from './ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 
 const PANEL_VIEWPORT_MARGIN = 8
 
@@ -249,19 +249,18 @@ defineExpose({
 
 <template>
 	<div class="relative inline-block">
-		<ButtonStyled v-bind="$attrs">
-			<button
-				ref="triggerRef"
-				:class="buttonClass"
-				:disabled="disabled"
-				:aria-expanded="isOpen"
-				aria-haspopup="true"
-				@click="toggle"
-				@keydown="handleTriggerKeydown"
-			>
-				<slot></slot>
-			</button>
-		</ButtonStyled>
+		<Button
+			v-bind="$attrs"
+			ref="triggerRef"
+			:class="buttonClass"
+			:disabled="disabled"
+			:aria-expanded="isOpen"
+			aria-haspopup="true"
+			@click="toggle"
+			@keydown="handleTriggerKeydown"
+		>
+			<slot></slot>
+		</Button>
 
 		<Teleport to="body">
 			<Transition
diff --git a/packages/ui/src/components/base/I18nDebugPanel.vue b/packages/ui/src/components/base/I18nDebugPanel.vue
index 3d00bf6240..e57e1e05f0 100644
--- a/packages/ui/src/components/base/I18nDebugPanel.vue
+++ b/packages/ui/src/components/base/I18nDebugPanel.vue
@@ -10,8 +10,9 @@ import {
 } from '@modrinth/assets'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
+import { IconButton } from '#ui/components/base/buttons'
+
 import { injectI18nDebug } from '../../composables/i18n-debug'
-import ButtonStyled from './ButtonStyled.vue'
 import StyledInput from './StyledInput.vue'
 
 const debugContext = injectI18nDebug()
@@ -295,37 +296,41 @@ const listMaxHeight = computed(() => `${panelHeight.value - 120}px`)
 
 					<!-- Toolbar -->
 					<div class="ml-auto flex items-center gap-0.5">
-						<ButtonStyled circular type="transparent">
-							<button
-								v-tooltip="
-									debugContext?.keyReveal.value ? 'Hide keys inline' : 'Reveal keys inline'
-								"
-								@click="toggleKeyReveal"
-							>
-								<component :is="debugContext?.keyReveal.value ? EyeOffIcon : EyeIcon" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular type="transparent">
-							<button v-tooltip="'Toggle CSS debug overlay'" @click="toggleOverlay">
-								<ScanEyeIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="debugContext?.keyReveal.value ? 'Hide keys inline' : 'Reveal keys inline'"
+							type="quiet"
+							:label="debugContext?.keyReveal.value ? 'Hide keys inline' : 'Reveal keys inline'"
+							@click="toggleKeyReveal"
+						>
+							<component :is="debugContext?.keyReveal.value ? EyeOffIcon : EyeIcon" />
+						</IconButton>
+						<IconButton
+							v-tooltip="'Toggle CSS debug overlay'"
+							type="quiet"
+							:label="'Toggle CSS debug overlay'"
+							@click="toggleOverlay"
+						>
+							<ScanEyeIcon />
+						</IconButton>
 
 						<div class="mx-0.5 h-4 w-px bg-surface-5/60" />
 
-						<ButtonStyled circular type="transparent">
-							<button
-								v-tooltip="minimized ? 'Expand panel' : 'Minimize panel'"
-								@click="minimized = !minimized"
-							>
-								<component :is="minimized ? MaximizeIcon : MinusIcon" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular type="transparent">
-							<button v-tooltip="'Close inspector'" @click="closePanel">
-								<XIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="minimized ? 'Expand panel' : 'Minimize panel'"
+							type="quiet"
+							:label="minimized ? 'Expand panel' : 'Minimize panel'"
+							@click="minimized = !minimized"
+						>
+							<component :is="minimized ? MaximizeIcon : MinusIcon" />
+						</IconButton>
+						<IconButton
+							v-tooltip="'Close inspector'"
+							type="quiet"
+							:label="'Close inspector'"
+							@click="closePanel"
+						>
+							<XIcon />
+						</IconButton>
 					</div>
 				</div>
 
diff --git a/packages/ui/src/components/base/IconSelect.vue b/packages/ui/src/components/base/IconSelect.vue
index 61b0231753..aec022db6d 100644
--- a/packages/ui/src/components/base/IconSelect.vue
+++ b/packages/ui/src/components/base/IconSelect.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { EditIcon, TrashIcon, UploadIcon } from '@modrinth/assets'
 
+import { TeleportOverflowMenu } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
-import { Avatar, OverflowMenu } from '../index'
+import { Avatar } from '../index'
 
 const { formatMessage } = useVIntl()
 
@@ -43,17 +45,22 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<OverflowMenu
-		v-tooltip="formatMessage(messages.editIcon)"
-		class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+	<TeleportOverflowMenu
+		:label="formatMessage(messages.editIcon)"
+		:tooltip="formatMessage(messages.editIcon)"
+		:icon-only="false"
+		type="quiet"
+		interaction="none"
+		class="m-0 !h-auto cursor-pointer appearance-none border-none bg-transparent !p-0 transition-transform group-active:scale-95"
 		:options="[
 			{
 				id: 'select',
+				label: icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon),
 				action: () => emit('select'),
 			},
 			{
 				id: 'remove',
-				color: 'danger',
+				label: formatMessage(messages.removeIcon),
 				action: () => emit('remove'),
 				shown: !!icon,
 			},
@@ -72,5 +79,5 @@ const messages = defineMessages({
 			{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
 		</template>
 		<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-	</OverflowMenu>
+	</TeleportOverflowMenu>
 </template>
diff --git a/packages/ui/src/components/base/JoinedButtons.vue b/packages/ui/src/components/base/JoinedButtons.vue
deleted file mode 100644
index 44ffb3a424..0000000000
--- a/packages/ui/src/components/base/JoinedButtons.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-	<div class="joined-buttons">
-		<ButtonStyled :color="color" :size="size">
-			<button
-				v-tooltip="primaryTooltip"
-				:class="{ 'joined-buttons__primary--muted': primaryMuted }"
-				:disabled="primaryDisabledResolved"
-				@click="handlePrimaryAction"
-			>
-				<component :is="primaryAction.icon" v-if="primaryAction.icon" aria-hidden="true" />
-				{{ primaryAction.label }}
-			</button>
-		</ButtonStyled>
-		<ButtonStyled v-if="dropdownActions.length > 0" :color="color" :size="size">
-			<OverflowMenu
-				class="btn-dropdown-animation !w-10"
-				:options="dropdownOptions"
-				:disabled="dropdownDisabledResolved"
-				:tooltip="dropdownTooltip"
-			>
-				<DropdownIcon />
-				<template v-for="action in dropdownActions" :key="action.id" #[action.id]>
-					<component :is="action.icon" v-if="action.icon" aria-hidden="true" />
-					{{ action.label }}
-				</template>
-			</OverflowMenu>
-		</ButtonStyled>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { DropdownIcon } from '@modrinth/assets'
-import type { Component } from 'vue'
-import { computed } from 'vue'
-
-import ButtonStyled from './ButtonStyled.vue'
-import OverflowMenu from './OverflowMenu.vue'
-
-// TODO: This should be moved to a shared types file.
-type Colors = 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
-
-export interface JoinedButtonAction {
-	id: string
-	label: string
-	icon?: Component
-	action: () => void
-	color?: Colors
-	hoverFilled?: boolean
-}
-
-interface Props {
-	actions: JoinedButtonAction[]
-	color?: Colors
-	size?: 'standard' | 'large' | 'small'
-	disabled?: boolean
-	primaryDisabled?: boolean
-	dropdownDisabled?: boolean
-	primaryMuted?: boolean
-	primaryTooltip?: string
-	dropdownTooltip?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	color: 'standard',
-	size: 'standard',
-	disabled: false,
-	primaryDisabled: undefined,
-	dropdownDisabled: undefined,
-	primaryMuted: false,
-	primaryTooltip: undefined,
-	dropdownTooltip: undefined,
-})
-
-const primaryDisabledResolved = computed(() => props.primaryDisabled ?? props.disabled)
-const dropdownDisabledResolved = computed(() => props.dropdownDisabled ?? props.disabled)
-
-const primaryAction = computed(() => props.actions[0])
-
-const dropdownActions = computed(() => props.actions.slice(1))
-
-const colorMap: Record<
-	Colors,
-	| 'red'
-	| 'orange'
-	| 'green'
-	| 'blue'
-	| 'purple'
-	| 'highlight'
-	| 'primary'
-	| 'danger'
-	| 'secondary'
-	| undefined
-> = {
-	standard: 'secondary',
-	brand: 'primary',
-	red: 'red',
-	orange: 'orange',
-	green: 'green',
-	blue: 'blue',
-	purple: 'purple',
-}
-
-const dropdownOptions = computed(() =>
-	dropdownActions.value.map((action) => ({
-		id: action.id,
-		color: action.color ? colorMap[action.color] : undefined,
-		action: action.action,
-		hoverFilled: action.hoverFilled ?? true,
-	})),
-)
-
-function handlePrimaryAction() {
-	if (primaryAction.value && !primaryDisabledResolved.value) {
-		primaryAction.value.action()
-	}
-}
-</script>
-
-<style scoped>
-.joined-buttons {
-	display: flex;
-	align-items: center;
-}
-
-.joined-buttons > :deep(.btn) {
-	border-radius: 0;
-}
-
-.joined-buttons > :deep(.btn:first-child) {
-	border-top-left-radius: var(--radius-md);
-	border-bottom-left-radius: var(--radius-md);
-}
-
-.joined-buttons > :deep(.btn:last-child) {
-	border-top-right-radius: var(--radius-md);
-	border-bottom-right-radius: var(--radius-md);
-	margin-left: -1px;
-}
-
-.joined-buttons > :deep(.btn:not(:last-child)) {
-	border-right: none;
-}
-
-.btn-dropdown-animation {
-	padding: 0.5rem !important;
-}
-
-.joined-buttons__primary--muted {
-	opacity: 0.6;
-}
-</style>
diff --git a/packages/ui/src/components/base/ManySelect.vue b/packages/ui/src/components/base/ManySelect.vue
index ed495af309..b3c927d039 100644
--- a/packages/ui/src/components/base/ManySelect.vue
+++ b/packages/ui/src/components/base/ManySelect.vue
@@ -1,23 +1,19 @@
 <template>
-	<ButtonStyled>
-		<PopoutMenu
-			v-if="options.length > 1 || showAlways"
-			v-bind="$attrs"
-			:disabled="disabled"
-			:position="position"
-			:direction="direction"
-			:dropdown-id="dropdownId"
-			:dropdown-class="dropdownClass"
-			:tooltip="tooltip"
-			@open="
-				() => {
-					searchQuery = ''
-				}
-			"
-		>
+	<TeleportPopoutMenu
+		v-if="options.length > 1 || showAlways"
+		v-bind="$attrs"
+		:disabled="disabled"
+		:label="tooltip || 'Select options'"
+		:tooltip="tooltip"
+		placement="bottom-start"
+		@open="searchQuery = ''"
+	>
+		<template #trigger>
 			<slot />
 			<DropdownIcon class="h-5 w-5 text-secondary" />
-			<template #menu>
+		</template>
+		<template #panel>
+			<div :class="dropdownClass">
 				<StyledInput
 					v-if="search"
 					id="search-input"
@@ -37,10 +33,9 @@
 					<Button
 						v-for="(option, index) in filteredOptions"
 						:key="`option-${index}`"
-						:transparent="!manyValues.includes(option)"
-						:action="() => toggleOption(option)"
+						:type="manyValues.includes(option) ? 'base' : 'quiet'"
 						class="!w-full"
-						:color="manyValues.includes(option) ? 'secondary' : 'default'"
+						@click="toggleOption(option)"
 					>
 						<slot name="option" :option="option">{{ getOptionLabel(option) }}</slot>
 						<CheckIcon
@@ -53,10 +48,9 @@
 					<Button
 						v-for="(option, index) in filteredOptions"
 						:key="`option-${index}`"
-						:transparent="!manyValues.includes(option)"
-						:action="() => toggleOption(option)"
+						:type="manyValues.includes(option) ? 'base' : 'quiet'"
 						class="!w-full"
-						:color="manyValues.includes(option) ? 'secondary' : 'default'"
+						@click="toggleOption(option)"
 					>
 						<slot name="option" :option="option">{{ getOptionLabel(option) }}</slot>
 						<CheckIcon
@@ -66,16 +60,17 @@
 					</Button>
 				</div>
 				<slot name="footer" />
-			</template>
-		</PopoutMenu>
-	</ButtonStyled>
+			</div>
+		</template>
+	</TeleportPopoutMenu>
 </template>
 <script setup lang="ts">
 import { CheckIcon, DropdownIcon, SearchIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
-import { Button, ButtonStyled, PopoutMenu, StyledInput } from '../index'
+import { Button, TeleportPopoutMenu } from './buttons'
 import ScrollablePanel from './ScrollablePanel.vue'
+import StyledInput from './StyledInput.vue'
 
 type Option = string | number | object
 
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 87e932b62b..707341cbf2 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -46,24 +46,22 @@
 				/>
 			</div>
 			<div class="flex gap-2 justify-end mt-4">
-				<ButtonStyled type="outlined">
-					<button @click="() => linkModal?.hide()">
-						<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button
-						:disabled="!!linkValidationErrorMessage || !linkUrl"
-						@click="
-							() => {
-								if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
-								linkModal?.hide()
-							}
-						"
-					>
-						<PlusIcon /> {{ formatMessage(messages.insertButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="() => linkModal?.hide()">
+					<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="!!linkValidationErrorMessage || !linkUrl"
+					@click="
+						() => {
+							if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
+							linkModal?.hide()
+						}
+					"
+				>
+					<PlusIcon /> {{ formatMessage(messages.insertButton) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -144,24 +142,22 @@
 				/>
 			</div>
 			<div class="flex gap-2 justify-end mt-4">
-				<ButtonStyled type="outlined">
-					<button @click="() => imageModal?.hide()">
-						<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button
-						:disabled="!canInsertImage"
-						@click="
-							() => {
-								if (editor) markdownCommands.replaceSelection(editor, imageMarkdown)
-								imageModal?.hide()
-							}
-						"
-					>
-						<PlusIcon /> {{ formatMessage(messages.insertButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="() => imageModal?.hide()">
+					<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="!canInsertImage"
+					@click="
+						() => {
+							if (editor) markdownCommands.replaceSelection(editor, imageMarkdown)
+							imageModal?.hide()
+						}
+					"
+				>
+					<PlusIcon /> {{ formatMessage(messages.insertButton) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -204,24 +200,22 @@
 				/>
 			</div>
 			<div class="flex gap-2 justify-end mt-4">
-				<ButtonStyled type="outlined">
-					<button @click="() => videoModal?.hide()">
-						<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button
-						:disabled="!!linkValidationErrorMessage || !linkUrl"
-						@click="
-							() => {
-								if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
-								videoModal?.hide()
-							}
-						"
-					>
-						<PlusIcon /> {{ formatMessage(messages.insertButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="() => videoModal?.hide()">
+					<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="!!linkValidationErrorMessage || !linkUrl"
+					@click="
+						() => {
+							if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
+							videoModal?.hide()
+						}
+					"
+				>
+					<PlusIcon /> {{ formatMessage(messages.insertButton) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -235,17 +229,16 @@
 					>
 						<div class="divider"></div>
 						<template v-for="button in buttonGroup.buttons" :key="button.label.id">
-							<ButtonStyled circular>
-								<button
-									v-tooltip="formatMessage(button.label)"
-									:aria-label="formatMessage(button.label)"
-									:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
-									:disabled="previewMode || disabled"
-									@click="() => button.action(editor)"
-								>
-									<component :is="button.icon" />
-								</button>
-							</ButtonStyled>
+							<IconButton
+								v-tooltip="formatMessage(button.label)"
+								:label="formatMessage(button.label)"
+								size="sm"
+								:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
+								:disabled="previewMode || disabled"
+								@click="() => button.action(editor)"
+							>
+								<component :is="button.icon" />
+							</IconButton>
 						</template>
 					</template>
 				</div>
@@ -333,10 +326,11 @@ import { markdownCommands, modrinthMarkdownEditorKeymap } from '@modrinth/utils/
 import { renderHighlightedString } from '@modrinth/utils/highlightjs'
 import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 
+import { Button, IconButton } from '#ui/components/base/buttons'
+
 import { defineMessages, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages.ts'
 import NewModal from '../modal/NewModal.vue'
-import ButtonStyled from './ButtonStyled.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
 import IntlFormatted from './IntlFormatted.vue'
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index 25a19b715d..f765bd90e6 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -1,17 +1,21 @@
 <template>
 	<div ref="containerRef" class="relative inline-block" :class="fitContent ? 'w-auto' : 'w-full'">
-		<span
+		<component
+			:is="triggerComponent"
 			ref="triggerRef"
-			role="button"
-			tabindex="0"
-			class="relative flex items-center overflow-hidden rounded-xl bg-surface-4 px-4 py-1 text-left transition-all duration-200"
+			v-bind="triggerButtonProps"
+			:role="triggerType ? undefined : 'button'"
+			:tabindex="triggerType ? undefined : 0"
 			:class="[
+				triggerType
+					? 'overflow-hidden text-left'
+					: 'relative flex items-center overflow-hidden rounded-xl bg-surface-4 px-4 py-1 text-left transition-all duration-200',
 				fitContent ? 'w-auto max-w-full' : 'w-full',
 				triggerClass,
 				{
 					'z-[9999]': isOpen,
-					'cursor-not-allowed opacity-50': disabled,
-					'cursor-pointer hover:brightness-125 active:brightness-125': !disabled,
+					'cursor-not-allowed opacity-50': disabled && !triggerType,
+					'cursor-pointer hover:brightness-125 active:brightness-125': !disabled && !triggerType,
 				},
 			]"
 			:aria-expanded="isOpen"
@@ -39,7 +43,8 @@
 					<span
 						v-for="tag in visibleTags"
 						:key="String(tag.value)"
-						class="inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2 py-1 text-sm font-medium text-primary transition-all hover:brightness-[115%]"
+						class="inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2 py-1 text-sm font-medium transition-all hover:brightness-[115%]"
+						:class="triggerType ? 'text-inherit' : 'text-primary'"
 						@click.stop="removeTag(tag.value)"
 					>
 						{{ tag.label }}
@@ -100,7 +105,7 @@
 					/>
 				</div>
 			</template>
-		</span>
+		</component>
 
 		<Teleport to="#teleports">
 			<Transition
@@ -415,6 +420,13 @@ import {
 } from 'vue'
 
 import { useVirtualScroll } from '../../composables/virtual-scroll'
+import ButtonFrame from './buttons/ButtonFrame.vue'
+import type {
+	ButtonElementHandle,
+	ButtonInteraction,
+	ButtonSize,
+	ButtonType,
+} from './buttons/types'
 import StyledInput from './StyledInput.vue'
 
 export interface MultiSelectOption<T> {
@@ -492,6 +504,10 @@ const props = withDefaults(
 		clearable?: boolean
 		maxHeight?: number
 		triggerClass?: string
+		/** Apply the shared button frame to compact, button-owned multiselect triggers. */
+		triggerType?: ButtonType
+		triggerSize?: ButtonSize
+		triggerInteraction?: ButtonInteraction
 		fitContent?: boolean
 		/** Width for the teleported dropdown; defaults to the trigger width */
 		dropdownWidth?: string | number
@@ -517,6 +533,8 @@ const props = withDefaults(
 		showChevron: true,
 		clearable: true,
 		maxHeight: DEFAULT_MAX_HEIGHT,
+		triggerSize: 'md',
+		triggerInteraction: 'surface',
 		fitContent: false,
 		noOptionsMessage: 'No options available',
 		noResultsMessage: 'No results found',
@@ -538,11 +556,29 @@ const emit = defineEmits<{
 }>()
 
 const slots = useSlots()
+const triggerComponent = computed(() => (props.triggerType ? ButtonFrame : 'span'))
+const triggerButtonProps = computed(() =>
+	props.triggerType
+		? {
+				as: 'button' as const,
+				nativeType: 'button' as const,
+				type: props.triggerType,
+				size: props.triggerSize,
+				interaction: props.triggerInteraction,
+				disabled: props.disabled,
+			}
+		: {},
+)
 const isOpen = ref(false)
 const searchQuery = ref('')
 const focusedIndex = ref(-1)
 const containerRef = ref<HTMLElement>()
-const triggerRef = ref<HTMLElement>()
+const triggerRef = ref<HTMLElement | ButtonElementHandle>()
+const triggerElement = computed<HTMLElement | undefined>(() => {
+	const trigger = triggerRef.value
+	if (!trigger) return undefined
+	return 'element' in trigger ? (trigger.element ?? undefined) : trigger
+})
 const dropdownRef = ref<HTMLElement>()
 const optionsScrollbarRef = ref<HTMLElement>()
 const optionsContainerRef = ref<HTMLElement>()
@@ -944,11 +980,13 @@ function resolveCssSize(size: string | number | undefined): string | undefined {
 }
 
 async function updateDropdownPosition() {
-	if (!triggerRef.value || !dropdownRef.value) return
-
 	await nextTick()
 
-	const triggerRect = triggerRef.value.getBoundingClientRect()
+	const trigger = triggerElement.value
+	const dropdown = dropdownRef.value
+	if (!trigger || !dropdown) return
+
+	const triggerRect = trigger.getBoundingClientRect()
 	const width = resolveDropdownWidth(triggerRect.width)
 	const minWidth = resolveCssSize(props.dropdownMinWidth) ?? '0px'
 
@@ -960,7 +998,7 @@ async function updateDropdownPosition() {
 
 	await nextTick()
 
-	const dropdownRect = dropdownRef.value.getBoundingClientRect()
+	const dropdownRect = dropdown.getBoundingClientRect()
 	const viewport = getViewportRect()
 
 	const direction = determineOpenDirection(triggerRect, dropdownRect, viewport)
@@ -1064,7 +1102,7 @@ function closeDropdown() {
 	emit('close')
 
 	nextTick(() => {
-		triggerRef.value?.focus()
+		triggerElement.value?.focus()
 	})
 }
 
@@ -1355,7 +1393,7 @@ onClickOutside(
 	() => {
 		closeDropdown()
 	},
-	{ ignore: [triggerRef, containerRef, '.v-popper__popper'] },
+	{ ignore: [triggerElement, containerRef, '.v-popper__popper'] },
 )
 
 onMounted(() => {
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index e6c3a06718..a20a3a68c3 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -72,46 +72,48 @@
 				class="flex flex-col justify-end gap-2 sm:flex-row"
 				:class="leftButtonConfig || rightButtonConfig ? 'mt-4' : ''"
 			>
-				<ButtonStyled v-if="leftButtonConfig" type="outlined">
-					<button
-						v-tooltip="leftButtonConfig.tooltip"
-						:class="leftButtonConfig.buttonClass"
-						:disabled="leftButtonConfig.disabled"
-						@click="leftButtonConfig.onClick"
-					>
-						<component :is="leftButtonConfig.icon" />
-						{{ leftButtonConfig.label }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="rightButtonConfig" :color="rightButtonConfig.color">
-					<button
-						v-tooltip="rightButtonConfig.tooltip"
-						class="!shadow-none"
-						:class="rightButtonConfig.buttonClass"
-						:disabled="rightButtonConfig.disabled || rightButtonConfig.loading"
-						@click="rightButtonConfig.onClick"
-					>
-						<SpinnerIcon
-							v-if="rightButtonConfig.loading && rightButtonConfig.iconPosition === 'before'"
-							class="animate-spin"
-						/>
-						<component
-							:is="rightButtonConfig.icon"
-							v-else-if="rightButtonConfig.iconPosition === 'before'"
-							:class="rightButtonConfig.iconClass"
-						/>
-						{{ rightButtonConfig.label }}
-						<SpinnerIcon
-							v-if="rightButtonConfig.loading && rightButtonConfig.iconPosition === 'after'"
-							class="animate-spin"
-						/>
-						<component
-							:is="rightButtonConfig.icon"
-							v-else-if="rightButtonConfig.iconPosition === 'after'"
-							:class="rightButtonConfig.iconClass"
-						/>
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="leftButtonConfig"
+					v-tooltip="leftButtonConfig.tooltip"
+					type="outlined"
+					:class="leftButtonConfig.buttonClass"
+					:disabled="leftButtonConfig.disabled"
+					@click="leftButtonConfig.onClick"
+				>
+					<component :is="leftButtonConfig.icon" />
+					{{ leftButtonConfig.label }}
+				</Button>
+				<Button
+					v-if="rightButtonConfig"
+					v-tooltip="rightButtonConfig.tooltip"
+					:type="
+						rightButtonConfig.color && rightButtonConfig.color !== 'standard' ? 'colored' : 'base'
+					"
+					:color="rightButtonConfig.color === 'standard' ? undefined : rightButtonConfig.color"
+					:class="rightButtonConfig.buttonClass"
+					:disabled="rightButtonConfig.disabled || rightButtonConfig.loading"
+					@click="rightButtonConfig.onClick"
+				>
+					<SpinnerIcon
+						v-if="rightButtonConfig.loading && rightButtonConfig.iconPosition === 'before'"
+						class="animate-spin"
+					/>
+					<component
+						:is="rightButtonConfig.icon"
+						v-else-if="rightButtonConfig.iconPosition === 'before'"
+						:class="rightButtonConfig.iconClass"
+					/>
+					{{ rightButtonConfig.label }}
+					<SpinnerIcon
+						v-if="rightButtonConfig.loading && rightButtonConfig.iconPosition === 'after'"
+						class="animate-spin"
+					/>
+					<component
+						:is="rightButtonConfig.icon"
+						v-else-if="rightButtonConfig.iconPosition === 'after'"
+						:class="rightButtonConfig.iconClass"
+					/>
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -119,15 +121,18 @@
 
 <script lang="ts">
 import { ChevronRightIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { NewModal } from '@modrinth/ui'
 import type { Component } from 'vue'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
+import type { ButtonColor } from '#ui/components/base/buttons'
+import { Button } from '#ui/components/base/buttons'
+
 export interface StageButtonConfig {
 	label?: string
 	icon?: Component | null
 	iconPosition?: 'before' | 'after'
-	color?: InstanceType<typeof ButtonStyled>['$props']['color']
+	color?: ButtonColor | 'standard'
 	disabled?: boolean
 	loading?: boolean
 	tooltip?: string
diff --git a/packages/ui/src/components/base/OverflowMenu.vue b/packages/ui/src/components/base/OverflowMenu.vue
deleted file mode 100644
index a9e115917c..0000000000
--- a/packages/ui/src/components/base/OverflowMenu.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-	<PopoutMenu
-		ref="dropdown"
-		v-bind="$attrs"
-		:disabled="disabled"
-		:dropdown-id="dropdownId"
-		:tooltip="tooltip"
-		:placement="placement"
-	>
-		<slot></slot>
-		<template #menu>
-			<slot name="menu-header" />
-			<template v-for="(option, index) in options.filter((x) => x.shown === undefined || x.shown)">
-				<div
-					v-if="isDivider(option)"
-					:key="`divider-${index}`"
-					class="h-px mx-[0.625rem] my-2 bg-surface-5"
-				></div>
-				<Button
-					v-else
-					:key="`option-${option.id}`"
-					v-tooltip="option.tooltip"
-					:color="option.color ? option.color : 'default'"
-					:hover-filled="option.hoverFilled"
-					:hover-filled-only="option.hoverFilledOnly"
-					transparent
-					:v-close-popper="!option.remainOnClick"
-					:action="
-						option.action
-							? (event: MouseEvent) => {
-									option.action?.(event)
-									if (!option.remainOnClick) {
-										close()
-									}
-								}
-							: undefined
-					"
-					:link="option.link ? option.link : undefined"
-					:download="option.download ? option.download : undefined"
-					:external="option.external ? option.external : false"
-					:disabled="option.disabled"
-					@click="
-						() => {
-							if (option.link && !option.remainOnClick) {
-								close()
-							}
-						}
-					"
-				>
-					<template v-if="!$slots[option.id]">
-						<component :is="option.icon" v-if="option.icon" class="size-5" />
-						{{ option.id }}
-					</template>
-					<slot :name="option.id"></slot>
-				</Button>
-			</template>
-		</template>
-	</PopoutMenu>
-</template>
-
-<script setup lang="ts">
-import { type Component, type Ref, ref } from 'vue'
-
-import Button from './Button.vue'
-import PopoutMenu from './PopoutMenu.vue'
-
-interface BaseOption {
-	shown?: boolean
-}
-
-interface Divider extends BaseOption {
-	divider?: boolean
-}
-
-interface Item extends BaseOption {
-	id: string
-	icon?: Component
-	action?: (event?: MouseEvent) => void
-	link?: string
-	download?: string
-	external?: boolean
-	color?:
-		| 'primary'
-		| 'danger'
-		| 'secondary'
-		| 'highlight'
-		| 'red'
-		| 'orange'
-		| 'green'
-		| 'blue'
-		| 'purple'
-	hoverFilled?: boolean
-	hoverFilledOnly?: boolean
-	remainOnClick?: boolean
-	disabled?: boolean
-	tooltip?: string
-}
-
-export type Option = Divider | Item
-
-withDefaults(
-	defineProps<{
-		options: Option[]
-		disabled?: boolean
-		dropdownId?: string
-		tooltip?: string
-		placement?: string
-	}>(),
-	{
-		options: () => [],
-		disabled: false,
-		dropdownId: undefined,
-		tooltip: undefined,
-		placement: 'bottom-end',
-	},
-)
-
-defineOptions({
-	inheritAttrs: false,
-})
-
-const dropdown: Ref<InstanceType<typeof PopoutMenu> | null> = ref(null)
-
-const close = () => {
-	dropdown.value?.hide()
-}
-
-const open = () => {
-	dropdown.value?.show()
-}
-
-function isDivider(option: BaseOption): option is Divider {
-	return 'divider' in option
-}
-
-defineExpose({ open, close })
-</script>
-
-<style lang="scss" scoped>
-.btn {
-	white-space: nowrap;
-	width: 100%;
-	box-shadow: none;
-	--text-color: var(--color-base);
-	--background-color: transparent;
-	justify-content: flex-start;
-	padding: 0.55rem 0.625rem;
-}
-</style>
diff --git a/packages/ui/src/components/base/Pagination.vue b/packages/ui/src/components/base/Pagination.vue
index ba1eae2cda..f7a6e08cb5 100644
--- a/packages/ui/src/components/base/Pagination.vue
+++ b/packages/ui/src/components/base/Pagination.vue
@@ -1,18 +1,20 @@
 <template>
 	<div v-if="count > 1" class="flex items-center gap-1">
-		<ButtonStyled v-if="page > 1" circular type="transparent">
-			<a
+		<template v-if="page > 1">
+			<ButtonLink
 				v-if="linkFunction"
 				aria-label="Previous Page"
 				:href="linkFunction(page - 1)"
+				type="quiet"
+				class="!w-9 !px-0 !rounded-full"
 				@click.prevent="switchPage(page - 1)"
 			>
-				<ChevronLeftIcon />
-			</a>
-			<button v-else aria-label="Previous Page" @click="switchPage(page - 1)">
-				<ChevronLeftIcon />
-			</button>
-		</ButtonStyled>
+				<ChevronLeftIcon aria-hidden="true" />
+			</ButtonLink>
+			<IconButton v-else label="Previous Page" type="quiet" @click="switchPage(page - 1)">
+				<ChevronLeftIcon aria-hidden="true" />
+			</IconButton>
+		</template>
 		<div
 			v-for="(item, index) in pages"
 			:key="'page-' + item + '-' + index"
@@ -25,50 +27,55 @@
 			<div v-if="item === '-'" class="rotate-90 grid place-content-center">
 				<EllipsisVerticalIcon />
 			</div>
-			<ButtonStyled
-				v-else
-				circular
-				:color="page === item ? 'brand' : 'standard'"
-				:type="page === item ? 'highlight' : 'transparent'"
-			>
-				<a
+			<template v-else>
+				<ButtonLink
 					v-if="linkFunction"
 					:href="linkFunction(item)"
-					:class="page === item ? '!text-brand' : ''"
+					type="quiet"
+					:color="page === item ? 'brand' : undefined"
+					:interaction="page === item ? 'filled' : undefined"
+					:aria-current="page === item ? 'page' : undefined"
+					:class="['!min-w-9 !rounded-full', page === item ? '!bg-brand-highlight' : '']"
 					@click.prevent="page !== item ? switchPage(item) : null"
 				>
 					{{ item }}
-				</a>
-				<button
+				</ButtonLink>
+				<Button
 					v-else
-					:class="page === item ? '!text-brand' : ''"
+					type="quiet"
+					:color="page === item ? 'brand' : undefined"
+					:interaction="page === item ? 'filled' : undefined"
+					:aria-current="page === item ? 'page' : undefined"
+					:class="['!min-w-9 !rounded-full', page === item ? '!bg-brand-highlight' : '']"
 					@click="page !== item ? switchPage(item) : null"
 				>
 					{{ item }}
-				</button>
-			</ButtonStyled>
+				</Button>
+			</template>
 		</div>
 
-		<ButtonStyled v-if="page !== pages[pages.length - 1]" circular type="transparent">
-			<a
+		<template v-if="page !== pages[pages.length - 1]">
+			<ButtonLink
 				v-if="linkFunction"
 				aria-label="Next Page"
 				:href="linkFunction(page + 1)"
+				type="quiet"
+				class="!w-9 !px-0 !rounded-full"
 				@click.prevent="switchPage(page + 1)"
 			>
-				<ChevronRightIcon />
-			</a>
-			<button v-else aria-label="Next Page" @click="switchPage(page + 1)">
-				<ChevronRightIcon />
-			</button>
-		</ButtonStyled>
+				<ChevronRightIcon aria-hidden="true" />
+			</ButtonLink>
+			<IconButton v-else label="Next Page" type="quiet" @click="switchPage(page + 1)">
+				<ChevronRightIcon aria-hidden="true" />
+			</IconButton>
+		</template>
 	</div>
 </template>
 <script setup lang="ts">
 import { ChevronLeftIcon, ChevronRightIcon, EllipsisVerticalIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import ButtonStyled from './ButtonStyled.vue'
+import { Button, ButtonLink, IconButton } from './buttons'
 
 const emit = defineEmits<{
 	'switch-page': [page: number]
diff --git a/packages/ui/src/components/base/ServerNotice.vue b/packages/ui/src/components/base/ServerNotice.vue
index baac106111..d748a1d8f0 100644
--- a/packages/ui/src/components/base/ServerNotice.vue
+++ b/packages/ui/src/components/base/ServerNotice.vue
@@ -18,14 +18,15 @@
 			</template>
 		</template>
 		<template #actions>
-			<ButtonStyled v-if="dismissable" :color="NOTICE_TYPE_BTN[level]">
-				<button
-					v-tooltip="formatMessage(messages.dismiss)"
-					@click="() => (preview ? {} : emit('dismiss'))"
-				>
-					<XIcon /> Dismiss
-				</button>
-			</ButtonStyled>
+			<Button
+				v-if="dismissable"
+				v-tooltip="formatMessage(messages.dismiss)"
+				type="colored"
+				:color="NOTICE_TYPE_BTN[level]"
+				@click="() => (preview ? {} : emit('dismiss'))"
+			>
+				<XIcon /> Dismiss
+			</Button>
 		</template>
 		<div v-if="message" class="markdown-body" v-html="renderString(message)" />
 	</Admonition>
@@ -36,9 +37,10 @@ import { XIcon } from '@modrinth/assets'
 import { renderString } from '@modrinth/utils'
 import { computed } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import Admonition from './Admonition.vue'
-import ButtonStyled from './ButtonStyled.vue'
 import CopyCode from './CopyCode.vue'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/components/base/StackedAdmonitions.vue b/packages/ui/src/components/base/StackedAdmonitions.vue
index 27b28cb1a2..85d01d3172 100644
--- a/packages/ui/src/components/base/StackedAdmonitions.vue
+++ b/packages/ui/src/components/base/StackedAdmonitions.vue
@@ -5,8 +5,9 @@ import { ChevronDownIcon, XIcon } from '@modrinth/assets'
 import { AnimatePresence, Motion } from 'motion-v'
 import { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
-import ButtonStyled from './ButtonStyled.vue'
 export type StackedAdmonitionType = 'info' | 'warning' | 'critical' | 'success'
 
 /** Extend this interface to attach arbitrary per-item data consumed in the #item slot. */
@@ -486,32 +487,34 @@ const messages = defineMessages({
 			>
 				<div v-if="hasActionBar" :ref="(el: unknown) => setActionBarRef(el)">
 					<div class="flex items-center justify-between pb-2">
-						<ButtonStyled type="transparent">
-							<button
-								type="button"
-								:aria-expanded="isExpanded"
-								:aria-controls="stackId"
-								@click="toggleExpanded"
+						<Button
+							type="quiet"
+							native-type="button"
+							:aria-expanded="isExpanded"
+							:aria-controls="stackId"
+							@click="toggleExpanded"
+						>
+							<Motion
+								as="span"
+								class="inline-flex"
+								:animate="{ rotate: isExpanded ? 0 : -90 }"
+								:transition="{ type: 'spring', stiffness: 350, damping: 30 }"
 							>
-								<Motion
-									as="span"
-									class="inline-flex"
-									:animate="{ rotate: isExpanded ? 0 : -90 }"
-									:transition="{ type: 'spring', stiffness: 350, damping: 30 }"
-								>
-									<ChevronDownIcon class="h-4 w-4" />
-								</Motion>
-								<slot name="header-label" :count="items.length" :expanded="isExpanded">
-									{{ formatMessage(messages.alertCount, { count: items.length }) }}
-								</slot>
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="dismissAllEnabled" type="transparent">
-							<button type="button" @click="$emit('dismiss-all')">
-								<XIcon class="h-4 w-4" />
-								{{ formatMessage(messages.dismissAll) }}
-							</button>
-						</ButtonStyled>
+								<ChevronDownIcon class="h-4 w-4" />
+							</Motion>
+							<slot name="header-label" :count="items.length" :expanded="isExpanded">
+								{{ formatMessage(messages.alertCount, { count: items.length }) }}
+							</slot>
+						</Button>
+						<Button
+							v-if="dismissAllEnabled"
+							type="quiet"
+							native-type="button"
+							@click="$emit('dismiss-all')"
+						>
+							<XIcon class="h-4 w-4" />
+							{{ formatMessage(messages.dismissAll) }}
+						</Button>
 					</div>
 				</div>
 			</Transition>
diff --git a/packages/ui/src/components/base/TeleportOverflowMenu.vue b/packages/ui/src/components/base/TeleportOverflowMenu.vue
deleted file mode 100644
index 7f1662ebc0..0000000000
--- a/packages/ui/src/components/base/TeleportOverflowMenu.vue
+++ /dev/null
@@ -1,522 +0,0 @@
-<template>
-	<div data-pyro-telepopover-wrapper class="relative">
-		<button
-			ref="triggerRef"
-			v-tooltip="tooltip"
-			class="teleport-overflow-menu-trigger"
-			:class="btnClass"
-			:aria-expanded="isOpen"
-			:aria-haspopup="true"
-			:aria-label="ariaLabel"
-			:disabled="disabled"
-			@mousedown="handleMouseDown"
-			@mouseenter="handleMouseEnter"
-			@mouseleave="handleMouseLeave"
-			@click="toggleMenu"
-		>
-			<slot></slot>
-		</button>
-		<Teleport to="#teleports">
-			<Transition
-				enter-active-class="transition duration-125 ease-out"
-				enter-from-class="transform scale-75 opacity-0"
-				enter-to-class="transform scale-100 opacity-100"
-				leave-active-class="transition duration-125 ease-in"
-				leave-from-class="transform scale-100 opacity-100"
-				leave-to-class="transform scale-75 opacity-0"
-			>
-				<div
-					v-if="isOpen"
-					ref="menuRef"
-					data-pyro-telepopover-root
-					class="fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-x-hidden overflow-y-auto rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
-					:style="menuStyle"
-					role="menu"
-					tabindex="-1"
-					@mousedown.stop
-					@wheel.stop
-					@mouseleave="handleMouseLeave"
-				>
-					<template
-						v-for="(option, index) in filteredOptions"
-						:key="isDivider(option) ? `divider-${index}` : option.id"
-					>
-						<div v-if="isDivider(option)" class="h-px w-full bg-surface-5"></div>
-						<ButtonStyled
-							v-else
-							type="transparent"
-							role="menuitem"
-							:color="optionButtonColor(option)"
-						>
-							<button
-								v-if="typeof option.action === 'function' || option.disabled"
-								:ref="
-									(el) => {
-										if (el) menuItemsRef[index] = el as HTMLElement
-									}
-								"
-								v-tooltip="option.tooltip"
-								:disabled="option.disabled"
-								class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
-								:aria-label="option.ariaLabel ?? option.label ?? option.id"
-								:aria-selected="index === selectedIndex"
-								:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-								@click="(event) => handleItemClick(option, index, event)"
-								@focus="selectedIndex = index"
-								@mouseover="handleMouseOver(index)"
-							>
-								<slot :name="option.id">
-									<component :is="option.icon" v-if="option.icon" class="size-5" />
-									{{ option.label ?? option.id }}
-								</slot>
-							</button>
-							<AutoLink
-								v-else-if="optionLink(option)"
-								:ref="
-									(el) => {
-										if (el) menuItemsRef[index] = el as HTMLElement
-									}
-								"
-								:to="optionLink(option)"
-								:target="option.external ? '_blank' : undefined"
-								:rel="option.external ? 'noopener noreferrer' : undefined"
-								class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
-								:aria-label="option.ariaLabel ?? option.label ?? option.id"
-								:aria-selected="index === selectedIndex"
-								:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-								@click="(event) => handleItemClick(option, index, event)"
-								@focus="selectedIndex = index"
-								@mouseover="handleMouseOver(index)"
-							>
-								<slot :name="option.id">
-									<component :is="option.icon" v-if="option.icon" class="size-5" />
-									{{ option.label ?? option.id }}
-								</slot>
-							</AutoLink>
-							<span v-else>
-								<slot :name="option.id">
-									<component :is="option.icon" v-if="option.icon" class="size-5" />
-									{{ option.label ?? option.id }}
-								</slot>
-							</span>
-						</ButtonStyled>
-					</template>
-				</div>
-			</Transition>
-		</Teleport>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { onClickOutside, useElementHover } from '@vueuse/core'
-import { type Component, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import AutoLink from './AutoLink.vue'
-import ButtonStyled from './ButtonStyled.vue'
-
-type OptionColor =
-	| 'standard'
-	| 'brand'
-	| 'primary'
-	| 'danger'
-	| 'secondary'
-	| 'highlight'
-	| 'red'
-	| 'orange'
-	| 'green'
-	| 'blue'
-	| 'purple'
-
-export interface Option {
-	id: string
-	label?: string
-	icon?: Component
-	action?: ((event?: MouseEvent) => void) | string
-	link?: string
-	external?: boolean
-	shown?: boolean
-	color?: OptionColor
-	disabled?: boolean
-	tooltip?: string
-	ariaLabel?: string
-	remainOnClick?: boolean
-}
-
-export type Divider = {
-	divider?: boolean
-	shown?: boolean
-}
-
-export type Item = Option | Divider
-
-function isDivider(item: Item): item is Divider {
-	return !!(item as Divider).divider
-}
-
-const props = withDefaults(
-	defineProps<{
-		options: Item[]
-		hoverable?: boolean
-		btnClass?: string | string[] | Record<string, boolean>
-		disabled?: boolean
-		tooltip?: string
-		ariaLabel?: string
-		placement?: 'right' | 'center'
-	}>(),
-	{
-		hoverable: false,
-		btnClass: undefined,
-		disabled: false,
-		tooltip: undefined,
-		ariaLabel: undefined,
-		placement: 'right',
-	},
-)
-
-const emit = defineEmits<{
-	select: [option: Option]
-	open: []
-}>()
-
-const isOpen = ref(false)
-const selectedIndex = ref(-1)
-const menuRef = ref<HTMLElement | null>(null)
-const triggerRef = ref<HTMLElement | null>(null)
-const isMouseDown = ref(false)
-const typeAheadBuffer = ref('')
-const typeAheadTimeout = ref<number | null>(null)
-const menuItemsRef = ref<HTMLElement[]>([])
-
-const hoveringTrigger = useElementHover(triggerRef)
-const hoveringMenu = useElementHover(menuRef)
-
-const hovering = computed(() => hoveringTrigger.value || hoveringMenu.value)
-
-const menuStyle = ref<Record<string, string>>({
-	top: '-9999px',
-	left: '-9999px',
-})
-
-const filteredOptions = computed(() => props.options.filter((option) => option.shown !== false))
-
-const calculateMenuPosition = () => {
-	if (!triggerRef.value || !menuRef.value) return null
-
-	const triggerRect = triggerRef.value.getBoundingClientRect()
-	// offsetWidth is not affected by CSS transforms (unlike getBoundingClientRect)
-	// scrollHeight gives the full content height regardless of any maxHeight constraint,
-	// preventing a feedback loop where clamped offsetHeight makes it look like the menu fits
-	const menuWidth = menuRef.value.offsetWidth
-	const menuHeight = menuRef.value.scrollHeight
-	const margin = 8
-
-	let top: number
-	let maxHeight: number | null = null
-
-	const spaceBelow = window.innerHeight - triggerRect.bottom - margin
-	const spaceAbove = triggerRect.top - margin
-
-	if (menuHeight <= spaceBelow) {
-		top = triggerRect.bottom + margin
-	} else if (menuHeight <= spaceAbove) {
-		top = triggerRect.top - menuHeight - margin
-	} else if (spaceBelow >= spaceAbove) {
-		top = triggerRect.bottom + margin
-		maxHeight = spaceBelow
-	} else {
-		maxHeight = spaceAbove
-		top = triggerRect.top - maxHeight - margin
-	}
-
-	const preferredLeft =
-		props.placement === 'center'
-			? triggerRect.left + triggerRect.width / 2 - menuWidth / 2
-			: triggerRect.right - menuWidth
-	const left = Math.max(margin, Math.min(preferredLeft, window.innerWidth - menuWidth - margin))
-
-	return {
-		top: `${top}px`,
-		left: `${left}px`,
-		...(maxHeight !== null ? { maxHeight: `${maxHeight}px` } : {}),
-	}
-}
-
-const toggleMenu = (event: MouseEvent) => {
-	event.stopPropagation()
-	if (props.disabled) return
-	if (!props.hoverable) {
-		if (isOpen.value) {
-			closeMenu()
-		} else {
-			openMenu()
-		}
-	}
-}
-
-const openMenu = () => {
-	if (props.disabled) return
-	menuStyle.value = { top: '-9999px', left: '-9999px' }
-	isOpen.value = true
-	emit('open')
-	// nextTick lets Vue render the element, then requestAnimationFrame waits for the
-	// browser to complete layout so offsetWidth/offsetHeight are real values.
-	nextTick(() =>
-		requestAnimationFrame(() => {
-			const pos = calculateMenuPosition()
-			if (pos) menuStyle.value = pos
-			document.addEventListener('mousemove', handleMouseMove)
-			focusFirstMenuItem()
-		}),
-	)
-}
-
-const closeMenu = () => {
-	isOpen.value = false
-	selectedIndex.value = -1
-	document.removeEventListener('mousemove', handleMouseMove)
-}
-
-const selectOption = (option: Option, event?: MouseEvent) => {
-	emit('select', option)
-	if (typeof option.action === 'function') {
-		option.action(event)
-	}
-	if (!option.remainOnClick) {
-		closeMenu()
-	}
-}
-
-const handleMouseDown = (event: MouseEvent) => {
-	if (props.disabled) return
-	event.preventDefault()
-	isMouseDown.value = true
-}
-
-const handleMouseEnter = () => {
-	if (props.hoverable) {
-		openMenu()
-	}
-}
-
-const handleMouseLeave = () => {
-	if (props.hoverable) {
-		setTimeout(() => {
-			if (!hovering.value) {
-				closeMenu()
-			}
-		}, 250)
-	}
-}
-
-const handleMouseMove = (event: MouseEvent) => {
-	if (!isOpen.value || !isMouseDown.value) return
-
-	const menuRect = menuRef.value?.getBoundingClientRect()
-	if (!menuRect) return
-
-	const menuItems = menuRef.value?.querySelectorAll('[role="menuitem"]')
-	if (!menuItems) return
-
-	for (let i = 0; i < menuItems.length; i++) {
-		const itemRect = (menuItems[i] as HTMLElement).getBoundingClientRect()
-		if (
-			event.clientX >= itemRect.left &&
-			event.clientX <= itemRect.right &&
-			event.clientY >= itemRect.top &&
-			event.clientY <= itemRect.bottom
-		) {
-			selectedIndex.value = i
-			break
-		}
-	}
-}
-
-const handleItemClick = (option: Option, index: number, event?: MouseEvent) => {
-	if (option.disabled) return
-	selectedIndex.value = index
-	selectOption(option, event)
-}
-
-const handleMouseOver = (index: number) => {
-	selectedIndex.value = index
-	menuItemsRef.value[selectedIndex.value]?.focus?.()
-}
-
-const focusFirstMenuItem = () => {
-	if (menuItemsRef.value.length > 0) {
-		menuItemsRef.value[0]?.focus?.()
-	}
-}
-
-const handleKeydown = (event: KeyboardEvent) => {
-	if (!isOpen.value) {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault()
-			openMenu()
-		}
-		return
-	}
-
-	switch (event.key) {
-		case 'ArrowDown':
-			event.preventDefault()
-			selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
-			menuItemsRef.value[selectedIndex.value]?.focus?.()
-			break
-		case 'ArrowUp':
-			event.preventDefault()
-			selectedIndex.value =
-				(selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
-			menuItemsRef.value[selectedIndex.value]?.focus?.()
-			break
-		case 'Home':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				selectedIndex.value = 0
-				menuItemsRef.value[selectedIndex.value]?.focus?.()
-			}
-			break
-		case 'End':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				selectedIndex.value = filteredOptions.value.length - 1
-				menuItemsRef.value[selectedIndex.value]?.focus?.()
-			}
-			break
-		case 'Enter':
-		case ' ':
-			event.preventDefault()
-			if (selectedIndex.value >= 0) {
-				const option = filteredOptions.value[selectedIndex.value]
-				if (isDivider(option)) break
-				selectOption(option)
-			}
-			break
-		case 'Escape':
-			event.preventDefault()
-			closeMenu()
-			triggerRef.value?.focus?.()
-			break
-		case 'Tab':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				if (event.shiftKey) {
-					selectedIndex.value =
-						(selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
-				} else {
-					selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
-				}
-				menuItemsRef.value[selectedIndex.value]?.focus?.()
-			}
-			break
-		default:
-			if (event.key.length === 1) {
-				typeAheadBuffer.value += event.key.toLowerCase()
-				const matchIndex = filteredOptions.value.findIndex(
-					(option) =>
-						!isDivider(option) && option.id.toLowerCase().startsWith(typeAheadBuffer.value),
-				)
-				if (matchIndex !== -1) {
-					selectedIndex.value = matchIndex
-					menuItemsRef.value[selectedIndex.value]?.focus?.()
-				}
-				if (typeAheadTimeout.value) {
-					clearTimeout(typeAheadTimeout.value)
-				}
-				typeAheadTimeout.value = setTimeout(() => {
-					typeAheadBuffer.value = ''
-				}, 1000) as unknown as number
-			}
-			break
-	}
-}
-
-const handleResize = () => {
-	if (!isOpen.value) return
-	const pos = calculateMenuPosition()
-	if (pos) menuStyle.value = pos
-}
-
-const handleScroll = () => {
-	if (!isOpen.value) return
-	const pos = calculateMenuPosition()
-	if (!pos) return
-	// On scroll only the vertical position changes — don't update left, which would shift
-	// the menu horizontally due to scrollbar appearing/disappearing changing offsetWidth
-	const updated: Record<string, string> = { ...menuStyle.value, top: pos.top }
-	if (pos.maxHeight) {
-		updated.maxHeight = pos.maxHeight
-	} else {
-		delete updated.maxHeight
-	}
-	menuStyle.value = updated
-}
-
-const throttle = <T extends unknown[]>(
-	func: (...args: T) => void,
-	limit: number,
-): ((...args: T) => void) => {
-	let inThrottle: boolean
-	return function (...args: T) {
-		if (!inThrottle) {
-			func(...args)
-			inThrottle = true
-			setTimeout(() => (inThrottle = false), limit)
-		}
-	}
-}
-
-const throttledHandleResize = throttle(handleResize, 100)
-const throttledHandleScroll = throttle(handleScroll, 100)
-
-onMounted(() => {
-	triggerRef.value?.addEventListener('keydown', handleKeydown)
-	window.addEventListener('resize', throttledHandleResize)
-	window.addEventListener('scroll', throttledHandleScroll)
-})
-
-onUnmounted(() => {
-	triggerRef.value?.removeEventListener('keydown', handleKeydown)
-	window.removeEventListener('resize', throttledHandleResize)
-	window.removeEventListener('scroll', throttledHandleScroll)
-	document.removeEventListener('mousemove', handleMouseMove)
-	if (typeAheadTimeout.value) {
-		clearTimeout(typeAheadTimeout.value)
-	}
-})
-
-watch(isOpen, (newValue) => {
-	if (newValue) {
-		nextTick(() => {
-			menuRef.value?.addEventListener('keydown', handleKeydown)
-		})
-	} else {
-		menuRef.value?.removeEventListener('keydown', handleKeydown)
-	}
-})
-
-onClickOutside(menuRef, (event) => {
-	if (!triggerRef.value?.contains(event.target as Node)) {
-		closeMenu()
-	}
-})
-
-function optionLink(option: Option) {
-	if (typeof option.action === 'string') return option.action
-	return option.link
-}
-
-function optionButtonColor(option: Option) {
-	switch (option.color) {
-		case 'primary':
-			return 'brand'
-		case 'danger':
-			return 'red'
-		case 'secondary':
-		case 'highlight':
-			return 'standard'
-		default:
-			return option.color ?? 'standard'
-	}
-}
-</script>
diff --git a/packages/ui/src/components/base/TimeFramePicker.vue b/packages/ui/src/components/base/TimeFramePicker.vue
index 0db65f9e14..2be4e72e73 100644
--- a/packages/ui/src/components/base/TimeFramePicker.vue
+++ b/packages/ui/src/components/base/TimeFramePicker.vue
@@ -5,6 +5,9 @@
 		:display-value="selectedTimeframeLabel"
 		:max-height="maxHeight"
 		:trigger-class="triggerClass"
+		:trigger-type="triggerType"
+		:trigger-size="triggerSize"
+		:trigger-interaction="triggerInteraction"
 		:dropdown-min-width="timeframeDropdownMinWidth"
 		:outside-click-ignore="timeframeDropdownOutsideClickIgnore"
 		:dropdown-class="
@@ -103,16 +106,18 @@
 						</div>
 
 						<div class="flex items-center gap-2">
-							<ButtonStyled type="outlined">
-								<button type="button" @click="handleCustomRangeCancel">
-									{{ formatMessage(messages.cancel) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled color="brand">
-								<button type="button" :disabled="!hasCompleteRange" @click="handleCustomRangeApply">
-									{{ formatMessage(messages.apply) }}
-								</button>
-							</ButtonStyled>
+							<Button type="outlined" native-type="button" @click="handleCustomRangeCancel">
+								{{ formatMessage(messages.cancel) }}
+							</Button>
+							<Button
+								type="colored"
+								color="brand"
+								native-type="button"
+								:disabled="!hasCompleteRange"
+								@click="handleCustomRangeApply"
+							>
+								{{ formatMessage(messages.apply) }}
+							</Button>
 						</div>
 					</div>
 				</div>
@@ -196,8 +201,14 @@
 import { MinusIcon, PlusIcon } from '@modrinth/assets'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import {
+	Button,
+	type ButtonInteraction,
+	type ButtonSize,
+	type ButtonType,
+} from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
-import ButtonStyled from './ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from './Combobox.vue'
 import DatePicker from './DatePicker.vue'
 
@@ -391,11 +402,17 @@ const props = withDefaults(
 		nowTimestamp?: number
 		maxHeight?: number
 		triggerClass?: string
+		triggerType?: ButtonType
+		triggerSize?: ButtonSize
+		triggerInteraction?: ButtonInteraction
 		dropdownMinWidth?: string | number
 		customRangeDropdownMinWidth?: string | number
 	}>(),
 	{
 		maxHeight: TIMEFRAME_DROPDOWN_MAX_HEIGHT,
+		triggerType: 'base',
+		triggerSize: 'md',
+		triggerInteraction: 'surface',
 		dropdownMinWidth: TIMEFRAME_DROPDOWN_MIN_WIDTH,
 		customRangeDropdownMinWidth: CUSTOM_RANGE_DROPDOWN_MIN_WIDTH,
 	},
diff --git a/packages/ui/src/components/base/UnsavedChangesPopup.vue b/packages/ui/src/components/base/UnsavedChangesPopup.vue
index 4606042c86..c997b965a5 100644
--- a/packages/ui/src/components/base/UnsavedChangesPopup.vue
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -3,9 +3,10 @@ import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import { isEqual } from 'es-toolkit'
 import { type Component, computed, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils'
-import ButtonStyled from './ButtonStyled.vue'
 import FloatingActionBar from './FloatingActionBar.vue'
 
 const { formatMessage } = useVIntl()
@@ -62,18 +63,14 @@ defineExpose({ nudge })
 	<FloatingActionBar ref="actionBar" :shown="shown" :inline="inline">
 		<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
 		<div class="ml-auto flex gap-2">
-			<ButtonStyled v-if="canReset" type="transparent">
-				<button :disabled="saving" @click="(e) => emit('reset', e)">
-					<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled color="brand">
-				<button :disabled="saving" @click="(e) => emit('save', e)">
-					<SpinnerIcon v-if="saving" class="animate-spin" />
-					<component :is="saveIcon" v-else />
-					{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
-				</button>
-			</ButtonStyled>
+			<Button v-if="canReset" type="quiet" :disabled="saving" @click="(e) => emit('reset', e)">
+				<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
+			</Button>
+			<Button type="colored" color="brand" :disabled="saving" @click="(e) => emit('save', e)">
+				<SpinnerIcon v-if="saving" class="animate-spin" />
+				<component :is="saveIcon" v-else />
+				{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
+			</Button>
 		</div>
 	</FloatingActionBar>
 </template>
diff --git a/packages/ui/src/components/base/buttons/Button.vue b/packages/ui/src/components/base/buttons/Button.vue
new file mode 100644
index 0000000000..6d9f4e2b44
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/Button.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import ButtonFrame from './ButtonFrame.vue'
+import type { ButtonProps } from './types'
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+	type: 'base',
+	size: 'md',
+	nativeType: 'button',
+	disabled: false,
+	loading: false,
+})
+
+const frame = ref<InstanceType<typeof ButtonFrame> | null>(null)
+const element = computed(() => frame.value?.element ?? null)
+
+defineExpose({ element })
+</script>
+
+<template>
+	<ButtonFrame
+		ref="frame"
+		as="button"
+		:type="props.type"
+		:color="props.color"
+		:size="props.size"
+		:interaction="props.interaction"
+		:native-type="props.nativeType"
+		:disabled="props.disabled || props.loading"
+		:aria-busy="props.loading || undefined"
+	>
+		<slot />
+	</ButtonFrame>
+</template>
diff --git a/packages/ui/src/components/base/buttons/ButtonFrame.vue b/packages/ui/src/components/base/buttons/ButtonFrame.vue
new file mode 100644
index 0000000000..81d0c09f8d
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/ButtonFrame.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import type { Component, CSSProperties } from 'vue'
+import { computed, ref } from 'vue'
+
+import type {
+	ButtonColor,
+	ButtonInteraction,
+	ButtonNativeType,
+	ButtonSize,
+	ButtonType,
+} from './types'
+
+const baseClasses = [
+	// Base
+	'relative inline-flex min-w-0 shrink-0 items-center justify-center',
+	'whitespace-nowrap border-0 no-underline',
+	// Interactions
+	'touch-manipulation cursor-pointer select-none transition-[background-color,color,box-shadow,filter,opacity,transform] duration-150 ease-out',
+	'enabled:active:scale-[0.97]',
+	// Hovering
+	'[&:not(:disabled):not([aria-disabled=true]):hover]:brightness-[--hover-brightness]',
+	// Accessibility
+	'[&:not(:disabled):not([aria-disabled=true]):focus-visible]:brightness-[--hover-brightness] focus-visible:outline-none [&:not(:disabled):not([aria-disabled=true]):focus-visible]:ring-4 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:ring-brand-shadow',
+	'disabled:cursor-not-allowed disabled:opacity-50',
+	'[&[aria-disabled=true]]:cursor-not-allowed [&[aria-disabled=true]]:opacity-50',
+].join(' ')
+
+const sizeClasses: Record<ButtonSize, string> = {
+	xs: 'h-7 gap-1 rounded-lg px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
+	sm: 'h-8 gap-1 rounded-[10px] px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
+	md: 'h-9 gap-1.5 rounded-xl px-2.5 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
+	lg: 'h-10 gap-2 rounded-[14px] px-4 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
+	xl: 'h-12 gap-2 rounded-2xl px-3.5 text-base font-extrabold leading-5 [&>svg]:size-6 [&>svg]:min-h-6 [&>svg]:min-w-6 [&>svg]:shrink-0',
+}
+
+const iconOnlySizeClasses: Record<ButtonSize, string> = {
+	xs: 'w-7 !px-0',
+	sm: 'w-8 !px-0',
+	md: 'w-9 !px-0',
+	lg: 'w-10 !px-0',
+	xl: 'w-12 !px-0',
+}
+
+const typeClasses: Record<ButtonType, string> = {
+	base: 'button-frame--base bg-surface-4 text-contrast [&>svg]:text-primary',
+	colored:
+		'button-frame--colored bg-[--button-color] text-[var(--color-accent-contrast)] [&>svg]:text-inherit',
+	outlined:
+		'button-frame--outlined bg-transparent text-[var(--button-color,var(--color-contrast))] [&>svg]:text-inherit',
+	quiet: 'button-frame--quiet bg-transparent [&>svg]:text-inherit',
+}
+
+const interactionClasses: Record<ButtonInteraction, string> = {
+	surface:
+		'[&:not(:disabled):not([aria-disabled=true]):hover]:bg-surface-4 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:bg-surface-4',
+	filled:
+		'[&:not(:disabled):not([aria-disabled=true]):hover]:!bg-[--button-color] [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!bg-[--button-color] [&:not(:disabled):not([aria-disabled=true]):hover]:!text-[var(--color-accent-contrast)] [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!text-[var(--color-accent-contrast)]',
+	none: '[&:not(:disabled):not([aria-disabled=true]):hover]:!brightness-100 [&:not(:disabled):not([aria-disabled=true]):focus-visible]:!brightness-100',
+}
+
+const colorVariables: Record<ButtonColor, string> = {
+	brand: 'var(--color-brand)',
+	red: 'var(--color-red)',
+	orange: 'var(--color-orange)',
+	green: 'var(--color-green)',
+	blue: 'var(--color-blue)',
+	purple: 'var(--color-purple)',
+	medal_promotion: 'var(--medal-promotion-text-orange, var(--color-orange))',
+}
+
+const props = withDefaults(
+	defineProps<{
+		as: string | Component
+		type?: ButtonType
+		color?: ButtonColor
+		size?: ButtonSize
+		interaction?: ButtonInteraction
+		iconOnly?: boolean
+		circular?: boolean
+		nativeType?: ButtonNativeType
+	}>(),
+	{
+		type: 'base',
+		size: 'md',
+		interaction: 'surface',
+		iconOnly: false,
+		circular: false,
+		nativeType: undefined,
+	},
+)
+
+const element = ref<HTMLElement | null>(null)
+const classes = computed(() => [
+	baseClasses,
+	typeClasses[props.type],
+	props.type === 'quiet' ? interactionClasses[props.interaction] : '',
+	sizeClasses[props.size],
+	props.iconOnly ? iconOnlySizeClasses[props.size] : '',
+	props.circular ? '!rounded-full' : '',
+])
+const style = computed((): CSSProperties | undefined => {
+	if ((props.type === 'outlined' || props.type === 'quiet') && !props.color) return undefined
+	if (props.type !== 'colored' && props.type !== 'outlined' && props.type !== 'quiet')
+		return undefined
+
+	return {
+		'--button-color': colorVariables[props.color ?? 'brand'],
+	} as CSSProperties
+})
+
+defineExpose({ element })
+</script>
+
+<template>
+	<component
+		:is="as"
+		ref="element"
+		data-button
+		:type="props.nativeType"
+		:class="classes"
+		:style="style"
+	>
+		<slot />
+	</component>
+</template>
+
+<style scoped>
+.button-frame--base {
+	box-shadow:
+		inset 0 0 0 1px var(--surface-5),
+		0 1px 1px rgba(0, 0, 0, 0.12);
+}
+
+.button-frame--colored {
+	box-shadow:
+		0 0 0 1px color-mix(in srgb, var(--button-color) 30%, transparent),
+		0 2px 4px rgba(0, 0, 0, 0.04),
+		0 5px 8px rgba(0, 0, 0, 0.04),
+		0 10px 18px rgba(0, 0, 0, 0.03),
+		0 24px 48px rgba(0, 0, 0, 0.03);
+}
+
+.button-frame--colored::before {
+	position: absolute;
+	inset: 0;
+	padding: 1px;
+	pointer-events: none;
+	content: '';
+	border-radius: inherit;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask-composite: exclude;
+}
+
+.button-frame--outlined {
+	box-shadow: inset 0 0 0 1px var(--button-color, var(--surface-5));
+}
+
+.button-frame--quiet {
+	color: var(--button-color, var(--color-base));
+}
+</style>
diff --git a/packages/ui/src/components/base/buttons/ButtonGroup.vue b/packages/ui/src/components/base/buttons/ButtonGroup.vue
new file mode 100644
index 0000000000..04af5b1261
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/ButtonGroup.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+withDefaults(
+	defineProps<{
+		label?: string
+	}>(),
+	{
+		label: undefined,
+	},
+)
+</script>
+
+<template>
+	<div
+		:role="label ? 'group' : undefined"
+		:aria-label="label"
+		class="button-group inline-flex [&>[data-button]+[data-button]]:-ms-px [&>[data-button]:active]:z-10 [&>[data-button]:focus-visible]:z-10 [&>[data-button]:not(:disabled):not([aria-disabled=true]):hover]:z-10 [&>[data-button]:not(:first-child)]:rounded-l-none [&>[data-button]:not(:last-child)]:rounded-r-none"
+	>
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.button-group
+	:deep([data-button].button-frame--colored:first-child:not(:last-child):not(:focus-visible)) {
+	clip-path: inset(-4rem var(--button-group-inner-clip, 1px) -4rem -4rem);
+}
+
+.button-group
+	:deep(
+		[data-button].button-frame--colored:not(:first-child):not(:last-child):not(:focus-visible)
+	) {
+	clip-path: inset(
+		-4rem var(--button-group-inner-clip, 1px) -4rem var(--button-group-leading-clip, 0px)
+	);
+}
+
+.button-group
+	:deep([data-button].button-frame--colored:last-child:not(:first-child):not(:focus-visible)) {
+	clip-path: inset(-4rem -4rem -4rem var(--button-group-leading-clip, 0px));
+}
+
+:dir(rtl)
+	.button-group
+	:deep([data-button].button-frame--colored:first-child:not(:last-child):not(:focus-visible)) {
+	clip-path: inset(-4rem -4rem -4rem var(--button-group-inner-clip, 1px));
+}
+
+:dir(rtl)
+	.button-group
+	:deep(
+		[data-button].button-frame--colored:not(:first-child):not(:last-child):not(:focus-visible)
+	) {
+	clip-path: inset(
+		-4rem var(--button-group-leading-clip, 0px) -4rem var(--button-group-inner-clip, 1px)
+	);
+}
+
+:dir(rtl)
+	.button-group
+	:deep([data-button].button-frame--colored:last-child:not(:first-child):not(:focus-visible)) {
+	clip-path: inset(-4rem var(--button-group-leading-clip, 0px) -4rem -4rem);
+}
+
+.button-group :deep([data-button].button-frame--colored:active) {
+	--button-group-inner-clip: 0;
+}
+
+/*
+ * the seam is normally drawn by the button on the right, but hovering over the left one will make it draw the seam instead. when pressed, make the right one draw its own seam again.
+ */
+.button-group
+	:deep([data-button].button-frame--colored:not(:disabled):not([aria-disabled='true']):hover) {
+	--button-group-inner-clip: 0;
+}
+
+.button-group
+	:deep(
+		[data-button].button-frame--colored:not(:disabled):not([aria-disabled='true']):hover:not(
+				:active
+			)
+			+ [data-button]
+	) {
+	--button-group-leading-clip: 1px;
+}
+</style>
diff --git a/packages/ui/src/components/base/buttons/ButtonLink.vue b/packages/ui/src/components/base/buttons/ButtonLink.vue
new file mode 100644
index 0000000000..cb11c7c6c6
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/ButtonLink.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import ButtonFrame from './ButtonFrame.vue'
+import type {
+	ButtonColor,
+	ButtonInteraction,
+	ButtonLinkDestination,
+	ButtonSize,
+	ButtonType,
+} from './types'
+
+type ButtonLinkProps = ButtonLinkDestination & {
+	type?: ButtonType
+	color?: ButtonColor
+	size?: ButtonSize
+	interaction?: ButtonInteraction
+	target?: string
+	rel?: string
+	download?: string | boolean
+	disabled?: boolean
+}
+
+const props = withDefaults(defineProps<ButtonLinkProps>(), {
+	type: 'base',
+	size: 'md',
+	target: undefined,
+	rel: undefined,
+	download: undefined,
+	disabled: false,
+})
+
+const usesRouter = computed(() => props.to !== undefined && !props.disabled)
+const component = computed(() => (usesRouter.value ? RouterLink : 'a'))
+const resolvedRel = computed(() => {
+	if (props.rel) return props.rel
+	return props.target === '_blank' ? 'noopener noreferrer' : undefined
+})
+
+function handleClick(event: MouseEvent) {
+	if (!props.disabled) return
+	event.preventDefault()
+	event.stopImmediatePropagation()
+}
+</script>
+
+<template>
+	<ButtonFrame
+		:as="component"
+		:type="props.type"
+		:color="props.color"
+		:size="props.size"
+		:interaction="props.interaction"
+		:to="usesRouter ? props.to : undefined"
+		:href="!usesRouter && !props.disabled ? props.href : undefined"
+		:target="props.target"
+		:rel="resolvedRel"
+		:download="!props.disabled ? props.download : undefined"
+		:aria-disabled="props.disabled || undefined"
+		:role="props.disabled ? 'link' : undefined"
+		:tabindex="props.disabled ? -1 : undefined"
+		@click="handleClick"
+	>
+		<slot />
+	</ButtonFrame>
+</template>
diff --git a/packages/ui/src/components/base/buttons/FileButton.vue b/packages/ui/src/components/base/buttons/FileButton.vue
new file mode 100644
index 0000000000..0c6c09b2ee
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/FileButton.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { fileIsValid } from '@modrinth/utils'
+
+import { useFormatBytes } from '../../../composables'
+import ButtonFrame from './ButtonFrame.vue'
+import type { ButtonColor, ButtonInteraction, ButtonSize, ButtonType } from './types'
+
+const props = withDefaults(
+	defineProps<{
+		prompt?: string
+		multiple?: boolean
+		accept?: string
+		maxSize?: number | null
+		disabled?: boolean
+		allowDrop?: boolean
+		type?: ButtonType
+		color?: ButtonColor
+		size?: ButtonSize
+		interaction?: ButtonInteraction
+	}>(),
+	{
+		prompt: 'Select file',
+		multiple: false,
+		accept: undefined,
+		maxSize: undefined,
+		disabled: false,
+		allowDrop: true,
+		type: 'base',
+		size: 'md',
+	},
+)
+
+const emit = defineEmits<{
+	change: [files: File[]]
+}>()
+
+const formatBytes = useFormatBytes()
+
+function selectFiles(incoming: FileList) {
+	if (props.disabled) return
+
+	const validationOptions = { maxSize: props.maxSize, alertOnInvalid: true }
+	const validFiles = Array.from(incoming).filter((file) =>
+		fileIsValid(file, validationOptions, formatBytes),
+	)
+
+	if (validFiles.length > 0) emit('change', validFiles)
+}
+
+function handleChange(event: Event) {
+	const input = event.target as HTMLInputElement
+	if (input.files) selectFiles(input.files)
+	input.value = ''
+}
+
+function handleDrop(event: DragEvent) {
+	if (!props.allowDrop || !event.dataTransfer) return
+	selectFiles(event.dataTransfer.files)
+}
+</script>
+
+<template>
+	<ButtonFrame
+		as="label"
+		:type="props.type"
+		:color="props.color"
+		:size="props.size"
+		:interaction="props.interaction"
+		:aria-disabled="props.disabled || undefined"
+		class="focus-within:outline-none focus-within:ring-4 focus-within:ring-brand-shadow"
+		@drop.prevent="handleDrop"
+		@dragover.prevent
+	>
+		<slot />
+		{{ props.prompt }}
+		<input
+			type="file"
+			:multiple="props.multiple"
+			:accept="props.accept"
+			:disabled="props.disabled"
+			class="absolute size-px overflow-hidden whitespace-nowrap [clip:rect(0,0,0,0)]"
+			@change="handleChange"
+		/>
+	</ButtonFrame>
+</template>
diff --git a/packages/ui/src/components/base/buttons/IconButton.vue b/packages/ui/src/components/base/buttons/IconButton.vue
new file mode 100644
index 0000000000..6fe601fb2b
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/IconButton.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import ButtonFrame from './ButtonFrame.vue'
+import type {
+	ButtonColor,
+	ButtonInteraction,
+	ButtonNativeType,
+	ButtonSize,
+	ButtonType,
+} from './types'
+
+const props = withDefaults(
+	defineProps<{
+		label: string
+		type?: ButtonType
+		color?: ButtonColor
+		size?: ButtonSize
+		interaction?: ButtonInteraction
+		nativeType?: ButtonNativeType
+		circular?: boolean
+		disabled?: boolean
+		loading?: boolean
+	}>(),
+	{
+		type: 'base',
+		size: 'md',
+		nativeType: 'button',
+		circular: true,
+		disabled: false,
+		loading: false,
+	},
+)
+
+const frame = ref<InstanceType<typeof ButtonFrame> | null>(null)
+const element = computed(() => frame.value?.element ?? null)
+
+defineExpose({ element })
+</script>
+
+<template>
+	<ButtonFrame
+		ref="frame"
+		as="button"
+		icon-only
+		:circular="props.circular"
+		:type="props.type"
+		:color="props.color"
+		:size="props.size"
+		:interaction="props.interaction"
+		:native-type="props.nativeType"
+		:disabled="props.disabled || props.loading"
+		:aria-label="props.label"
+		:aria-busy="props.loading || undefined"
+	>
+		<slot />
+	</ButtonFrame>
+</template>
diff --git a/packages/ui/src/components/base/buttons/SplitButton.vue b/packages/ui/src/components/base/buttons/SplitButton.vue
new file mode 100644
index 0000000000..40badebad8
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/SplitButton.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { DropdownIcon } from '@modrinth/assets'
+import { computed, useSlots } from 'vue'
+
+import Button from './Button.vue'
+import ButtonGroup from './ButtonGroup.vue'
+import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
+import type {
+	ButtonColor,
+	ButtonInteraction,
+	ButtonNativeType,
+	ButtonSize,
+	ButtonType,
+	OverflowMenuAction,
+	OverflowMenuLink,
+	OverflowMenuOption,
+	TeleportPlacement,
+} from './types'
+
+const props = withDefaults(
+	defineProps<{
+		menuLabel: string
+		options: OverflowMenuOption[]
+		groupLabel?: string
+		type?: ButtonType
+		color?: ButtonColor
+		size?: ButtonSize
+		interaction?: ButtonInteraction
+		nativeType?: ButtonNativeType
+		disabled?: boolean
+		primaryDisabled?: boolean
+		menuDisabled?: boolean
+		placement?: TeleportPlacement
+	}>(),
+	{
+		groupLabel: undefined,
+		type: 'base',
+		size: 'md',
+		nativeType: 'button',
+		disabled: false,
+		primaryDisabled: false,
+		menuDisabled: false,
+		placement: 'bottom-end',
+	},
+)
+
+const emit = defineEmits<{
+	click: [event: MouseEvent]
+	select: [option: OverflowMenuAction | OverflowMenuLink]
+}>()
+
+const slots = useSlots()
+const forwardedSlots = computed(() => Object.keys(slots).filter((name) => name !== 'default'))
+</script>
+
+<template>
+	<ButtonGroup :label="props.groupLabel">
+		<Button
+			:type="props.type"
+			:color="props.color"
+			:size="props.size"
+			:interaction="props.interaction"
+			:native-type="props.nativeType"
+			:disabled="props.disabled || props.primaryDisabled"
+			@click="emit('click', $event)"
+		>
+			<slot />
+		</Button>
+
+		<TeleportOverflowMenu
+			:label="props.menuLabel"
+			:options="props.options"
+			:type="props.type"
+			:color="props.color"
+			:size="props.size"
+			:interaction="props.interaction"
+			:circular="false"
+			:disabled="props.disabled || props.menuDisabled"
+			:placement="props.placement"
+			@select="emit('select', $event)"
+		>
+			<DropdownIcon aria-hidden="true" />
+			<template v-for="slotName in forwardedSlots" #[slotName]="slotProps">
+				<slot :name="slotName" v-bind="slotProps" />
+			</template>
+		</TeleportOverflowMenu>
+	</ButtonGroup>
+</template>
diff --git a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
new file mode 100644
index 0000000000..f219a88910
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
@@ -0,0 +1,469 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import { computed, nextTick, onUnmounted, ref, useId, watch } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import { useAnchoredTeleport } from '../../../utils/use-anchored-teleport'
+import Button from './Button.vue'
+import IconButton from './IconButton.vue'
+import type {
+	ButtonColor,
+	ButtonElementHandle,
+	ButtonInteraction,
+	ButtonSize,
+	ButtonType,
+	OverflowMenuAction,
+	OverflowMenuLink,
+	OverflowMenuOption,
+	TeleportPlacement,
+} from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+	defineProps<{
+		label: string
+		options: OverflowMenuOption[]
+		type?: ButtonType
+		color?: ButtonColor
+		size?: ButtonSize
+		interaction?: ButtonInteraction
+		disabled?: boolean
+		iconOnly?: boolean
+		circular?: boolean
+		tooltip?: string
+		placement?: TeleportPlacement
+		distance?: number
+		hoverable?: boolean
+	}>(),
+	{
+		type: 'base',
+		size: 'md',
+		disabled: false,
+		iconOnly: true,
+		circular: true,
+		placement: 'bottom-end',
+		distance: 8,
+		hoverable: false,
+	},
+)
+
+const emit = defineEmits<{
+	select: [option: OverflowMenuAction | OverflowMenuLink]
+	open: []
+	close: []
+}>()
+
+const triggerButton = ref<ButtonElementHandle | null>(null)
+const triggerElement = computed(() => triggerButton.value?.element ?? null)
+const panelElement = ref<HTMLElement | null>(null)
+const resolvedPlacement = computed(() => props.placement)
+const resolvedDistance = computed(() => props.distance)
+const menuId = `button-overflow-${useId()}`
+const selectedIndex = ref(-1)
+const typeahead = ref('')
+let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
+let hoverCloseTimer: ReturnType<typeof setTimeout> | undefined
+const triggerComponent = computed(() => (props.iconOnly ? IconButton : Button))
+
+const visibleOptions = computed(() => props.options.filter((option) => option.shown !== false))
+const menuOptions = computed(() =>
+	visibleOptions.value.filter(
+		(option): option is OverflowMenuAction | OverflowMenuLink => option.type !== 'divider',
+	),
+)
+
+const { isOpen, panelStyle, anchorStyle, resolvedSide, open, close } = useAnchoredTeleport(
+	triggerElement,
+	panelElement,
+	resolvedPlacement,
+	resolvedDistance,
+)
+
+const menuItemClasses =
+	'overflow-menu-item flex min-h-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
+	'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
+	'disabled:cursor-not-allowed disabled:opacity-50 [&[aria-disabled=true]]:cursor-not-allowed [&[aria-disabled=true]]:opacity-50 ' +
+	'[&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:text-primary'
+
+const toneVariables: Record<ButtonColor, string> = {
+	brand: 'var(--color-brand)',
+	red: 'var(--color-red)',
+	orange: 'var(--color-orange)',
+	green: 'var(--color-green)',
+	blue: 'var(--color-blue)',
+	purple: 'var(--color-purple)',
+	medal_promotion: 'var(--medal-promotion-text-orange, var(--color-orange))',
+}
+
+function getMenuItemStyle(option: OverflowMenuAction | OverflowMenuLink) {
+	if (!option.tone || option.tone === 'default') return undefined
+
+	return {
+		'--overflow-menu-item-tone': toneVariables[option.tone],
+	} as CSSProperties
+}
+
+function isDivider(
+	option: OverflowMenuOption,
+): option is Extract<OverflowMenuOption, { type: 'divider' }> {
+	return option.type === 'divider'
+}
+
+function isLink(option: OverflowMenuOption): option is OverflowMenuLink {
+	return option.type === 'link'
+}
+
+function getMenuItems() {
+	if (!panelElement.value) return []
+	return Array.from(panelElement.value.querySelectorAll<HTMLElement>('[role="menuitem"]'))
+}
+
+function focusItem(index: number) {
+	const items = getMenuItems()
+	if (items.length === 0) return
+	selectedIndex.value = (index + items.length) % items.length
+	items[selectedIndex.value]?.focus()
+}
+
+async function openMenu(position: 'first' | 'last' = 'first', focus = true) {
+	if (props.disabled || isOpen.value) return
+	await open()
+	emit('open')
+	if (!focus) return
+	await nextTick()
+	focusItem(position === 'first' ? 0 : getMenuItems().length - 1)
+}
+
+function closeMenu(restoreFocus = false) {
+	if (!isOpen.value) return
+	selectedIndex.value = -1
+	close(restoreFocus)
+}
+
+async function toggleMenu(event?: MouseEvent) {
+	if (props.hoverable && window.matchMedia('(hover: hover)').matches && event?.detail) return
+	if (isOpen.value) closeMenu()
+	else await openMenu()
+}
+
+function clearHoverCloseTimer() {
+	if (!hoverCloseTimer) return
+	clearTimeout(hoverCloseTimer)
+	hoverCloseTimer = undefined
+}
+
+function handleMouseEnter() {
+	if (!props.hoverable || !window.matchMedia('(hover: hover)').matches) return
+	clearHoverCloseTimer()
+	openMenu('first', false)
+}
+
+function handleMouseLeave() {
+	if (!props.hoverable || !window.matchMedia('(hover: hover)').matches) return
+	clearHoverCloseTimer()
+	hoverCloseTimer = setTimeout(() => closeMenu(), 250)
+}
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+	if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+	event.preventDefault()
+	openMenu(event.key === 'ArrowDown' ? 'first' : 'last')
+}
+
+function handleAction(option: OverflowMenuAction, event: MouseEvent) {
+	if (option.disabled) return
+	option.action(event)
+	emit('select', option)
+	if (!option.remainOpen) closeMenu(true)
+}
+
+function handleLink(option: OverflowMenuLink, event: MouseEvent) {
+	if (option.disabled) {
+		event.preventDefault()
+		return
+	}
+	emit('select', option)
+	if (!option.remainOpen) closeMenu()
+}
+
+function handleLinkKeydown(option: OverflowMenuLink, event: KeyboardEvent) {
+	if (event.key !== ' ') return
+	event.preventDefault()
+	if (option.disabled) return
+	;(event.currentTarget as HTMLElement).click()
+}
+
+function handleMenuKeydown(event: KeyboardEvent) {
+	const items = getMenuItems()
+	if (items.length === 0) return
+
+	switch (event.key) {
+		case 'ArrowDown':
+			event.preventDefault()
+			focusItem(selectedIndex.value + 1)
+			break
+		case 'ArrowUp':
+			event.preventDefault()
+			focusItem(selectedIndex.value - 1)
+			break
+		case 'Home':
+			event.preventDefault()
+			focusItem(0)
+			break
+		case 'End':
+			event.preventDefault()
+			focusItem(items.length - 1)
+			break
+		case 'Escape':
+			event.preventDefault()
+			closeMenu(true)
+			break
+		case 'Tab':
+			triggerElement.value?.focus()
+			closeMenu()
+			break
+		default: {
+			if (
+				event.key === ' ' ||
+				event.key.length !== 1 ||
+				event.ctrlKey ||
+				event.metaKey ||
+				event.altKey
+			)
+				return
+
+			const character = event.key.toLocaleLowerCase()
+			const query = typeahead.value === character ? character : `${typeahead.value}${character}`
+			const startIndex = query.length === 1 ? selectedIndex.value + 1 : 0
+			typeahead.value = query
+
+			for (let offset = 0; offset < menuOptions.value.length; offset++) {
+				const index = (startIndex + offset) % menuOptions.value.length
+				if (menuOptions.value[index]?.label.toLocaleLowerCase().startsWith(query)) {
+					focusItem(index)
+					break
+				}
+			}
+
+			if (typeaheadTimer) clearTimeout(typeaheadTimer)
+			typeaheadTimer = setTimeout(() => {
+				typeahead.value = ''
+			}, 500)
+		}
+	}
+}
+
+watch(isOpen, (openState, previousOpenState) => {
+	if (!openState && previousOpenState) emit('close')
+	if (!openState && typeaheadTimer) {
+		clearTimeout(typeaheadTimer)
+		typeaheadTimer = undefined
+		typeahead.value = ''
+	}
+})
+
+onUnmounted(clearHoverCloseTimer)
+
+defineExpose({ open: openMenu, close: closeMenu })
+</script>
+
+<template>
+	<component
+		:is="triggerComponent"
+		ref="triggerButton"
+		v-bind="$attrs"
+		v-tooltip="props.tooltip"
+		:label="props.iconOnly ? props.label : undefined"
+		:aria-label="props.iconOnly ? undefined : props.label"
+		:circular="props.iconOnly ? props.circular : undefined"
+		:type="props.type"
+		:color="props.color"
+		:size="props.size"
+		:interaction="props.interaction"
+		:disabled="props.disabled"
+		:aria-expanded="isOpen"
+		:aria-controls="menuId"
+		aria-haspopup="menu"
+		@click="toggleMenu"
+		@keydown="handleTriggerKeydown"
+		@mouseenter="handleMouseEnter"
+		@mouseleave="handleMouseLeave"
+	>
+		<slot />
+	</component>
+
+	<Teleport to="body">
+		<Transition
+			enter-active-class="transition duration-125 ease-out"
+			enter-from-class="scale-95 opacity-0"
+			enter-to-class="scale-100 opacity-100"
+			leave-active-class="transition duration-100 ease-in"
+			leave-from-class="scale-100 opacity-100"
+			leave-to-class="scale-95 opacity-0"
+		>
+			<div
+				v-if="isOpen"
+				:id="menuId"
+				ref="panelElement"
+				class="fixed isolate z-[9999] flex min-w-48 flex-col gap-1 rounded-[14px] bg-surface-3 p-2 shadow-lg ring-1 ring-surface-5"
+				:style="panelStyle"
+				role="menu"
+				:aria-label="props.label"
+				@keydown="handleMenuKeydown"
+				@mouseenter="handleMouseEnter"
+				@mouseleave="handleMouseLeave"
+			>
+				<span
+					aria-hidden="true"
+					class="overflow-menu-arrow"
+					:data-side="resolvedSide"
+					:style="anchorStyle"
+				/>
+				<template v-for="(option, index) in visibleOptions" :key="option.id ?? `divider-${index}`">
+					<div v-if="isDivider(option)" role="separator" class="my-1 h-px bg-surface-5" />
+
+					<RouterLink
+						v-else-if="isLink(option) && option.to !== undefined && !option.disabled"
+						v-tooltip="option.tooltip"
+						:to="option.to"
+						:class="menuItemClasses"
+						:style="getMenuItemStyle(option)"
+						:data-tone="option.tone && option.tone !== 'default' ? option.tone : undefined"
+						:data-hover-filled="option.hoverFilled || option.hoverFilledOnly || undefined"
+						:data-hover-filled-only="option.hoverFilledOnly || undefined"
+						role="menuitem"
+						tabindex="-1"
+						@click="handleLink(option, $event)"
+						@keydown="handleLinkKeydown(option, $event)"
+						@focus="selectedIndex = getMenuItems().indexOf($event.currentTarget as HTMLElement)"
+					>
+						<slot :name="option.id" :option="option">
+							<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+							{{ option.label }}
+						</slot>
+					</RouterLink>
+
+					<a
+						v-else-if="isLink(option)"
+						v-tooltip="option.tooltip"
+						:href="option.disabled ? undefined : option.href"
+						:target="option.target"
+						:rel="option.rel ?? (option.target === '_blank' ? 'noopener noreferrer' : undefined)"
+						:download="option.download"
+						:aria-disabled="option.disabled || undefined"
+						:class="menuItemClasses"
+						:style="getMenuItemStyle(option)"
+						:data-tone="option.tone && option.tone !== 'default' ? option.tone : undefined"
+						:data-hover-filled="option.hoverFilled || option.hoverFilledOnly || undefined"
+						:data-hover-filled-only="option.hoverFilledOnly || undefined"
+						role="menuitem"
+						tabindex="-1"
+						@click="handleLink(option, $event)"
+						@keydown="handleLinkKeydown(option, $event)"
+						@focus="selectedIndex = getMenuItems().indexOf($event.currentTarget as HTMLElement)"
+					>
+						<slot :name="option.id" :option="option">
+							<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+							{{ option.label }}
+						</slot>
+					</a>
+
+					<button
+						v-else
+						v-tooltip="option.tooltip"
+						type="button"
+						:aria-disabled="option.disabled || undefined"
+						:class="menuItemClasses"
+						:style="getMenuItemStyle(option)"
+						:data-tone="option.tone && option.tone !== 'default' ? option.tone : undefined"
+						:data-hover-filled="option.hoverFilled || option.hoverFilledOnly || undefined"
+						:data-hover-filled-only="option.hoverFilledOnly || undefined"
+						role="menuitem"
+						tabindex="-1"
+						@click="handleAction(option, $event)"
+						@focus="selectedIndex = getMenuItems().indexOf($event.currentTarget as HTMLElement)"
+					>
+						<slot :name="option.id" :option="option">
+							<component :is="option.icon" v-if="option.icon" aria-hidden="true" />
+							{{ option.label }}
+						</slot>
+					</button>
+				</template>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<style scoped>
+.overflow-menu-arrow {
+	position: absolute;
+	width: 0;
+	height: 0;
+	pointer-events: none;
+}
+
+.overflow-menu-arrow::before {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	content: '';
+	background-color: var(--surface-3);
+	transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.overflow-menu-arrow[data-side='bottom'] {
+	top: 0;
+}
+
+.overflow-menu-arrow[data-side='bottom']::before {
+	border-top: 1px solid var(--surface-5);
+	border-left: 1px solid var(--surface-5);
+}
+
+.overflow-menu-arrow[data-side='top'] {
+	bottom: 0;
+}
+
+.overflow-menu-arrow[data-side='top']::before {
+	border-right: 1px solid var(--surface-5);
+	border-bottom: 1px solid var(--surface-5);
+}
+
+.overflow-menu-arrow[data-side='right'] {
+	left: 0;
+}
+
+.overflow-menu-arrow[data-side='right']::before {
+	border-bottom: 1px solid var(--surface-5);
+	border-left: 1px solid var(--surface-5);
+}
+
+.overflow-menu-arrow[data-side='left'] {
+	right: 0;
+}
+
+.overflow-menu-arrow[data-side='left']::before {
+	border-top: 1px solid var(--surface-5);
+	border-right: 1px solid var(--surface-5);
+}
+
+.overflow-menu-item[data-tone]:not([data-hover-filled-only]) {
+	color: var(--overflow-menu-item-tone);
+}
+
+.overflow-menu-item[data-tone]:not([data-hover-filled-only]) :deep(svg) {
+	color: var(--overflow-menu-item-tone);
+}
+
+.overflow-menu-item[data-tone][data-hover-filled]:hover,
+.overflow-menu-item[data-tone][data-hover-filled]:focus-visible {
+	color: var(--color-accent-contrast);
+	background-color: var(--overflow-menu-item-tone);
+}
+
+.overflow-menu-item[data-tone][data-hover-filled]:hover :deep(svg),
+.overflow-menu-item[data-tone][data-hover-filled]:focus-visible :deep(svg) {
+	color: inherit;
+}
+</style>
diff --git a/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue b/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
new file mode 100644
index 0000000000..16574bfec9
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, useId, watch } from 'vue'
+
+import { useAnchoredTeleport } from '../../../utils/use-anchored-teleport'
+import Button from './Button.vue'
+import IconButton from './IconButton.vue'
+import type {
+	ButtonColor,
+	ButtonElementHandle,
+	ButtonInteraction,
+	ButtonSize,
+	ButtonType,
+	TeleportPlacement,
+} from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+	defineProps<{
+		label: string
+		type?: ButtonType
+		color?: ButtonColor
+		size?: ButtonSize
+		interaction?: ButtonInteraction
+		disabled?: boolean
+		iconOnly?: boolean
+		tooltip?: string
+		autoFocus?: boolean
+		placement?: TeleportPlacement
+		panelRole?: 'dialog' | 'region'
+	}>(),
+	{
+		type: 'base',
+		size: 'md',
+		disabled: false,
+		iconOnly: false,
+		autoFocus: true,
+		placement: 'bottom-end',
+		panelRole: 'dialog',
+	},
+)
+
+const emit = defineEmits<{
+	open: []
+	close: []
+}>()
+
+const triggerButton = ref<ButtonElementHandle | null>(null)
+const triggerElement = computed(() => triggerButton.value?.element ?? null)
+const panelElement = ref<HTMLElement | null>(null)
+const resolvedPlacement = computed(() => props.placement)
+const panelId = `button-popout-${useId()}`
+const triggerComponent = computed(() => (props.iconOnly ? IconButton : Button))
+
+const { isOpen, panelStyle, open, close } = useAnchoredTeleport(
+	triggerElement,
+	panelElement,
+	resolvedPlacement,
+)
+
+function focusPanel() {
+	const focusable = panelElement.value?.querySelector<HTMLElement>(
+		'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+	)
+	;(focusable ?? panelElement.value)?.focus()
+}
+
+async function openMenu() {
+	if (props.disabled || isOpen.value) return
+	await open()
+	emit('open')
+	if (props.autoFocus) await nextTick(focusPanel)
+}
+
+function closeMenu(restoreFocus = true) {
+	if (!isOpen.value) return
+	close(restoreFocus)
+}
+
+async function toggleMenu() {
+	if (isOpen.value) closeMenu()
+	else await openMenu()
+}
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+	if (event.key !== 'Escape' || !isOpen.value) return
+	event.preventDefault()
+	closeMenu()
+}
+
+function handlePanelKeydown(event: KeyboardEvent) {
+	if (event.key !== 'Escape') return
+	event.preventDefault()
+	closeMenu(true)
+}
+
+watch(isOpen, (openState, previousOpenState) => {
+	if (!openState && previousOpenState) emit('close')
+})
+
+defineExpose({ open: openMenu, close: closeMenu })
+</script>
+
+<template>
+	<component
+		:is="triggerComponent"
+		ref="triggerButton"
+		v-bind="$attrs"
+		v-tooltip="props.tooltip"
+		:label="props.iconOnly ? props.label : undefined"
+		:type="props.type"
+		:color="props.color"
+		:size="props.size"
+		:interaction="props.interaction"
+		:disabled="props.disabled"
+		:aria-expanded="isOpen"
+		:aria-controls="panelId"
+		:aria-haspopup="props.panelRole === 'dialog' ? 'dialog' : undefined"
+		@click="toggleMenu"
+		@keydown="handleTriggerKeydown"
+	>
+		<slot name="trigger" />
+	</component>
+
+	<Teleport to="body">
+		<Transition
+			enter-active-class="transition duration-125 ease-out"
+			enter-from-class="scale-95 opacity-0"
+			enter-to-class="scale-100 opacity-100"
+			leave-active-class="transition duration-100 ease-in"
+			leave-from-class="scale-100 opacity-100"
+			leave-to-class="scale-95 opacity-0"
+		>
+			<div
+				v-if="isOpen"
+				:id="panelId"
+				ref="panelElement"
+				class="fixed isolate z-[9999] rounded-[14px] bg-surface-3 p-4 text-primary shadow-lg ring-1 ring-surface-5"
+				:style="panelStyle"
+				:role="props.panelRole"
+				:aria-label="props.label"
+				tabindex="-1"
+				@keydown="handlePanelKeydown"
+			>
+				<slot name="panel" :close="closeMenu" />
+			</div>
+		</Transition>
+	</Teleport>
+</template>
diff --git a/packages/ui/src/components/base/buttons/index.ts b/packages/ui/src/components/base/buttons/index.ts
new file mode 100644
index 0000000000..cbfc192984
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/index.ts
@@ -0,0 +1,23 @@
+export { default as Button } from './Button.vue'
+export { default as ButtonGroup } from './ButtonGroup.vue'
+export { default as ButtonLink } from './ButtonLink.vue'
+export { default as FileButton } from './FileButton.vue'
+export { default as IconButton } from './IconButton.vue'
+export { default as SplitButton } from './SplitButton.vue'
+export { default as TeleportOverflowMenu } from './TeleportOverflowMenu.vue'
+export { default as TeleportPopoutMenu } from './TeleportPopoutMenu.vue'
+export type {
+	ButtonColor,
+	ButtonElementHandle,
+	ButtonInteraction,
+	ButtonLinkDestination,
+	ButtonNativeType,
+	ButtonSize,
+	ButtonType,
+	ButtonVisualProps,
+	OverflowMenuAction,
+	OverflowMenuDivider,
+	OverflowMenuLink,
+	OverflowMenuOption,
+	TeleportPlacement,
+} from './types'
diff --git a/packages/ui/src/components/base/buttons/types.ts b/packages/ui/src/components/base/buttons/types.ts
new file mode 100644
index 0000000000..f50eb35dcd
--- /dev/null
+++ b/packages/ui/src/components/base/buttons/types.ts
@@ -0,0 +1,105 @@
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import type { AnchoredTeleportPlacement } from '../../../utils/use-anchored-teleport'
+
+export type ButtonType = 'base' | 'colored' | 'outlined' | 'quiet'
+
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type ButtonInteraction = 'surface' | 'filled' | 'none'
+
+// TODO: Standardized color string enum props across @modrinth/ui
+export type ButtonColor =
+	| 'brand'
+	| 'red'
+	| 'orange'
+	| 'green'
+	| 'blue'
+	| 'purple'
+	| 'medal_promotion'
+
+export type ButtonVisualProps = {
+	size?: ButtonSize
+	interaction?: ButtonInteraction
+} & (
+	| {
+			type?: 'base'
+			color?: never
+	  }
+	| {
+			type: 'outlined'
+			color?: ButtonColor
+	  }
+	| {
+			type: 'colored'
+			color?: ButtonColor
+	  }
+	| {
+			type: 'quiet'
+			color?: ButtonColor
+	  }
+)
+
+export type ButtonNativeType = 'button' | 'submit' | 'reset'
+
+export interface ButtonProps {
+	type?: ButtonType
+	color?: ButtonColor
+	size?: ButtonSize
+	interaction?: ButtonInteraction
+	nativeType?: ButtonNativeType
+	disabled?: boolean
+	loading?: boolean
+}
+
+export type ButtonLinkDestination =
+	| {
+			to: RouteLocationRaw
+			href?: never
+	  }
+	| {
+			href: string
+			to?: never
+	  }
+
+export type TeleportPlacement = AnchoredTeleportPlacement
+
+export interface OverflowMenuItemBase {
+	id: string
+	label: string
+	icon?: Component
+	shown?: boolean
+	disabled?: boolean
+	tooltip?: string
+	remainOpen?: boolean
+	tone?: 'default' | ButtonColor
+	hoverFilled?: boolean
+	hoverFilledOnly?: boolean
+}
+
+export interface OverflowMenuAction extends OverflowMenuItemBase {
+	type?: 'action'
+	action: (event: MouseEvent) => void
+}
+
+export interface OverflowMenuLink extends OverflowMenuItemBase {
+	type: 'link'
+	to?: RouteLocationRaw
+	href?: string
+	target?: string
+	rel?: string
+	download?: string | boolean
+}
+
+export interface OverflowMenuDivider {
+	type: 'divider'
+	id?: string
+	shown?: boolean
+}
+
+export type OverflowMenuOption = OverflowMenuAction | OverflowMenuLink | OverflowMenuDivider
+
+export interface ButtonElementHandle {
+	element: HTMLElement | null
+}
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 1373522c33..08b54ef241 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -9,8 +9,27 @@ export { default as Badge } from './Badge.vue'
 export { default as BaseTerminal } from './BaseTerminal.vue'
 export { default as BigOptionButton } from './BigOptionButton.vue'
 export { default as BulletDivider } from './BulletDivider.vue'
-export { default as Button } from './Button.vue'
-export { default as ButtonStyled } from './ButtonStyled.vue'
+export { default as Button } from './buttons/Button.vue'
+export { default as ButtonGroup } from './buttons/ButtonGroup.vue'
+export { default as ButtonLink } from './buttons/ButtonLink.vue'
+export { default as FileButton } from './buttons/FileButton.vue'
+export { default as IconButton } from './buttons/IconButton.vue'
+export { default as SplitButton } from './buttons/SplitButton.vue'
+export { default as TeleportOverflowMenu } from './buttons/TeleportOverflowMenu.vue'
+export { default as TeleportPopoutMenu } from './buttons/TeleportPopoutMenu.vue'
+export type {
+	ButtonColor,
+	ButtonInteraction,
+	ButtonNativeType,
+	ButtonSize,
+	ButtonType,
+	ButtonVisualProps,
+	OverflowMenuAction,
+	OverflowMenuDivider,
+	OverflowMenuLink,
+	OverflowMenuOption,
+	TeleportPlacement,
+} from './buttons/types'
 export { default as Card } from './Card.vue'
 export { default as Checkbox } from './Checkbox.vue'
 export { default as Chips } from './Chips.vue'
@@ -46,8 +65,6 @@ export { default as HorizontalRule } from './HorizontalRule.vue'
 export { default as I18nDebugPanel } from './I18nDebugPanel.vue'
 export { default as IconSelect } from './IconSelect.vue'
 export { default as IntlFormatted } from './IntlFormatted.vue'
-export type { JoinedButtonAction } from './JoinedButtons.vue'
-export { default as JoinedButtons } from './JoinedButtons.vue'
 export { default as LoadingBar } from './LoadingBar.vue'
 export { default as LoadingIndicator } from './LoadingIndicator.vue'
 export { default as ManySelect } from './ManySelect.vue'
@@ -62,8 +79,6 @@ export type { MaybeCtxFn, StageButtonConfig, StageConfigInput } from './MultiSta
 export { default as MultiStageModal, resolveCtxFn } from './MultiStageModal.vue'
 export { default as NavTabs } from './NavTabs.vue'
 export { default as OptionGroup } from './OptionGroup.vue'
-export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
-export { default as OverflowMenu } from './OverflowMenu.vue'
 export { default as Page } from './Page.vue'
 export { default as PageHeader } from './page-header/index.vue'
 export { default as PageHeaderMetadata } from './page-header/metadata/index.vue'
@@ -106,11 +121,6 @@ export type { TabsTab, TabsValue } from './Tabs.vue'
 export { default as Tabs } from './Tabs.vue'
 export { default as TagItem } from './TagItem.vue'
 export { default as TagTagItem } from './TagTagItem.vue'
-export type {
-	Item as TeleportOverflowMenuItem,
-	Option as TeleportOverflowMenuOption,
-} from './TeleportOverflowMenu.vue'
-export { default as TeleportOverflowMenu } from './TeleportOverflowMenu.vue'
 export type {
 	TimeFrameLastUnit,
 	TimeFrameLastUnitOption,
diff --git a/packages/ui/src/components/billing/AddPaymentMethodModal.vue b/packages/ui/src/components/billing/AddPaymentMethodModal.vue
index 8e1361adb6..a05eaf4f20 100644
--- a/packages/ui/src/components/billing/AddPaymentMethodModal.vue
+++ b/packages/ui/src/components/billing/AddPaymentMethodModal.vue
@@ -3,9 +3,11 @@ import { PlusIcon, XIcon } from '@modrinth/assets'
 import type Stripe from 'stripe'
 import { nextTick, ref, useTemplateRef } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils'
-import { ButtonStyled, NewModal } from '../index'
+import { NewModal } from '../index'
 import type { AddPaymentMethodProps } from './AddPaymentMethod.vue'
 import AddPaymentMethod from './AddPaymentMethod.vue'
 
@@ -57,18 +59,14 @@ defineExpose({
 				@stop-loading="loading = false"
 			/>
 			<div class="input-group mt-auto pt-4">
-				<ButtonStyled color="brand">
-					<button :disabled="loading" @click="addPaymentMethod.submit()">
-						<PlusIcon />
-						{{ formatMessage(messages.paymentMethodAdd) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="modal.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" :disabled="loading" @click="addPaymentMethod.submit()">
+					<PlusIcon />
+					{{ formatMessage(messages.paymentMethodAdd) }}
+				</Button>
+				<Button @click="modal.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index bdae9d75ed..14c1eacd8a 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -12,12 +12,12 @@ import { useQueryClient } from '@tanstack/vue-query'
 import type Stripe from 'stripe'
 import { computed, nextTick, onBeforeUnmount, ref, toRef, useTemplateRef, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
 import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
 
 import { defineMessage, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { useStripe } from '../../composables/stripe'
 import { commonMessages } from '../../utils'
-import { ButtonStyled } from '../index'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
 import NewModal from '../modal/NewModal.vue'
 import PlanSelector from './ServersPurchase0Plan.vue'
@@ -555,51 +555,50 @@ function goToBreadcrumbStep(id: string) {
 			</div>
 		</div>
 		<div class="flex gap-2 justify-between mt-4">
-			<ButtonStyled>
-				<button v-if="previousStep" @click="previousStep && setStep(previousStep, true)">
-					<LeftArrowIcon /> {{ formatMessage(commonMessages.backButton) }}
-				</button>
-				<button v-else-if="currentStep !== 'plan'" @click="modal?.hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled v-if="currentStep !== 'plan'" color="brand">
-				<button
-					v-tooltip="
-						currentStep === 'review' && !acceptedEula && !noPaymentRequired
-							? 'You must accept the Minecraft EULA to proceed.'
-							: undefined
-					"
-					:disabled="!canProceed"
-					@click="
-						noPaymentRequired && currentStep === 'review'
-							? (async () => {
-									if (props.onFinalizeNoPaymentChange) {
-										try {
-											await props.onFinalizeNoPaymentChange()
-										} catch (e) {
-											return
-										}
+			<Button v-if="previousStep" @click="previousStep && setStep(previousStep, true)">
+				<LeftArrowIcon /> {{ formatMessage(commonMessages.backButton) }}
+			</Button>
+			<Button v-else-if="currentStep !== 'plan'" @click="modal?.hide()">
+				<XIcon />
+				{{ formatMessage(commonMessages.cancelButton) }}
+			</Button>
+			<Button
+				v-if="currentStep !== 'plan'"
+				v-tooltip="
+					currentStep === 'review' && !acceptedEula && !noPaymentRequired
+						? 'You must accept the Minecraft EULA to proceed.'
+						: undefined
+				"
+				type="colored"
+				color="brand"
+				:disabled="!canProceed"
+				@click="
+					noPaymentRequired && currentStep === 'review'
+						? (async () => {
+								if (props.onFinalizeNoPaymentChange) {
+									try {
+										await props.onFinalizeNoPaymentChange()
+									} catch (e) {
+										return
 									}
-									modal?.hide()
-								})()
-							: setStep(nextStep)
-					"
-				>
-					<template v-if="currentStep === 'review'">
-						<template v-if="noPaymentRequired"><CheckCircleIcon /> Confirm Change</template>
-						<template v-else>
-							<SpinnerIcon v-if="completingPurchase" class="animate-spin" />
-							<CheckCircleIcon v-else />
-							Subscribe
-						</template>
-					</template>
+								}
+								modal?.hide()
+							})()
+						: setStep(nextStep)
+				"
+			>
+				<template v-if="currentStep === 'review'">
+					<template v-if="noPaymentRequired"><CheckCircleIcon /> Confirm Change</template>
 					<template v-else>
-						{{ formatMessage(commonMessages.nextButton) }} <RightArrowIcon />
+						<SpinnerIcon v-if="completingPurchase" class="animate-spin" />
+						<CheckCircleIcon v-else />
+						Subscribe
 					</template>
-				</button>
-			</ButtonStyled>
+				</template>
+				<template v-else>
+					{{ formatMessage(commonMessages.nextButton) }} <RightArrowIcon />
+				</template>
+			</Button>
 		</div>
 	</NewModal>
 </template>
diff --git a/packages/ui/src/components/billing/ResubscribeModal.vue b/packages/ui/src/components/billing/ResubscribeModal.vue
index 298416af3b..084f3a0a35 100644
--- a/packages/ui/src/components/billing/ResubscribeModal.vue
+++ b/packages/ui/src/components/billing/ResubscribeModal.vue
@@ -78,18 +78,14 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(messages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!canResubscribe" @click="handleResubscribe">
-						<RotateCounterClockwiseIcon />
-						{{ formatMessage(messages.resubscribeButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(messages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!canResubscribe" @click="handleResubscribe">
+					<RotateCounterClockwiseIcon />
+					{{ formatMessage(messages.resubscribeButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -100,12 +96,13 @@ import type { Labrinth } from '@modrinth/api-client'
 import { RotateCounterClockwiseIcon, XIcon } from '@modrinth/assets'
 import { computed, ref, useTemplateRef } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
 import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
 
 import { useFormatDateTime, useFormatPrice } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import IntlFormatted from '../base/IntlFormatted.vue'
-import { ButtonStyled, NewModal } from '../index'
+import { NewModal } from '../index'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/components/billing/ServersGuestPlanModal.vue b/packages/ui/src/components/billing/ServersGuestPlanModal.vue
index f99f2ecc52..f1322c88ac 100644
--- a/packages/ui/src/components/billing/ServersGuestPlanModal.vue
+++ b/packages/ui/src/components/billing/ServersGuestPlanModal.vue
@@ -3,7 +3,8 @@ import type { Labrinth } from '@modrinth/api-client'
 import { ChevronRightIcon, ExternalIcon, XIcon } from '@modrinth/assets'
 import { computed, ref, useTemplateRef } from 'vue'
 
-import ButtonStyled from '../base/ButtonStyled.vue'
+import { Button, IconButton } from '#ui/components/base/buttons'
+
 import NewModal from '../modal/NewModal.vue'
 import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 import PlanSelector from './ServersPurchase0Plan.vue'
@@ -143,11 +144,9 @@ defineExpose({
 					class="absolute inset-x-0 bottom-0 -m-px z-30 rounded-2xl border border-solid border-surface-5 bg-bg-raised p-6 shadow-2xl"
 				>
 					<div class="absolute right-4 top-4">
-						<ButtonStyled circular type="transparent">
-							<button aria-label="Close sign in prompt" @click="closeSignInPrompt">
-								<XIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton type="quiet" label="Close sign in prompt" @click="closeSignInPrompt">
+							<XIcon />
+						</IconButton>
 					</div>
 
 					<div class="mx-auto flex max-w-xl flex-col items-center gap-4 text-center">
@@ -155,12 +154,10 @@ defineExpose({
 							<div class="font-semibold text-contrast">Sign in to continue your purchase</div>
 							<div class="">You need a Modrinth account to add your billing details.</div>
 						</div>
-						<ButtonStyled color="brand">
-							<button class="mt-2" @click="continueToAuth">
-								Sign in or create an account
-								<ExternalIcon class="size-4" />
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" class="mt-2" @click="continueToAuth">
+							Sign in or create an account
+							<ExternalIcon class="size-4" />
+						</Button>
 					</div>
 				</div>
 			</Transition>
diff --git a/packages/ui/src/components/billing/ServersPurchase0Plan.vue b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
index 456b324aea..03ae8aaf7b 100644
--- a/packages/ui/src/components/billing/ServersPurchase0Plan.vue
+++ b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
@@ -3,10 +3,11 @@ import type { Labrinth } from '@modrinth/api-client'
 import { RightArrowIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useFormatPrice } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
-import ButtonStyled from '../base/ButtonStyled.vue'
 import OptionGroup from '../base/OptionGroup.vue'
 import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 import ServersSpecs from './ServersSpecs.vue'
@@ -218,19 +219,19 @@ function selectCustom() {
 				</div>
 			</div>
 			<div class="w-full">
-				<ButtonStyled color="blue">
-					<button
-						class="w-full"
-						:disabled="existingPlan?.id === plansByRam.small.id"
-						@click="selectPlan(plansByRam.small!)"
-					>
-						{{
-							existingPlan?.id === plansByRam.small.id
-								? formatMessage(messages.yourCurrentPlan)
-								: formatMessage(messages.selectPlan)
-						}}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="blue"
+					class="w-full"
+					:disabled="existingPlan?.id === plansByRam.small.id"
+					@click="selectPlan(plansByRam.small!)"
+				>
+					{{
+						existingPlan?.id === plansByRam.small.id
+							? formatMessage(messages.yourCurrentPlan)
+							: formatMessage(messages.selectPlan)
+					}}
+				</Button>
 			</div>
 			<ServersSpecs
 				v-if="smallSpecs"
@@ -281,19 +282,19 @@ function selectCustom() {
 					</div>
 				</div>
 				<div class="w-full">
-					<ButtonStyled color="brand" class="w-full">
-						<button
-							class="w-full"
-							:disabled="existingPlan?.id === plansByRam.medium.id"
-							@click="selectPlan(plansByRam.medium!)"
-						>
-							{{
-								existingPlan?.id === plansByRam.medium.id
-									? formatMessage(messages.yourCurrentPlan)
-									: formatMessage(messages.selectPlan)
-							}}
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="brand"
+						class="w-full"
+						:disabled="existingPlan?.id === plansByRam.medium.id"
+						@click="selectPlan(plansByRam.medium!)"
+					>
+						{{
+							existingPlan?.id === plansByRam.medium.id
+								? formatMessage(messages.yourCurrentPlan)
+								: formatMessage(messages.selectPlan)
+						}}
+					</Button>
 				</div>
 				<ServersSpecs
 					v-if="mediumSpecs"
@@ -329,19 +330,19 @@ function selectCustom() {
 				</div>
 			</div>
 			<div class="w-full">
-				<ButtonStyled color="purple" class="w-full">
-					<button
-						class="w-full"
-						:disabled="existingPlan?.id === plansByRam.large.id"
-						@click="selectPlan(plansByRam.large!)"
-					>
-						{{
-							existingPlan?.id === plansByRam.large.id
-								? formatMessage(messages.yourCurrentPlan)
-								: formatMessage(messages.selectPlan)
-						}}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="colored"
+					color="purple"
+					class="w-full"
+					:disabled="existingPlan?.id === plansByRam.large.id"
+					@click="selectPlan(plansByRam.large!)"
+				>
+					{{
+						existingPlan?.id === plansByRam.large.id
+							? formatMessage(messages.yourCurrentPlan)
+							: formatMessage(messages.selectPlan)
+					}}
+				</Button>
 			</div>
 			<ServersSpecs
 				v-if="largeSpecs"
@@ -366,11 +367,9 @@ function selectCustom() {
 			</div>
 		</div>
 		<div class="flex flex-col items-end gap-2 shrink-0">
-			<ButtonStyled>
-				<button class="flex items-center gap-2" @click="selectCustom">
-					{{ formatMessage(messages.getStarted) }} <RightArrowIcon class="h-4 w-4" />
-				</button>
-			</ButtonStyled>
+			<Button class="flex items-center gap-2" @click="selectCustom">
+				{{ formatMessage(messages.getStarted) }} <RightArrowIcon class="h-4 w-4" />
+			</Button>
 			<div class="text-sm text-secondary whitespace-nowrap">
 				Starting at {{ formatPrice(customStartingPrice, currency, true) }}/mo
 			</div>
diff --git a/packages/ui/src/components/billing/ServersPurchase3Review.vue b/packages/ui/src/components/billing/ServersPurchase3Review.vue
index bfe6096c8d..ce76cbc1af 100644
--- a/packages/ui/src/components/billing/ServersPurchase3Review.vue
+++ b/packages/ui/src/components/billing/ServersPurchase3Review.vue
@@ -15,11 +15,12 @@ import dayjs from 'dayjs'
 import type Stripe from 'stripe'
 import { computed } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useFormatPrice } from '../../composables'
 import { useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import { regionOverrides } from '../../utils/regions'
-import ButtonStyled from '../base/ButtonStyled.vue'
 import Checkbox from '../base/Checkbox.vue'
 import TagItem from '../base/TagItem.vue'
 import ModrinthServersIcon from '../servers/ModrinthServersIcon.vue'
@@ -323,12 +324,10 @@ function setInterval(newInterval: ServerBillingInterval) {
 				No payment method selected
 			</div>
 		</template>
-		<ButtonStyled size="small" type="transparent">
-			<button class="ml-auto" @click="emit('changePaymentMethod')">
-				<template v-if="selectedPaymentMethod || hasPaymentMethod"> <EditIcon /> Change </template>
-				<template v-else> Select payment method <RightArrowIcon /> </template>
-			</button>
-		</ButtonStyled>
+		<Button type="quiet" size="xs" class="ml-auto !h-6" @click="emit('changePaymentMethod')">
+			<template v-if="selectedPaymentMethod || hasPaymentMethod"> <EditIcon /> Change </template>
+			<template v-else> Select payment method <RightArrowIcon /> </template>
+		</Button>
 	</div>
 	<p v-if="!noPaymentRequired" class="m-0 mt-4 text-sm text-secondary">
 		<template v-if="isUpgrade && (total ?? 0) > 0">
diff --git a/packages/ui/src/components/chart/Chart.vue b/packages/ui/src/components/chart/Chart.vue
index 43c11e1fb5..72d42bc67a 100644
--- a/packages/ui/src/components/chart/Chart.vue
+++ b/packages/ui/src/components/chart/Chart.vue
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { defineAsyncComponent, onMounted, ref } from 'vue'
 
 import { useFormatNumber } from '../../composables/index.ts'
-import Button from '../base/Button.vue'
+import { IconButton } from '../base/buttons'
 import Checkbox from '../base/Checkbox.vue'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
@@ -231,12 +231,16 @@ defineExpose({
 		<div class="title-bar">
 			<slot />
 			<div v-if="!hideToolbar" class="toolbar">
-				<Button v-tooltip="'Download data as CSV'" icon-only @click="downloadCSV">
+				<IconButton
+					v-tooltip="'Download data as CSV'"
+					label="Download data as CSV"
+					@click="downloadCSV"
+				>
 					<!-- <DownloadIcon /> -->
-				</Button>
-				<Button v-tooltip="'Reset chart'" icon-only @click="resetChart">
+				</IconButton>
+				<IconButton v-tooltip="'Reset chart'" label="Reset chart" @click="resetChart">
 					<!-- <UpdatedIcon /> -->
-				</Button>
+				</IconButton>
 				<slot name="toolbar" />
 			</div>
 		</div>
diff --git a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
index fc94cf5af1..effcec44fa 100644
--- a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
+++ b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
@@ -3,7 +3,8 @@ import type { Labrinth } from '@modrinth/api-client'
 import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
-import { ButtonStyled, NewModal, StyledInput } from '#ui/components'
+import { NewModal, StyledInput } from '#ui/components'
+import { Button } from '#ui/components/base/buttons'
 import { commonMessages } from '#ui/utils'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
@@ -263,23 +264,21 @@ defineExpose({ show, hide })
 					{{ formatMessage(messages.addFilesModalSelectedCount, { count: selectedFileCount }) }}
 				</p>
 				<div class="flex gap-2 ml-auto">
-					<ButtonStyled type="outlined">
-						<button type="button" :disabled="pending" @click="hide">
-							<XIcon class="size-4 shrink-0" />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button
-							type="button"
-							:disabled="selectedFileCount === 0 || pending"
-							@click="handleConfirm"
-						>
-							<SpinnerIcon v-if="pending" class="size-4 shrink-0 animate-spin" />
-							<PlusIcon v-else class="size-4 shrink-0" />
-							{{ formatMessage(messages.addFilesModalConfirm, { count: selectedFileCount }) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" native-type="button" :disabled="pending" @click="hide">
+						<XIcon class="size-4 shrink-0" />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						native-type="button"
+						:disabled="selectedFileCount === 0 || pending"
+						@click="handleConfirm"
+					>
+						<SpinnerIcon v-if="pending" class="size-4 shrink-0 animate-spin" />
+						<PlusIcon v-else class="size-4 shrink-0" />
+						{{ formatMessage(messages.addFilesModalConfirm, { count: selectedFileCount }) }}
+					</Button>
 				</div>
 			</div>
 		</template>
diff --git a/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue b/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
index 9ad61e3b1a..85ccadcae4 100644
--- a/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
+++ b/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
@@ -4,7 +4,8 @@ import { PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef } from 'vue'
 
-import { Accordion, ButtonStyled, NewModal, StyledInput } from '#ui/components'
+import { Accordion, NewModal, StyledInput } from '#ui/components'
+import { Button } from '#ui/components/base/buttons'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
 import AttributionGroupFilePicker from './AttributionGroupFilePicker.vue'
@@ -228,12 +229,15 @@ defineExpose({ show, hide })
 							wrapper-class="flex-1 min-w-[12rem]"
 							:disabled="addFilesMutation.isPending.value"
 						/>
-						<ButtonStyled color="brand">
-							<button type="submit" :disabled="addFilesMutation.isPending.value">
-								<SearchIcon aria-hidden="true" />
-								Search
-							</button>
-						</ButtonStyled>
+						<Button
+							type="colored"
+							color="brand"
+							native-type="submit"
+							:disabled="addFilesMutation.isPending.value"
+						>
+							<SearchIcon aria-hidden="true" />
+							Search
+						</Button>
 					</form>
 					<div
 						class="flex flex-col min-h-0 max-h-[min(50vh,24rem)] overflow-y-auto overflow-x-hidden"
@@ -269,17 +273,15 @@ defineExpose({ show, hide })
 								class="mx-4 mt-3"
 							>
 								<template #actions>
-									<ButtonStyled color="brand">
-										<button
-											type="button"
-											:disabled="
-												selectedProjectId === project.id || addFilesMutation.isPending.value
-											"
-											@click="selectProject(project.id)"
-										>
-											{{ selectedProjectId === project.id ? 'Selected' : 'Select' }}
-										</button>
-									</ButtonStyled>
+									<Button
+										type="colored"
+										color="brand"
+										native-type="button"
+										:disabled="selectedProjectId === project.id || addFilesMutation.isPending.value"
+										@click="selectProject(project.id)"
+									>
+										{{ selectedProjectId === project.id ? 'Selected' : 'Select' }}
+									</Button>
 								</template>
 							</ExternalProjectLookupCard>
 						</div>
@@ -306,22 +308,29 @@ defineExpose({ show, hide })
 				/>
 			</Accordion>
 			<div class="flex justify-end gap-2 w-full">
-				<ButtonStyled type="outlined">
-					<button type="button" :disabled="addFilesMutation.isPending.value" @click="hide">
-						<XIcon class="size-4 shrink-0" />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button type="button" :disabled="!canSubmit" @click="handleSubmit">
-						<SpinnerIcon
-							v-if="addFilesMutation.isPending.value"
-							class="size-4 shrink-0 animate-spin"
-						/>
-						<PlusIcon v-else class="size-4 shrink-0" />
-						Add files to entry
-					</button>
-				</ButtonStyled>
+				<Button
+					type="outlined"
+					native-type="button"
+					:disabled="addFilesMutation.isPending.value"
+					@click="hide"
+				>
+					<XIcon class="size-4 shrink-0" />
+					Cancel
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					native-type="button"
+					:disabled="!canSubmit"
+					@click="handleSubmit"
+				>
+					<SpinnerIcon
+						v-if="addFilesMutation.isPending.value"
+						class="size-4 shrink-0 animate-spin"
+					/>
+					<PlusIcon v-else class="size-4 shrink-0" />
+					Add files to entry
+				</Button>
 			</div>
 		</div>
 	</NewModal>
diff --git a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
index c3a55d80d0..e36d1785d9 100644
--- a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
+++ b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
@@ -4,14 +4,8 @@ import { PlusIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef } from 'vue'
 
-import {
-	Accordion,
-	ButtonStyled,
-	Combobox,
-	type ComboboxOption,
-	NewModal,
-	StyledInput,
-} from '#ui/components'
+import { Accordion, Combobox, type ComboboxOption, NewModal, StyledInput } from '#ui/components'
+import { Button } from '#ui/components/base/buttons'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
 import AttributionGroupFilePicker from './AttributionGroupFilePicker.vue'
@@ -223,22 +217,26 @@ defineExpose({ show, hide })
 				</div>
 			</Accordion>
 			<div class="flex justify-end gap-2 w-full">
-				<ButtonStyled type="outlined">
-					<button type="button" :disabled="createMutation.isPending.value" @click="hide">
-						<XIcon class="size-4 shrink-0" />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button type="button" :disabled="!canSubmit" @click="handleSubmit">
-						<SpinnerIcon
-							v-if="createMutation.isPending.value"
-							class="size-4 shrink-0 animate-spin"
-						/>
-						<PlusIcon v-else class="size-4 shrink-0" />
-						Add to global database
-					</button>
-				</ButtonStyled>
+				<Button
+					type="outlined"
+					native-type="button"
+					:disabled="createMutation.isPending.value"
+					@click="hide"
+				>
+					<XIcon class="size-4 shrink-0" />
+					Cancel
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					native-type="button"
+					:disabled="!canSubmit"
+					@click="handleSubmit"
+				>
+					<SpinnerIcon v-if="createMutation.isPending.value" class="size-4 shrink-0 animate-spin" />
+					<PlusIcon v-else class="size-4 shrink-0" />
+					Add to global database
+				</Button>
 			</div>
 		</div>
 	</NewModal>
diff --git a/packages/ui/src/components/external_files/AttributionEditor.vue b/packages/ui/src/components/external_files/AttributionEditor.vue
index 3694793a02..82e99ad7cb 100644
--- a/packages/ui/src/components/external_files/AttributionEditor.vue
+++ b/packages/ui/src/components/external_files/AttributionEditor.vue
@@ -14,8 +14,9 @@ import { builtinLicenses } from '@modrinth/utils'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import { ButtonStyled, Chips, Combobox, type ComboboxOption, StyledInput } from '#ui/components'
+import { Chips, Combobox, type ComboboxOption, StyledInput } from '#ui/components'
 import { FileInput } from '#ui/components/base'
+import { Button, IconButton } from '#ui/components/base/buttons'
 import { commonMessages } from '#ui/utils'
 
 import { defineMessage, defineMessages, useVIntl } from '../../composables/i18n'
@@ -577,15 +578,14 @@ function cancelEditing() {
 									class="flex w-full object-contain bg-surface-3"
 								/>
 								<div class="absolute top-2 right-2">
-									<ButtonStyled circular>
-										<button
-											v-tooltip="formatMessage(messages.proofImageRemove)"
-											type="button"
-											@click="removeProofImage(idx)"
-										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
+									<IconButton
+										v-tooltip="formatMessage(messages.proofImageRemove)"
+										:label="formatMessage(messages.proofImageRemove)"
+										native-type="button"
+										@click="removeProofImage(idx)"
+									>
+										<TrashIcon />
+									</IconButton>
 								</div>
 							</div>
 						</div>
@@ -633,29 +633,29 @@ function cancelEditing() {
 
 		<hr class="mt-1 bg-surface-5 border-none h-[1px] w-full" />
 		<div class="flex items-center gap-2 justify-end">
-			<ButtonStyled v-if="isAttributed" type="outlined">
-				<button
-					:disabled="saveMutation.isPending.value || uploadProofImageMutation.isPending.value"
-					@click="cancelEditing"
-				>
-					<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled color="brand">
-				<button
-					:disabled="saveMutation.isPending.value || uploadProofImageMutation.isPending.value"
-					@click="handleSave"
-				>
-					<template v-if="saveMutation.isPending.value">
-						<SpinnerIcon class="animate-spin" />
-						{{ formatMessage(commonMessages.savingButton) }}
-					</template>
-					<template v-else-if="isAttributed">
-						<SaveIcon /> {{ formatMessage(messages.saveAttribution) }}
-					</template>
-					<template v-else> <CheckIcon /> {{ formatMessage(messages.addAttribution) }} </template>
-				</button>
-			</ButtonStyled>
+			<Button
+				v-if="isAttributed"
+				type="outlined"
+				:disabled="saveMutation.isPending.value || uploadProofImageMutation.isPending.value"
+				@click="cancelEditing"
+			>
+				<XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
+			</Button>
+			<Button
+				type="colored"
+				color="brand"
+				:disabled="saveMutation.isPending.value || uploadProofImageMutation.isPending.value"
+				@click="handleSave"
+			>
+				<template v-if="saveMutation.isPending.value">
+					<SpinnerIcon class="animate-spin" />
+					{{ formatMessage(commonMessages.savingButton) }}
+				</template>
+				<template v-else-if="isAttributed">
+					<SaveIcon /> {{ formatMessage(messages.saveAttribution) }}
+				</template>
+				<template v-else> <CheckIcon /> {{ formatMessage(messages.addAttribution) }} </template>
+			</Button>
 		</div>
 	</div>
 </template>
diff --git a/packages/ui/src/components/external_files/ExternalProjectLookupCard.vue b/packages/ui/src/components/external_files/ExternalProjectLookupCard.vue
index 4bf6a34a92..2467b5d3cf 100644
--- a/packages/ui/src/components/external_files/ExternalProjectLookupCard.vue
+++ b/packages/ui/src/components/external_files/ExternalProjectLookupCard.vue
@@ -9,7 +9,8 @@ import {
 import { Menu } from 'floating-vue'
 import { computed } from 'vue'
 
-import { ButtonStyled, CopyCode } from '#ui/components'
+import { CopyCode } from '#ui/components'
+import { IconButton } from '#ui/components/base/buttons'
 
 import ExternalProjectLicenseStateTag from './ExternalProjectLicenseStateTag.vue'
 import type { ExternalLicenseStatus } from './types.ts'
@@ -58,11 +59,16 @@ async function copyProjectLink() {
 						</template>
 						<template v-else> <LinkIcon class="size-5 shrink-0" /> Project link </template>
 					</a>
-					<ButtonStyled circular type="transparent" size="small">
-						<button v-tooltip="'Copy link'" @click="copyProjectLink">
-							<ClipboardCopyIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-tooltip="'Copy link'"
+						class="!size-6"
+						type="quiet"
+						size="xs"
+						:label="'Copy link'"
+						@click="copyProjectLink"
+					>
+						<ClipboardCopyIcon />
+					</IconButton>
 				</div>
 			</div>
 			<slot name="actions" />
diff --git a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
index bb26531235..9dc39af921 100644
--- a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
+++ b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
@@ -18,8 +18,9 @@ import { renderString } from '@modrinth/utils'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
-import { ButtonStyled, Collapsible, ConfirmModal, OverflowMenu } from '#ui/components'
+import { Collapsible, ConfirmModal } from '#ui/components'
 import type { OverflowMenuOption } from '#ui/components/base'
+import { Button, IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import { commonMessages } from '#ui/utils'
 
 import { defineMessage, defineMessages, useVIntl } from '../../composables/i18n'
@@ -498,6 +499,7 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 			(reply) =>
 				({
 					id: reply.label,
+					label: reply.label,
 					action: () => handleQuickReply(reply),
 				}) as OverflowMenuOption,
 		)
@@ -577,28 +579,27 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 							</span>
 						</div>
 						<div class="flex items-center gap-1 my-auto">
-							<ButtonStyled v-if="group.files.length > 1" circular size="small">
-								<button
-									v-tooltip="formatMessage(messages.splitFile)"
-									class="m-1"
-									:disabled="splitFileMutation.isPending.value"
-									@click="handleSplitFile(file.sha1)"
-								>
-									<SpinnerIcon
-										v-if="splitFileMutation.isPending.value && pendingSplitSha1 === file.sha1"
-										class="size-4 shrink-0 animate-spin"
-									/>
-									<XIcon v-else class="size-4 shrink-0" />
-								</button>
-							</ButtonStyled>
+							<IconButton
+								v-if="group.files.length > 1"
+								v-tooltip="formatMessage(messages.splitFile)"
+								class="m-1 !size-6"
+								size="xs"
+								:label="formatMessage(messages.splitFile)"
+								:disabled="splitFileMutation.isPending.value"
+								@click="handleSplitFile(file.sha1)"
+							>
+								<SpinnerIcon
+									v-if="splitFileMutation.isPending.value && pendingSplitSha1 === file.sha1"
+									class="size-4 shrink-0 animate-spin"
+								/>
+								<XIcon v-else class="size-4 shrink-0" />
+							</IconButton>
 						</div>
 					</span>
 					<div>
-						<ButtonStyled>
-							<button @click="handleAddFilesToGroup($event)">
-								<PlusIcon class="size-4 shrink-0" /> {{ formatMessage(messages.addFilesToGroup) }}
-							</button>
-						</ButtonStyled>
+						<Button @click="handleAddFilesToGroup($event)">
+							<PlusIcon class="size-4 shrink-0" /> {{ formatMessage(messages.addFilesToGroup) }}
+						</Button>
 					</div>
 				</div>
 				<template v-if="(containingVersions?.length ?? 0) > 0">
@@ -644,11 +645,9 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 						"
 						#actions
 					>
-						<ButtonStyled>
-							<button @click="startEditingAttribution">
-								<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-							</button>
-						</ButtonStyled>
+						<Button @click="startEditingAttribution">
+							<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+						</Button>
 					</template>
 					<template
 						v-if="
@@ -714,81 +713,83 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 											class="mt-3"
 										/>
 										<div class="flex items-center gap-2 flex-wrap mt-3">
-											<ButtonStyled v-if="visibleQuickReplies.length > 0">
-												<OverflowMenu :options="visibleQuickReplies">
-													Reply presets
-													<ChevronDownIcon />
-												</OverflowMenu>
-											</ButtonStyled>
-											<ButtonStyled color="green" color-fill="text">
-												<button
-													:disabled="setModerationStatusMutation.isPending.value"
-													@click="handleSetModerationStatus('approved')"
-												>
-													<SpinnerIcon
-														v-if="
-															setModerationStatusMutation.isPending.value &&
-															pendingModerationStatusKind === 'approved'
-														"
-														class="size-4 shrink-0 animate-spin"
-													/>
-													<CheckCircleIcon v-else />
-													Approve
-												</button>
-											</ButtonStyled>
-											<ButtonStyled color="red" color-fill="text">
-												<button
-													:disabled="setModerationStatusMutation.isPending.value"
-													@click="handleSetModerationStatus('bad_proof')"
-												>
-													<SpinnerIcon
-														v-if="
-															setModerationStatusMutation.isPending.value &&
-															pendingModerationStatusKind === 'bad_proof'
-														"
-														class="size-4 shrink-0 animate-spin"
-													/>
-													<XCircleIcon v-else />
-													Reject: Insufficient proof
-												</button>
-											</ButtonStyled>
-											<ButtonStyled color="red" color-fill="text">
-												<button
-													:disabled="setModerationStatusMutation.isPending.value"
-													@click="handleSetModerationStatus('not_allowed')"
-												>
-													<SpinnerIcon
-														v-if="
-															setModerationStatusMutation.isPending.value &&
-															pendingModerationStatusKind === 'not_allowed'
-														"
-														class="size-4 shrink-0 animate-spin"
-													/>
-													<ReportIcon v-else />
-													Reject: Not allowed
-												</button>
-											</ButtonStyled>
-											<ButtonStyled v-if="isEditingModerationReview" type="outlined">
-												<button
-													:disabled="setModerationStatusMutation.isPending.value"
-													@click="cancelModerationReviewEditing"
-												>
-													<XIcon />
-													{{ formatMessage(commonMessages.cancelButton) }}
-												</button>
-											</ButtonStyled>
+											<TeleportOverflowMenu
+												v-if="visibleQuickReplies.length > 0"
+												label="More options"
+												:options="visibleQuickReplies"
+												class="!w-auto !px-2.5 !rounded-xl"
+											>
+												Reply presets
+												<ChevronDownIcon />
+											</TeleportOverflowMenu>
+											<Button
+												type="quiet"
+												color="green"
+												:disabled="setModerationStatusMutation.isPending.value"
+												class="!text-green [&>svg]:!text-green"
+												@click="handleSetModerationStatus('approved')"
+											>
+												<SpinnerIcon
+													v-if="
+														setModerationStatusMutation.isPending.value &&
+														pendingModerationStatusKind === 'approved'
+													"
+													class="size-4 shrink-0 animate-spin"
+												/>
+												<CheckCircleIcon v-else />
+												Approve
+											</Button>
+											<Button
+												type="quiet"
+												color="red"
+												:disabled="setModerationStatusMutation.isPending.value"
+												class="!text-red [&>svg]:!text-red"
+												@click="handleSetModerationStatus('bad_proof')"
+											>
+												<SpinnerIcon
+													v-if="
+														setModerationStatusMutation.isPending.value &&
+														pendingModerationStatusKind === 'bad_proof'
+													"
+													class="size-4 shrink-0 animate-spin"
+												/>
+												<XCircleIcon v-else />
+												Reject: Insufficient proof
+											</Button>
+											<Button
+												type="quiet"
+												color="red"
+												:disabled="setModerationStatusMutation.isPending.value"
+												class="!text-red [&>svg]:!text-red"
+												@click="handleSetModerationStatus('not_allowed')"
+											>
+												<SpinnerIcon
+													v-if="
+														setModerationStatusMutation.isPending.value &&
+														pendingModerationStatusKind === 'not_allowed'
+													"
+													class="size-4 shrink-0 animate-spin"
+												/>
+												<ReportIcon v-else />
+												Reject: Not allowed
+											</Button>
+											<Button
+												v-if="isEditingModerationReview"
+												type="outlined"
+												:disabled="setModerationStatusMutation.isPending.value"
+												@click="cancelModerationReviewEditing"
+											>
+												<XIcon />
+												{{ formatMessage(commonMessages.cancelButton) }}
+											</Button>
 										</div>
 										<div class="flex items-center gap-2 flex-wrap mt-3">
-											<ButtonStyled>
-												<button @click="handleAddToGlobalDatabase">
-													<ScaleIcon /> Add files to database...
-												</button>
-											</ButtonStyled>
-											<ButtonStyled>
-												<button @click="handleAddToExistingEntry">
-													<ScaleIcon /> Add to existing entry...
-												</button>
-											</ButtonStyled>
+											<Button @click="handleAddToGlobalDatabase">
+												<ScaleIcon /> Add files to database...
+											</Button>
+											<Button @click="handleAddToExistingEntry">
+												<ScaleIcon /> Add to existing entry...
+											</Button>
 										</div>
 									</template>
 								</template>
@@ -808,12 +809,10 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 								"
 								class="ml-auto"
 							>
-								<ButtonStyled color="orange">
-									<button @click="startEditingModerationReview">
-										<ScaleIcon />
-										{{ formatMessage(commonMessages.editButton) }}
-									</button>
-								</ButtonStyled>
+								<Button type="colored" color="orange" @click="startEditingModerationReview">
+									<ScaleIcon />
+									{{ formatMessage(commonMessages.editButton) }}
+								</Button>
 							</div>
 						</div>
 					</template>
@@ -835,16 +834,19 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 					/>
 				</div>
 				<div v-if="isModerator" class="flex justify-end pt-2">
-					<ButtonStyled color="red" type="outlined">
-						<button :disabled="deleteGroupMutation.isPending.value" @click="handleDeleteGroup">
-							<SpinnerIcon
-								v-if="deleteGroupMutation.isPending.value"
-								class="size-4 shrink-0 animate-spin"
-							/>
-							<TrashIcon v-else class="size-4 shrink-0" />
-							{{ formatMessage(messages.removeGroup) }}
-						</button>
-					</ButtonStyled>
+					<Button
+						type="outlined"
+						:disabled="deleteGroupMutation.isPending.value"
+						class="!text-red [&>svg]:!text-red !shadow-[inset_0_0_0_1px_var(--color-red)]"
+						@click="handleDeleteGroup"
+					>
+						<SpinnerIcon
+							v-if="deleteGroupMutation.isPending.value"
+							class="size-4 shrink-0 animate-spin"
+						/>
+						<TrashIcon v-else class="size-4 shrink-0" />
+						{{ formatMessage(messages.removeGroup) }}
+					</Button>
 				</div>
 			</div>
 		</Collapsible>
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
index 2d20d1a1a0..9899a8d370 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
@@ -4,18 +4,14 @@
 		<div v-if="ctx.flowType === 'instance'" class="flex items-center gap-4">
 			<Avatar :src="ctx.instanceIconUrl.value ?? undefined" size="5rem" />
 			<div class="flex flex-col gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="triggerIconInput">
-						<UploadIcon />
-						{{ formatMessage(messages.selectIcon) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled type="outlined">
-					<button :disabled="!ctx.instanceIcon.value" @click="removeIcon">
-						<XIcon />
-						{{ formatMessage(messages.removeIcon) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="triggerIconInput">
+					<UploadIcon />
+					{{ formatMessage(messages.selectIcon) }}
+				</Button>
+				<Button type="outlined" :disabled="!ctx.instanceIcon.value" @click="removeIcon">
+					<XIcon />
+					{{ formatMessage(messages.removeIcon) }}
+				</Button>
 			</div>
 		</div>
 
@@ -153,11 +149,11 @@ import { EyeIcon, EyeOffIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import { commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 
 import { injectFilePicker, injectModrinthClient, injectTags } from '../../../../providers'
 import Avatar from '../../../base/Avatar.vue'
-import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Chips from '../../../base/Chips.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
index 6351399bd3..3102c9bf78 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
@@ -5,13 +5,14 @@
 			<span class="font-semibold text-contrast">{{
 				formatMessage(messages.launcherInstancesTitle)
 			}}</span>
-			<ButtonStyled
-				type="transparent"
-				size="small"
+			<Button
+				type="quiet"
+				size="xs"
+				class="!h-6"
 				:class="{ invisible: totalSelectedCount === 0 }"
+				@click="clearAll"
+				>{{ formatMessage(messages.clearAll) }}</Button
 			>
-				<button @click="clearAll">{{ formatMessage(messages.clearAll) }}</button>
-			</ButtonStyled>
 		</div>
 
 		<template v-if="loading">
@@ -76,28 +77,22 @@
 
 			<!-- Add launcher path -->
 			<div v-if="!showAddPath">
-				<ButtonStyled>
-					<button class="w-full !shadow-none" @click="showAddPath = true">
-						{{ formatMessage(messages.addLauncherPath) }}
-					</button>
-				</ButtonStyled>
+				<Button class="w-full" @click="showAddPath = true">
+					{{ formatMessage(messages.addLauncherPath) }}
+				</Button>
 			</div>
 			<div v-else class="flex items-center gap-2">
-				<ButtonStyled circular>
-					<button class="!shadow-none" @click="browseForLauncherPath">
-						<FolderSearchIcon />
-					</button>
-				</ButtonStyled>
+				<IconButton label="Browse for launcher path" @click="browseForLauncherPath">
+					<FolderSearchIcon />
+				</IconButton>
 				<StyledInput
 					v-model="newLauncherPath"
 					:placeholder="formatMessage(messages.launcherPathPlaceholder)"
 					class="flex-1"
 				/>
-				<ButtonStyled>
-					<button class="!shadow-none" :disabled="!newLauncherPath.trim()" @click="addLauncherPath">
-						{{ formatMessage(messages.add) }}
-					</button>
-				</ButtonStyled>
+				<Button :disabled="!newLauncherPath.trim()" @click="addLauncherPath">
+					{{ formatMessage(messages.add) }}
+				</Button>
 			</div>
 		</template>
 	</div>
@@ -108,9 +103,10 @@ import { ChevronRightIcon, FolderSearchIcon, SearchIcon } from '@modrinth/assets
 import { defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { Button, IconButton } from '#ui/components/base/buttons'
+
 import { injectInstanceImport, injectNotificationManager } from '../../../../providers'
 import type { ImportableLauncher } from '../../../../providers/instance-import'
-import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Checkbox from '../../../base/Checkbox.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import StyledInput from '../../../base/StyledInput.vue'
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
index e0860dd303..8fc5605aa3 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
@@ -30,28 +30,27 @@
 			<div class="h-[1px] w-full flex-1 bg-surface-5" />
 		</div>
 		<div class="flex gap-3">
-			<ButtonStyled type="outlined">
-				<button
-					v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
-					class="flex-1"
-					:disabled="ctx.finishDisabled.value"
-					@click="triggerFileInput"
-				>
-					<ImportIcon />
-					{{ formatMessage(messages.importModpack) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled color="brand">
-				<button
-					v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
-					class="flex-1"
-					:disabled="ctx.finishDisabled.value"
-					@click="ctx.browseModpacks()"
-				>
-					<CompassIcon />
-					{{ formatMessage(messages.browseModpacks) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
+				type="outlined"
+				class="flex-1"
+				:disabled="ctx.finishDisabled.value"
+				@click="triggerFileInput"
+			>
+				<ImportIcon />
+				{{ formatMessage(messages.importModpack) }}
+			</Button>
+			<Button
+				v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
+				type="colored"
+				color="brand"
+				class="flex-1"
+				:disabled="ctx.finishDisabled.value"
+				@click="ctx.browseModpacks()"
+			>
+				<CompassIcon />
+				{{ formatMessage(messages.browseModpacks) }}
+			</Button>
 		</div>
 	</div>
 </template>
@@ -61,10 +60,10 @@ import { CompassIcon, ImportIcon, RightArrowIcon } from '@modrinth/assets'
 import { commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
 import { defineAsyncComponent, h, onMounted, ref, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 
 import { injectFilePicker } from '../../../../providers'
-import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Combobox from '../../../base/Combobox.vue'
 import { injectCreationFlowContext } from '../creation-flow-context'
 
diff --git a/packages/ui/src/components/modal/ConfirmLeaveModal.vue b/packages/ui/src/components/modal/ConfirmLeaveModal.vue
index cba7b8468c..b49b7c0665 100644
--- a/packages/ui/src/components/modal/ConfirmLeaveModal.vue
+++ b/packages/ui/src/components/modal/ConfirmLeaveModal.vue
@@ -8,18 +8,14 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="cancel">
-						<XIcon />
-						{{ localizeIfPossible(stayLabel) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="leave">
-						<RightArrowIcon />
-						{{ localizeIfPossible(leaveLabel) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="cancel">
+					<XIcon />
+					{{ localizeIfPossible(stayLabel) }}
+				</Button>
+				<Button type="colored" color="red" @click="leave">
+					<RightArrowIcon />
+					{{ localizeIfPossible(leaveLabel) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -30,7 +26,7 @@ import { RightArrowIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import { defineMessage, type MessageDescriptor, useVIntl } from '#ui/composables/i18n'
 
 import NewModal from './NewModal.vue'
diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 87a091324e..157b909d20 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -31,18 +31,19 @@
 				wrapper-class="max-w-[20rem]"
 			/>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled>
-					<button class="!shadow-none" @click="hide()">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled :color="danger ? 'red' : 'brand'">
-					<button :disabled="action_disabled" @click="proceed">
-						<component :is="proceedIcon" />
-						{{ proceedLabel }}
-					</button>
-				</ButtonStyled>
+				<Button @click="hide()">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button
+					type="colored"
+					:color="danger ? 'red' : 'brand'"
+					:disabled="action_disabled"
+					@click="proceed"
+				>
+					<component :is="proceedIcon" />
+					{{ proceedLabel }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -53,7 +54,8 @@ import { TrashIcon, XIcon } from '@modrinth/assets'
 import { renderString } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
-import ButtonStyled from '../base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
+
 import StyledInput from '../base/StyledInput.vue'
 import NewModal from './NewModal.vue'
 
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index 803b831078..c5cb846bcd 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -43,33 +43,28 @@
 						</div>
 						<div class="flex items-center gap-2">
 							<slot name="header-actions" />
-							<ButtonStyled v-if="closable" circular>
-								<button
-									v-tooltip="closeLabel"
-									:aria-label="closeLabel"
-									:disabled="disableClose"
-									@click="hide"
-								>
-									<XIcon aria-hidden="true" />
-								</button>
-							</ButtonStyled>
+							<IconButton
+								v-if="closable"
+								v-tooltip="closeLabel"
+								:label="closeLabel"
+								:disabled="disableClose"
+								@click="hide"
+							>
+								<XIcon aria-hidden="true" />
+							</IconButton>
 						</div>
 					</div>
 
-					<ButtonStyled
+					<IconButton
 						v-if="props.mergeHeader && closable"
+						v-tooltip="closeLabel"
+						:label="closeLabel"
 						class="absolute top-4 right-4 z-10"
-						circular
+						:disabled="disableClose"
+						@click="hide"
 					>
-						<button
-							v-tooltip="closeLabel"
-							:aria-label="closeLabel"
-							:disabled="disableClose"
-							@click="hide"
-						>
-							<XIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+						<XIcon aria-hidden="true" />
+					</IconButton>
 
 					<div v-if="scrollable" class="relative flex-1 min-h-0 flex flex-col">
 						<Transition
@@ -144,12 +139,13 @@
 import { XIcon } from '@modrinth/assets'
 import { computed, nextTick, onUnmounted, ref } from 'vue'
 
+import { IconButton } from '#ui/components/base/buttons'
+
 import { useVIntl } from '../../composables/i18n'
 import { useModalStack } from '../../composables/modal-stack'
 import { useScrollIndicator } from '../../composables/scroll-indicator'
 import { injectModalBehavior } from '../../providers'
 import { commonMessages } from '../../utils/common-messages'
-import ButtonStyled from '../base/ButtonStyled.vue'
 
 const { formatMessage } = useVIntl()
 
diff --git a/packages/ui/src/components/modal/OpenInAppModal.vue b/packages/ui/src/components/modal/OpenInAppModal.vue
index 9ca6c9d998..af02634d53 100644
--- a/packages/ui/src/components/modal/OpenInAppModal.vue
+++ b/packages/ui/src/components/modal/OpenInAppModal.vue
@@ -88,23 +88,21 @@
 					formatMessage(messages.openingAutomatically)
 				}}</span>
 				<div v-else class="grid grid-cols-2 gap-2 w-full">
-					<ButtonStyled>
-						<button class="flex-1" @click="hide">
-							<XIcon />
-							{{ formatMessage(commonMessages.closeButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<a
-							class="flex-1"
-							href="https://modrinth.com/app"
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							<DownloadIcon />
-							{{ formatMessage(messages.getApp) }}
-						</a>
-					</ButtonStyled>
+					<Button class="flex-1" @click="hide">
+						<XIcon />
+						{{ formatMessage(commonMessages.closeButton) }}
+					</Button>
+					<ButtonLink
+						type="colored"
+						color="brand"
+						class="flex-1"
+						href="https://modrinth.com/app"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<DownloadIcon />
+						{{ formatMessage(messages.getApp) }}
+					</ButtonLink>
 				</div>
 			</div>
 		</div>
@@ -116,8 +114,10 @@ import { CheckIcon, DownloadIcon, XIcon } from '@modrinth/assets'
 import { commonMessages } from '@modrinth/ui'
 import { computed, nextTick, onUnmounted, ref } from 'vue'
 
+import { Button, ButtonLink } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
-import { Avatar, ButtonStyled } from '../base'
+import { Avatar } from '../base'
 import ServerOnlinePlayers from '../project/server/ServerOnlinePlayers.vue'
 import ServerRegion from '../project/server/ServerRegion.vue'
 
diff --git a/packages/ui/src/components/modal/ShareModal.vue b/packages/ui/src/components/modal/ShareModal.vue
index db9c485c1b..70cf15203c 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -12,9 +12,10 @@ import {
 import QrcodeVue from 'qrcode.vue'
 import { computed, nextTick, ref } from 'vue'
 
+import { ButtonLink, IconButton } from '#ui/components/base/buttons'
 import { injectNotificationManager } from '#ui/providers'
 
-import { ButtonStyled, NewModal, StyledInput } from '../index'
+import { NewModal, StyledInput } from '../index'
 
 const props = defineProps({
 	header: {
@@ -156,16 +157,15 @@ defineExpose({
 					<div ref="qrCode">
 						<QrcodeVue :value="url" class="!bg-white rounded-[var(--radius-md)]" margin="3" />
 					</div>
-					<ButtonStyled circular type="transparent">
-						<button
-							v-tooltip="'Copy QR code'"
-							class="absolute top-0 right-0 m-2"
-							aria-label="Copy QR code"
-							@click="copyImage"
-						>
-							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-tooltip="'Copy QR code'"
+						type="quiet"
+						label="Copy QR code"
+						class="absolute top-0 right-0 m-2"
+						@click="copyImage"
+					>
+						<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+					</IconButton>
 				</div>
 				<StyledInput
 					v-else
@@ -175,17 +175,16 @@ defineExpose({
 					wrapper-class="h-full w-[30rem]"
 				>
 					<template #right>
-						<ButtonStyled circular type="transparent">
-							<button
-								v-tooltip="'Copy Text'"
-								type="button"
-								aria-label="Copy Text"
-								class="absolute top-0 right-0 m-2"
-								@click="copyText"
-							>
-								<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="'Copy Text'"
+							type="quiet"
+							label="Copy Text"
+							native-type="button"
+							class="absolute top-0 right-0 m-2"
+							@click="copyText"
+						>
+							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+						</IconButton>
 					</template>
 				</StyledInput>
 				<div
@@ -207,75 +206,67 @@ defineExpose({
 							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
 						</div>
 					</button>
-					<ButtonStyled v-if="link">
-						<a
-							:href="url"
-							target="_blank"
-							rel="noopener noreferrer"
-							aria-label="Open in new tab"
-							class="w-full"
-						>
-							Open in new tab
-							<ExternalIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
+					<ButtonLink
+						v-if="link"
+						:href="url"
+						target="_blank"
+						rel="noopener noreferrer"
+						aria-label="Open in new tab"
+						class="w-full"
+					>
+						Open in new tab
+						<ExternalIcon aria-hidden="true" />
+					</ButtonLink>
 					<div v-if="socialButtons" class="flex flex-row gap-1">
-						<ButtonStyled v-if="canShare" circular>
-							<button v-tooltip="'Share'" aria-label="Share" @click="share">
-								<ShareIcon aria-hidden="true" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<a
-								v-tooltip="'Send as an email'"
-								:href="sendEmail"
-								:target="targetParameter"
-								aria-label="Send as an email"
-							>
-								<MailIcon aria-hidden="true" />
-							</a>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<a
-								v-if="link"
-								v-tooltip="'Open link in browser'"
-								:target="targetParameter"
-								:href="url"
-								aria-label="Open link in browser"
-							>
-								<GlobeIcon aria-hidden="true" />
-							</a>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<a
-								v-tooltip="'Toot about it'"
-								:target="targetParameter"
-								:href="sendToot"
-								aria-label="Toot about it"
-							>
-								<MastodonIcon aria-hidden="true" />
-							</a>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<a
-								v-tooltip="'Tweet about it'"
-								:target="targetParameter"
-								:href="sendTweet"
-								aria-label="Tweet about it"
-							>
-								<TwitterIcon aria-hidden="true" />
-							</a>
-						</ButtonStyled>
-						<ButtonStyled circular>
-							<a
-								v-tooltip="'Share on Reddit'"
-								:target="targetParameter"
-								:href="postOnReddit"
-								aria-label="Share on Reddit"
-							>
-								<RedditIcon aria-hidden="true" />
-							</a>
-						</ButtonStyled>
+						<IconButton v-if="canShare" v-tooltip="'Share'" label="Share" @click="share">
+							<ShareIcon aria-hidden="true" />
+						</IconButton>
+						<ButtonLink
+							v-tooltip="'Send as an email'"
+							:href="sendEmail"
+							:target="targetParameter"
+							aria-label="Send as an email"
+							class="!w-9 !px-0 !rounded-full"
+						>
+							<MailIcon aria-hidden="true" />
+						</ButtonLink>
+						<ButtonLink
+							v-if="link"
+							v-tooltip="'Open link in browser'"
+							:target="targetParameter"
+							:href="url"
+							aria-label="Open link in browser"
+							class="!w-9 !px-0 !rounded-full"
+						>
+							<GlobeIcon aria-hidden="true" />
+						</ButtonLink>
+						<ButtonLink
+							v-tooltip="'Toot about it'"
+							:target="targetParameter"
+							:href="sendToot"
+							aria-label="Toot about it"
+							class="!w-9 !px-0 !rounded-full"
+						>
+							<MastodonIcon aria-hidden="true" />
+						</ButtonLink>
+						<ButtonLink
+							v-tooltip="'Tweet about it'"
+							:target="targetParameter"
+							:href="sendTweet"
+							aria-label="Tweet about it"
+							class="!w-9 !px-0 !rounded-full"
+						>
+							<TwitterIcon aria-hidden="true" />
+						</ButtonLink>
+						<ButtonLink
+							v-tooltip="'Share on Reddit'"
+							:target="targetParameter"
+							:href="postOnReddit"
+							aria-label="Share on Reddit"
+							class="!w-9 !px-0 !rounded-full"
+						>
+							<RedditIcon aria-hidden="true" />
+						</ButtonLink>
 					</div>
 				</div>
 			</div>
diff --git a/packages/ui/src/components/modal/UnknownFileWarningModal.vue b/packages/ui/src/components/modal/UnknownFileWarningModal.vue
index 247ff96c04..cd4d6055b4 100644
--- a/packages/ui/src/components/modal/UnknownFileWarningModal.vue
+++ b/packages/ui/src/components/modal/UnknownFileWarningModal.vue
@@ -86,17 +86,13 @@
 			/>
 
 			<div class="flex items-center gap-2">
-				<ButtonStyled type="transparent" color="orange">
-					<button type="button" @click="continueInstallation">
-						{{ formatMessage(messages.installAnyway) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button type="button" @click="cancelInstallation">
-						<BanIcon aria-hidden="true" />
-						{{ formatMessage(messages.dontInstall) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" color="orange" native-type="button" @click="continueInstallation">
+					{{ formatMessage(messages.installAnyway) }}
+				</Button>
+				<Button type="colored" color="brand" native-type="button" @click="cancelInstallation">
+					<BanIcon aria-hidden="true" />
+					{{ formatMessage(messages.dontInstall) }}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -106,10 +102,11 @@
 import { BanIcon } from '@modrinth/assets'
 import { computed, nextTick, ref, useTemplateRef } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { useScrollIndicator } from '../../composables/scroll-indicator'
 import Admonition from '../base/Admonition.vue'
-import ButtonStyled from '../base/ButtonStyled.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Table, { type TableColumn } from '../base/Table.vue'
 import NewModal from './NewModal.vue'
diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index 95626d907e..0f0a592d53 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -59,22 +59,27 @@
 							<div v-if="item.count && item.count > 1" class="text-xs font-bold text-contrast">
 								x{{ item.count }}
 							</div>
-							<ButtonStyled v-if="item.copyable !== false" circular size="small">
-								<button
-									v-tooltip="
-										item.supportData ? 'Copy error details for support' : 'Copy to clipboard'
-									"
-									@click="copyToClipboard(item)"
-								>
-									<CheckIcon v-if="copied[getCopyKey(item)]" />
-									<CopyIcon v-else />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="item.dismissible !== false" circular size="small">
-								<button v-tooltip="`Dismiss`" @click="dismissNotification(index)">
-									<XIcon />
-								</button>
-							</ButtonStyled>
+							<IconButton
+								v-if="item.copyable !== false"
+								v-tooltip="
+									item.supportData ? 'Copy error details for support' : 'Copy to clipboard'
+								"
+								size="xs"
+								:label="item.supportData ? 'Copy error details for support' : 'Copy to clipboard'"
+								@click="copyToClipboard(item)"
+							>
+								<CheckIcon v-if="copied[getCopyKey(item)]" />
+								<CopyIcon v-else />
+							</IconButton>
+							<IconButton
+								v-if="item.dismissible !== false"
+								v-tooltip="`Dismiss`"
+								size="xs"
+								:label="`Dismiss`"
+								@click="dismissNotification(index)"
+							>
+								<XIcon />
+							</IconButton>
 						</div>
 						<div v-if="item.type !== 'neutral'"></div>
 						<div
@@ -90,16 +95,22 @@
 						</template>
 						<template v-if="item.buttons?.length">
 							<div class="col-span-2 flex flex-wrap gap-1.5 pt-1">
-								<ButtonStyled
+								<Button
 									v-for="(button, buttonIndex) in item.buttons"
 									:key="buttonIndex"
-									:color="button.color"
+									:type="button.color && button.color !== 'standard' ? 'colored' : 'base'"
+									:color="
+										button.color && button.color !== 'standard'
+											? button.color === 'medal-promo'
+												? 'medal_promotion'
+												: button.color
+											: undefined
+									"
+									@click="handleButtonClick(item, button)"
 								>
-									<button class="!shadow-none" @click="handleButtonClick(item, button)">
-										<component :is="button.icon" v-if="button.icon" />
-										{{ button.label }}
-									</button>
-								</ButtonStyled>
+									<component :is="button.icon" v-if="button.icon" />
+									{{ button.label }}
+								</Button>
 							</div>
 						</template>
 					</div>
@@ -121,6 +132,7 @@ import {
 } from '@modrinth/assets'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
+import { Button, IconButton } from '#ui/components/base/buttons'
 import { useModalStack } from '#ui/composables/modal-stack.ts'
 
 import {
@@ -128,7 +140,6 @@ import {
 	type WebNotification,
 	type WebNotificationButton,
 } from '../../providers'
-import ButtonStyled from '../base/ButtonStyled.vue'
 
 const notificationManager = injectNotificationManager()
 const notifications = computed<WebNotification[]>(() => notificationManager.getNotifications())
diff --git a/packages/ui/src/components/nav/PopupNotificationPanel.vue b/packages/ui/src/components/nav/PopupNotificationPanel.vue
index 49c55ccd58..da57f93c20 100644
--- a/packages/ui/src/components/nav/PopupNotificationPanel.vue
+++ b/packages/ui/src/components/nav/PopupNotificationPanel.vue
@@ -95,11 +95,15 @@
 									</div>
 								</template>
 							</div>
-							<ButtonStyled v-if="item.dismissible !== false" type="transparent" circular>
-								<button class="-m-1.5" @click="dismiss(item.id)">
-									<XIcon />
-								</button>
-							</ButtonStyled>
+							<IconButton
+								v-if="item.dismissible !== false"
+								type="quiet"
+								label="Close"
+								class="-m-1.5"
+								@click="dismiss(item.id)"
+							>
+								<XIcon />
+							</IconButton>
 						</div>
 						<span v-if="item.text" class="text-primary">
 							{{ item.text }}
@@ -142,16 +146,28 @@
 						full-width
 					/>
 					<div v-if="item.buttons?.length" class="flex gap-1.5">
-						<ButtonStyled
+						<Button
 							v-for="(btn, idx) in item.buttons"
 							:key="idx"
-							:color="btn.color || (idx === 0 ? 'brand' : undefined)"
+							:type="
+								(btn.color || (idx === 0 ? 'brand' : undefined)) &&
+								(btn.color || (idx === 0 ? 'brand' : undefined)) !== 'standard'
+									? 'colored'
+									: 'base'
+							"
+							:color="
+								(btn.color || (idx === 0 ? 'brand' : undefined)) &&
+								(btn.color || (idx === 0 ? 'brand' : undefined)) !== 'standard'
+									? (btn.color || (idx === 0 ? 'brand' : undefined)) === 'medal-promo'
+										? 'medal_promotion'
+										: btn.color || (idx === 0 ? 'brand' : undefined)
+									: undefined
+							"
+							@click="handleButtonClick(item.id, btn)"
 						>
-							<button class="!shadow-none" @click="handleButtonClick(item.id, btn)">
-								<component :is="btn.icon" v-if="btn.icon" />
-								{{ btn.label }}
-							</button>
-						</ButtonStyled>
+							<component :is="btn.icon" v-if="btn.icon" />
+							{{ btn.label }}
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -171,6 +187,8 @@ import {
 } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
+import { Button, IconButton } from '#ui/components/base/buttons'
+
 import { useModalStack } from '../../composables/modal-stack'
 import {
 	injectPopupNotificationManager,
@@ -178,7 +196,6 @@ import {
 	type PopupNotificationButton,
 	type PopupNotificationProgressItem,
 } from '../../providers'
-import ButtonStyled from '../base/ButtonStyled.vue'
 import ProgressBar from '../base/ProgressBar.vue'
 import NotificationToast from '../notifications/NotificationToast.vue'
 
diff --git a/packages/ui/src/components/notifications/NotificationToast.vue b/packages/ui/src/components/notifications/NotificationToast.vue
index 185fee06d7..82169e0044 100644
--- a/packages/ui/src/components/notifications/NotificationToast.vue
+++ b/packages/ui/src/components/notifications/NotificationToast.vue
@@ -49,31 +49,33 @@
 							</template>
 						</template>
 					</p>
-					<ButtonStyled v-if="dismissible" size="small" type="transparent" circular>
-						<button
-							type="button"
-							class="notification-toast-dismiss"
-							aria-label="Dismiss notification"
-							@click="$emit('dismiss')"
-						>
-							<XIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-if="dismissible"
+						type="quiet"
+						size="xs"
+						label="Dismiss notification"
+						native-type="button"
+						class="notification-toast-dismiss !size-6"
+						@click="$emit('dismiss')"
+					>
+						<XIcon />
+					</IconButton>
 				</div>
 				<div class="flex items-center gap-2">
-					<ButtonStyled color="brand">
-						<button :disabled="actionLoading != null" @click="$emit('accept')">
-							<SpinnerIcon v-if="actionLoading === 'accept'" class="animate-spin" />
-							<CheckIcon v-else />
-							Accept
-						</button>
-					</ButtonStyled>
-					<ButtonStyled type="outlined">
-						<button :disabled="actionLoading != null" @click="$emit('decline')">
-							<XIcon />
-							Decline
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="actionLoading != null"
+						@click="$emit('accept')"
+					>
+						<SpinnerIcon v-if="actionLoading === 'accept'" class="animate-spin" />
+						<CheckIcon v-else />
+						Accept
+					</Button>
+					<Button type="outlined" :disabled="actionLoading != null" @click="$emit('decline')">
+						<XIcon />
+						Decline
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -96,16 +98,17 @@
 					{{ entityLabel }}
 				</p>
 				<div class="col-start-2 row-start-1 justify-self-end">
-					<ButtonStyled v-if="dismissible" size="small" type="transparent" circular>
-						<button
-							type="button"
-							class="notification-toast-dismiss"
-							aria-label="Dismiss notification"
-							@click="$emit('dismiss')"
-						>
-							<XIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-if="dismissible"
+						type="quiet"
+						size="xs"
+						label="Dismiss notification"
+						native-type="button"
+						class="notification-toast-dismiss !size-6"
+						@click="$emit('dismiss')"
+					>
+						<XIcon />
+					</IconButton>
 				</div>
 				<div
 					class="col-start-1 col-end-3 row-start-2 flex min-w-0 items-center justify-between gap-0.5"
@@ -130,12 +133,8 @@
 					class="col-start-1 col-end-3 row-start-3 mt-2 flex min-w-0 items-center justify-between gap-2"
 				>
 					<div class="flex min-w-0 items-center gap-2">
-						<ButtonStyled color="brand">
-							<button @click="$emit('launch')">Launch game</button>
-						</ButtonStyled>
-						<ButtonStyled type="outlined">
-							<button @click="$emit('open-instance')">Instance</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" @click="$emit('launch')">Launch game</Button>
+						<Button type="outlined" @click="$emit('open-instance')">Instance</Button>
 					</div>
 					<div v-if="progressLabel" class="notification-inline-progress-label flex-none">
 						{{ progressLabel }}
@@ -145,16 +144,28 @@
 					v-if="type === 'instance-download' && actions?.length"
 					class="col-start-1 col-end-3 row-start-3 mt-2 flex min-w-0 flex-wrap items-center gap-2"
 				>
-					<ButtonStyled
+					<Button
 						v-for="(action, index) in actions"
 						:key="index"
-						:color="action.color || (index === 0 ? 'brand' : undefined)"
+						:type="
+							(action.color || (index === 0 ? 'brand' : undefined)) &&
+							(action.color || (index === 0 ? 'brand' : undefined)) !== 'standard'
+								? 'colored'
+								: 'base'
+						"
+						:color="
+							(action.color || (index === 0 ? 'brand' : undefined)) &&
+							(action.color || (index === 0 ? 'brand' : undefined)) !== 'standard'
+								? (action.color || (index === 0 ? 'brand' : undefined)) === 'medal-promo'
+									? 'medal_promotion'
+									: action.color || (index === 0 ? 'brand' : undefined)
+								: undefined
+						"
+						@click="$emit('action', index)"
 					>
-						<button class="!shadow-none" @click="$emit('action', index)">
-							<component :is="action.icon" v-if="action.icon" />
-							{{ action.label }}
-						</button>
-					</ButtonStyled>
+						<component :is="action.icon" v-if="action.icon" />
+						{{ action.label }}
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -182,11 +193,12 @@
 import { CheckIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
+import { Button, IconButton } from '#ui/components/base/buttons'
+
 import { useFormatBytes, useFormatNumber } from '../../composables'
 import type { PopupNotificationButton, PopupNotificationProgressType } from '../../providers'
 import { truncatedTooltip } from '../../utils/truncate'
 import Avatar from '../base/Avatar.vue'
-import ButtonStyled from '../base/ButtonStyled.vue'
 
 type NotificationToastType =
 	| 'friend-request'
diff --git a/packages/ui/src/components/page/NormalPage.vue b/packages/ui/src/components/page/NormalPage.vue
index ce3f0e1689..3acc18993e 100644
--- a/packages/ui/src/components/page/NormalPage.vue
+++ b/packages/ui/src/components/page/NormalPage.vue
@@ -3,6 +3,7 @@ import { injectPageContext } from '@modrinth/ui'
 
 defineProps<{
 	sidebar?: 'right' | 'left'
+	fullWidth?: boolean
 }>()
 const { hierarchicalSidebarAvailable } = injectPageContext()
 </script>
@@ -12,6 +13,7 @@ const { hierarchicalSidebarAvailable } = injectPageContext()
 		:class="{
 			'ui-normal-page--sidebar-left': sidebar === 'left' && !hierarchicalSidebarAvailable,
 			'ui-normal-page--sidebar-right': sidebar === 'right' && !hierarchicalSidebarAvailable,
+			'ui-normal-page--full-width': fullWidth,
 		}"
 	>
 		<div class="ui-normal-page__header">
@@ -46,6 +48,10 @@ const { hierarchicalSidebarAvailable } = injectPageContext()
 		/ 100%;
 }
 
+.ui-normal-page--full-width {
+	width: calc(100% - 2rem);
+}
+
 @media (width >= 64rem) {
 	.ui-normal-page--sidebar-left {
 		grid-template:
diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index 012fea3115..0dfffebdba 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -9,9 +9,14 @@
 				@update:query="updateQuery"
 			/>
 
-			<ButtonStyled v-if="openModal" :color="createVersionButtonSecondary ? 'standard' : 'green'">
-				<button @click="openModal"><PlusIcon /> Create version</button>
-			</ButtonStyled>
+			<Button
+				v-if="openModal"
+				:type="createVersionButtonSecondary ? 'base' : 'colored'"
+				:color="createVersionButtonSecondary ? undefined : 'green'"
+				@click="openModal"
+			>
+				<PlusIcon /> Create version
+			</Button>
 
 			<Pagination
 				v-if="!openModal"
@@ -445,7 +450,6 @@ import {
 } from '@modrinth/assets'
 import {
 	AutoLink,
-	ButtonStyled,
 	Pagination,
 	SmartClickable,
 	Table,
@@ -462,6 +466,8 @@ import { Menu } from 'floating-vue'
 import { computed, type Ref, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useRelativeTime } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { formatTag } from '../../utils/tag-messages'
diff --git a/packages/ui/src/components/project/server/ServerModpackContentCard.vue b/packages/ui/src/components/project/server/ServerModpackContentCard.vue
index bc29556cc8..1d25e4b6c0 100644
--- a/packages/ui/src/components/project/server/ServerModpackContentCard.vue
+++ b/packages/ui/src/components/project/server/ServerModpackContentCard.vue
@@ -29,20 +29,25 @@
 				</div>
 			</div>
 		</div>
-		<ButtonStyled v-if="onclickDownload" circular type="transparent">
-			<button v-tooltip="formatMessage(messages.downloadModpack)" @click="onclickDownload">
-				<DownloadIcon />
-			</button>
-		</ButtonStyled>
+		<IconButton
+			v-if="onclickDownload"
+			v-tooltip="formatMessage(messages.downloadModpack)"
+			type="quiet"
+			:label="formatMessage(messages.downloadModpack)"
+			@click="onclickDownload"
+		>
+			<DownloadIcon />
+		</IconButton>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { DownloadIcon } from '@modrinth/assets/generated-icons'
 
+import { IconButton } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../../composables'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 
 defineProps<{
 	name: string
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index ece84e39da..60eefab19d 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -8,19 +8,25 @@
 		</div>
 		<template #actions>
 			<div v-if="canSave" class="flex justify-end gap-2 mt-2">
-				<ButtonStyled v-if="canReset" type="transparent">
-					<button :disabled="saving || !hasChanges" @click="resetEnvironment">
-						<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="saving || !hasChanges" @click="saveEnvironment">
-						<SpinnerIcon v-if="saving" class="animate-spin" />
-						<CheckIcon v-else-if="needsToVerify" />
-						<SaveIcon v-else />
-						{{ saveButtonLabel }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="canReset"
+					type="quiet"
+					:disabled="saving || !hasChanges"
+					@click="resetEnvironment"
+				>
+					<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="saving || !hasChanges"
+					@click="saveEnvironment"
+				>
+					<SpinnerIcon v-if="saving" class="animate-spin" />
+					<CheckIcon v-else-if="needsToVerify" />
+					<SaveIcon v-else />
+					{{ saveButtonLabel }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -31,10 +37,10 @@ import { CheckIcon, HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import { computed, onMounted, unref, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
 
+import { Button } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 import { commonMessages } from '../../../../utils/common-messages'
-import ButtonStyled from '../../../base/ButtonStyled.vue'
 import { NewModal } from '../../../modal'
 import EnvironmentMigration from './EnvironmentMigration.vue'
 
diff --git a/packages/ui/src/components/search/SearchSidebarFilter.vue b/packages/ui/src/components/search/SearchSidebarFilter.vue
index ce9b8c40ec..bdf135bdfc 100644
--- a/packages/ui/src/components/search/SearchSidebarFilter.vue
+++ b/packages/ui/src/components/search/SearchSidebarFilter.vue
@@ -54,19 +54,17 @@
 				<p class="m-0 text-secondary text-sm">
 					{{ formatMessage(messages.lockedDescription) }}
 				</p>
-				<ButtonStyled>
-					<button
-						class="w-fit"
-						@click="
-							() => {
-								overriddenProvidedFilterTypes.push(filterType.id)
-							}
-						"
-					>
-						<LockOpenIcon />
-						{{ formatMessage(messages.unlockFilterButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					class="w-fit"
+					@click="
+						() => {
+							overriddenProvidedFilterTypes.push(filterType.id)
+						}
+					"
+				>
+					<LockOpenIcon />
+					{{ formatMessage(messages.unlockFilterButton) }}
+				</Button>
 			</div>
 		</template>
 		<template v-else #default>
@@ -157,25 +155,23 @@
 					@update:model-value="toggleGroup(group.id)"
 				/>
 				<div v-if="hasProvidedFilter" class="mt-2 mx-1">
-					<ButtonStyled>
-						<button
-							class="w-fit"
-							@click="
-								() => {
-									overriddenProvidedFilterTypes = overriddenProvidedFilterTypes.filter(
-										(id) => id !== filterType.id,
-									)
-									accordion?.close()
-									clearFilters()
-								}
-							"
-						>
-							<UpdatedIcon />
-							<slot name="sync-button">
-								{{ formatMessage(messages.syncFilterButton) }}
-							</slot>
-						</button>
-					</ButtonStyled>
+					<Button
+						class="w-fit"
+						@click="
+							() => {
+								overriddenProvidedFilterTypes = overriddenProvidedFilterTypes.filter(
+									(id) => id !== filterType.id,
+								)
+								accordion?.close()
+								clearFilters()
+							}
+						"
+					>
+						<UpdatedIcon />
+						<slot name="sync-button">
+							{{ formatMessage(messages.syncFilterButton) }}
+						</slot>
+					</Button>
 				</div>
 			</div>
 		</template>
@@ -186,10 +182,11 @@
 import { BanIcon, DropdownIcon, LockOpenIcon, SearchIcon, UpdatedIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import type { FilterOption, FilterType, FilterValue } from '../../utils/search'
 import Accordion from '../base/Accordion.vue'
-import ButtonStyled from '../base/ButtonStyled.vue'
 import { Checkbox, ScrollablePanel, StyledInput } from '../index'
 import SearchFilterGroup from './SearchFilterGroup.vue'
 import SearchFilterOption from './SearchFilterOption.vue'
diff --git a/packages/ui/src/components/servers/InstallingBanner.vue b/packages/ui/src/components/servers/InstallingBanner.vue
index cf8a901019..60eb456b61 100644
--- a/packages/ui/src/components/servers/InstallingBanner.vue
+++ b/packages/ui/src/components/servers/InstallingBanner.vue
@@ -27,18 +27,17 @@
 			</div>
 		</div>
 		<template v-if="contentError" #top-right-actions>
-			<ButtonStyled color="red" type="outlined">
-				<button
-					v-tooltip="retryDisabled ? retryDisabledTooltip : undefined"
-					class="!border"
-					type="button"
-					:disabled="retryDisabled"
-					@click="emit('retry')"
-				>
-					<RotateCounterClockwiseIcon class="size-5" />
-					{{ formatMessage(commonMessages.retryButton) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				v-tooltip="retryDisabled ? retryDisabledTooltip : undefined"
+				type="outlined"
+				class="!border !text-red [&>svg]:!text-red !shadow-[inset_0_0_0_1px_var(--color-red)]"
+				native-type="button"
+				:disabled="retryDisabled"
+				@click="emit('retry')"
+			>
+				<RotateCounterClockwiseIcon class="size-5" />
+				{{ formatMessage(commonMessages.retryButton) }}
+			</Button>
 		</template>
 	</Admonition>
 </template>
@@ -47,11 +46,11 @@
 import { RotateCounterClockwiseIcon } from '@modrinth/assets'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
 import Admonition from '../base/Admonition.vue'
-import ButtonStyled from '../base/ButtonStyled.vue'
 
 export interface SyncProgress {
 	phase: 'Analyzing' | 'InstallingPack' | 'InstallingLoader' | 'Addons'
diff --git a/packages/ui/src/components/servers/SaveBanner.vue b/packages/ui/src/components/servers/SaveBanner.vue
index afc753fe51..3f4eb45b6f 100644
--- a/packages/ui/src/components/servers/SaveBanner.vue
+++ b/packages/ui/src/components/servers/SaveBanner.vue
@@ -3,22 +3,29 @@
 		<FloatingActionBar :shown="props.isVisible">
 			<p class="m-0 font-semibold text-sm md:text-base">You have unsaved changes.</p>
 			<div class="ml-auto flex gap-2">
-				<ButtonStyled type="transparent">
-					<button :disabled="props.isUpdating" @click="props.reset"><HistoryIcon /> Reset</button>
-				</ButtonStyled>
-				<ButtonStyled :color="props.restart ? 'standard' : 'brand'">
-					<button :disabled="props.isUpdating" @click="props.save">
-						<SpinnerIcon v-if="props.isUpdating" class="animate-spin" />
-						<SaveIcon v-else />
-						{{ props.isUpdating ? 'Saving...' : 'Save' }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="props.restart" color="brand">
-					<button :disabled="props.isUpdating || isTransitioning" @click="saveAndPower">
-						<SpinnerIcon v-if="props.isUpdating || isTransitioning" class="animate-spin" />
-						{{ powerButtonLabel }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" :disabled="props.isUpdating" @click="props.reset"
+					><HistoryIcon /> Reset</Button
+				>
+				<Button
+					:type="props.restart ? 'base' : 'colored'"
+					:color="props.restart ? undefined : 'brand'"
+					:disabled="props.isUpdating"
+					@click="props.save"
+				>
+					<SpinnerIcon v-if="props.isUpdating" class="animate-spin" />
+					<SaveIcon v-else />
+					{{ props.isUpdating ? 'Saving...' : 'Save' }}
+				</Button>
+				<Button
+					v-if="props.restart"
+					type="colored"
+					color="brand"
+					:disabled="props.isUpdating || isTransitioning"
+					@click="saveAndPower"
+				>
+					<SpinnerIcon v-if="props.isUpdating || isTransitioning" class="animate-spin" />
+					{{ powerButtonLabel }}
+				</Button>
 			</div>
 		</FloatingActionBar>
 	</Teleport>
@@ -28,7 +35,7 @@
 import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
 
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index fbfe10d460..f1c12c15d8 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -183,46 +183,53 @@
 			</div>
 
 			<div v-if="noticeButtons" class="flex gap-2">
-				<ButtonStyled
+				<IconButton
 					v-if="noticeButtons.downloadBackup && onDownloadBackup && isBackupDownloadEnabled"
+					v-tooltip="formatMessage(messages.downloadLatestBackupTooltip)"
 					type="outlined"
-					circular
+					:label="formatMessage(messages.downloadLatestBackupTooltip)"
+					data-server-listing-button
+					@click="onDownloadBackup"
 				>
-					<button
-						v-tooltip="formatMessage(messages.downloadLatestBackupTooltip)"
-						data-server-listing-button
-						@click="onDownloadBackup"
-					>
-						<DownloadIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="noticeButtons.copyId" type="outlined">
-					<button
-						v-tooltip="formatMessage(messages.copyCodeToClipboardTooltip)"
-						data-server-listing-button
-						@click="copyToClipboard(server_id)"
-					>
-						<template v-if="copied">
-							{{ formatMessage(messages.copiedLabel) }} <CheckIcon class="text-green" />
-						</template>
-						<template v-else> {{ formatMessage(messages.copyIdLabel) }} <CopyIcon /> </template>
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="noticeButtons.support">
-					<a href="https://support.modrinth.com/en/" target="_blank" data-server-listing-button
-						><MessagesSquareIcon /> {{ formatMessage(messages.supportLabel) }}
-					</a>
-				</ButtonStyled>
-				<ButtonStyled v-if="noticeButtons.manageBilling" color="brand">
-					<AutoLink :to="`/settings/billing#server-${server_id}`" data-server-listing-button>
-						<CardIcon /> {{ formatMessage(messages.manageBillingLabel) }}
-					</AutoLink>
-				</ButtonStyled>
-				<ButtonStyled v-if="noticeButtons.resubscribe && onResubscribe" color="brand">
-					<button data-server-listing-button @click="onResubscribe">
-						<RotateCounterClockwiseIcon /> {{ formatMessage(messages.resubscribeLabel) }}
-					</button>
-				</ButtonStyled>
+					<DownloadIcon />
+				</IconButton>
+				<Button
+					v-if="noticeButtons.copyId"
+					v-tooltip="formatMessage(messages.copyCodeToClipboardTooltip)"
+					type="outlined"
+					data-server-listing-button
+					@click="copyToClipboard(server_id)"
+				>
+					<template v-if="copied">
+						{{ formatMessage(messages.copiedLabel) }} <CheckIcon class="text-green" />
+					</template>
+					<template v-else> {{ formatMessage(messages.copyIdLabel) }} <CopyIcon /> </template>
+				</Button>
+				<ButtonLink
+					v-if="noticeButtons.support"
+					href="https://support.modrinth.com/en/"
+					target="_blank"
+					data-server-listing-button
+					><MessagesSquareIcon /> {{ formatMessage(messages.supportLabel) }}
+				</ButtonLink>
+				<ButtonLink
+					v-if="noticeButtons.manageBilling"
+					type="colored"
+					color="brand"
+					:to="`/settings/billing#server-${server_id}`"
+					data-server-listing-button
+				>
+					<CardIcon /> {{ formatMessage(messages.manageBillingLabel) }}
+				</ButtonLink>
+				<Button
+					v-if="noticeButtons.resubscribe && onResubscribe"
+					type="colored"
+					color="brand"
+					data-server-listing-button
+					@click="onResubscribe"
+				>
+					<RotateCounterClockwiseIcon /> {{ formatMessage(messages.resubscribeLabel) }}
+				</Button>
 			</div>
 		</div>
 
@@ -261,11 +268,12 @@ import {
 	SparklesIcon,
 	SpinnerIcon,
 } from '@modrinth/assets'
-import { AutoLink, ButtonStyled } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { Button, ButtonLink, IconButton } from '#ui/components/base/buttons'
+
 import {
 	CardIcon,
 	CheckIcon,
diff --git a/packages/ui/src/components/servers/ServersPromo.vue b/packages/ui/src/components/servers/ServersPromo.vue
index ef3990a3f2..0268ff48c9 100644
--- a/packages/ui/src/components/servers/ServersPromo.vue
+++ b/packages/ui/src/components/servers/ServersPromo.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ModrinthIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 
-import AutoLink from '../base/AutoLink.vue'
-import ButtonStyled from '../base/ButtonStyled.vue'
+import { ButtonLink, IconButton } from '#ui/components/base/buttons'
 
 const emit = defineEmits<{
 	(e: 'close'): void
@@ -36,16 +35,21 @@ withDefaults(
 			<span class="text-sm font-medium">Create a server with Modrinth in just a few clicks.</span>
 		</div>
 		<div class="flex flex-col items-end justify-end z-10">
-			<ButtonStyled color="brand">
-				<AutoLink :to="link"> View plans <RightArrowIcon /> </AutoLink>
-			</ButtonStyled>
+			<ButtonLink type="colored" color="brand" :to="link">
+				View plans <RightArrowIcon />
+			</ButtonLink>
 		</div>
 		<div class="absolute top-2 right-2 z-10">
-			<ButtonStyled v-if="closable" size="small" circular>
-				<button v-tooltip="`Don't show again`" @click="emit('close')">
-					<XIcon aria-hidden="true" />
-				</button>
-			</ButtonStyled>
+			<IconButton
+				v-if="closable"
+				v-tooltip="`Don't show again`"
+				class="!size-6"
+				size="xs"
+				:label="`Don't show again`"
+				@click="emit('close')"
+			>
+				<XIcon aria-hidden="true" />
+			</IconButton>
 		</div>
 	</div>
 </template>
diff --git a/packages/ui/src/components/servers/access/AccessTable.vue b/packages/ui/src/components/servers/access/AccessTable.vue
index fad5a8fe35..2a88cd322a 100644
--- a/packages/ui/src/components/servers/access/AccessTable.vue
+++ b/packages/ui/src/components/servers/access/AccessTable.vue
@@ -74,29 +74,28 @@
 
 		<template #cell-actions="{ row: member }">
 			<div v-if="!member.isOwner" class="flex items-center justify-end gap-1">
-				<ButtonStyled v-if="member.pending" circular type="transparent">
-					<button
-						v-tooltip="resendInviteTooltip(member)"
-						:aria-label="resendInviteLabel(member)"
-						:disabled="resendInviteDisabled(member)"
-						class="text-secondary hover:!filter-none hover:text-contrast focus-visible:!filter-none active:!scale-100 active:!filter-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-secondary"
-						@click="handleResendInvite(member)"
-					>
-						<SendIcon aria-hidden="true" />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<button
-						v-tooltip="memberAccessActionTooltip(member)"
-						:aria-label="memberAccessActionLabel(member)"
-						:disabled="!canManageUsers"
-						class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none active:!scale-100 active:!filter-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-secondary"
-						@click="member.pending ? handleCancelInvite(member) : handleRemoveMember(member)"
-					>
-						<XIcon v-if="member.pending" aria-hidden="true" />
-						<UserXIcon v-else aria-hidden="true" />
-					</button>
-				</ButtonStyled>
+				<IconButton
+					v-if="member.pending"
+					v-tooltip="resendInviteTooltip(member)"
+					type="quiet"
+					:label="resendInviteLabel(member)"
+					:disabled="resendInviteDisabled(member)"
+					class="text-secondary hover:!filter-none hover:text-contrast focus-visible:!filter-none active:!scale-100 active:!filter-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-secondary"
+					@click="handleResendInvite(member)"
+				>
+					<SendIcon aria-hidden="true" />
+				</IconButton>
+				<IconButton
+					v-tooltip="memberAccessActionTooltip(member)"
+					type="quiet"
+					:label="memberAccessActionLabel(member)"
+					:disabled="!canManageUsers"
+					class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none active:!scale-100 active:!filter-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-secondary"
+					@click="member.pending ? handleCancelInvite(member) : handleRemoveMember(member)"
+				>
+					<XIcon v-if="member.pending" aria-hidden="true" />
+					<UserXIcon v-else aria-hidden="true" />
+				</IconButton>
 			</div>
 		</template>
 	</Table>
@@ -223,29 +222,30 @@
 				<span v-else>{{ formatMessage(messages.unknownJoinedDate) }}</span>
 			</div>
 			<div class="flex min-w-0 items-center justify-end pr-4">
-				<ButtonStyled v-if="!member.isOwner" circular type="transparent">
-					<TeleportOverflowMenu
-						:options="memberActionOptions(member)"
-						btn-class="hover:!filter-none focus-visible:!filter-none active:!scale-100 active:!filter-none"
-					>
-						<MoreVerticalIcon aria-hidden="true" class="size-5" />
-						<span class="sr-only">
-							{{ formatMessage(messages.memberActionsLabel, { username: member.user.username }) }}
-						</span>
-						<template #resend-invite>
-							<SendIcon aria-hidden="true" />
-							{{ resendInviteLabel(member) }}
-						</template>
-						<template #cancel-invite>
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(messages.cancelInvite) }}
-						</template>
-						<template #remove-user>
-							<UserXIcon aria-hidden="true" />
-							{{ formatMessage(messages.removeUser) }}
-						</template>
-					</TeleportOverflowMenu>
-				</ButtonStyled>
+				<TeleportOverflowMenu
+					v-if="!member.isOwner"
+					type="quiet"
+					:label="formatMessage(messages.memberActionsLabel, { username: member.user.username })"
+					:options="memberActionOptions(member)"
+					class="hover:!filter-none focus-visible:!filter-none active:!scale-100 active:!filter-none"
+				>
+					<MoreVerticalIcon aria-hidden="true" class="size-5" />
+					<span class="sr-only">
+						{{ formatMessage(messages.memberActionsLabel, { username: member.user.username }) }}
+					</span>
+					<template #resend-invite>
+						<SendIcon aria-hidden="true" />
+						{{ resendInviteLabel(member) }}
+					</template>
+					<template #cancel-invite>
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.cancelInvite) }}
+					</template>
+					<template #remove-user>
+						<UserXIcon aria-hidden="true" />
+						{{ formatMessage(messages.removeUser) }}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 		</div>
 	</div>
@@ -284,17 +284,21 @@ import {
 	UserXIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { type Component, computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import {
+	IconButton,
+	type OverflowMenuOption,
+	TeleportOverflowMenu,
+} from '#ui/components/base/buttons'
 
 import { useFormatDateTime, useRelativeTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages } from '../../../utils/common-messages'
 import AutoLink from '../../base/AutoLink.vue'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
 import Table, { type SortDirection, type TableColumn } from '../../base/Table.vue'
-import TeleportOverflowMenu from '../../base/TeleportOverflowMenu.vue'
 import type {
 	ServerAccessMember,
 	ServerAccessRole,
@@ -396,16 +400,6 @@ const messages = defineMessages({
 type AccessTableColumn = 'user' | 'role' | 'joined' | 'actions'
 type AccessTableSortableColumn = Exclude<AccessTableColumn, 'actions'>
 type AccessTableRow = ServerAccessMember & Record<string, unknown>
-type OverflowMenuOption = {
-	id: string
-	icon?: Component
-	action: () => void
-	shown?: boolean
-	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
-	disabled?: boolean
-	tooltip?: string
-}
-
 const columns = computed<TableColumn<AccessTableColumn>[]>(() => [
 	{ key: 'user', label: formatMessage(messages.userColumn), width: '32%', enableSorting: true },
 	{ key: 'role', label: formatMessage(messages.roleColumn), width: '28%', enableSorting: true },
@@ -609,6 +603,7 @@ function memberActionOptions(member: ServerAccessMember): OverflowMenuOption[] {
 	return [
 		{
 			id: 'resend-invite',
+			label: resendInviteLabel(member),
 			icon: SendIcon,
 			action: () => handleResendInvite(member),
 			shown: member.pending,
@@ -617,18 +612,20 @@ function memberActionOptions(member: ServerAccessMember): OverflowMenuOption[] {
 		},
 		{
 			id: 'cancel-invite',
+			label: formatMessage(messages.cancelInvite),
 			icon: XIcon,
 			action: () => handleCancelInvite(member),
-			color: 'red',
+			tone: 'red',
 			shown: member.pending,
 			disabled: !canManageUsers.value,
 			tooltip: memberAccessActionTooltip(member),
 		},
 		{
 			id: 'remove-user',
+			label: formatMessage(messages.removeUser),
 			icon: UserXIcon,
 			action: () => handleRemoveMember(member),
-			color: 'red',
+			tone: 'red',
 			shown: !member.pending,
 			disabled: !canManageUsers.value,
 			tooltip: memberAccessActionTooltip(member),
diff --git a/packages/ui/src/components/servers/access/AuditLogTable.vue b/packages/ui/src/components/servers/access/AuditLogTable.vue
index 0a0f3bc6a0..7208df05a1 100644
--- a/packages/ui/src/components/servers/access/AuditLogTable.vue
+++ b/packages/ui/src/components/servers/access/AuditLogTable.vue
@@ -9,6 +9,7 @@
 				v-model:custom-start-date="timeframeCustomStartDate"
 				v-model:custom-end-date="timeframeCustomEndDate"
 				:class="timeframePickerClass"
+				trigger-size="lg"
 				:trigger-class="timeframePickerTriggerClass"
 			/>
 			<template v-if="slots.filters">
@@ -363,7 +364,7 @@ const timeframePickerClass = computed(() =>
 	slots.filters ? '!w-full @[640px]:!w-[225px] shrink-0' : '!w-full @[640px]:!w-[225px]',
 )
 const timeframePickerTriggerClass =
-	'!h-10 !min-h-10 !w-full !rounded-[14px] !bg-surface-4 !py-2.5 !pl-4 !pr-3 !text-base shadow-[0px_1px_1px_rgba(0,0,0,0.3),0px_1px_1.5px_rgba(0,0,0,0.15)]'
+	'!w-full !rounded-[14px] !bg-surface-4 !py-2.5 !pl-4 !pr-3 !text-base shadow-[0px_1px_1px_rgba(0,0,0,0.3),0px_1px_1.5px_rgba(0,0,0,0.15)]'
 
 onMounted(() => {
 	updateLoadMoreObserver()
diff --git a/packages/ui/src/components/servers/access/GrantAccessModal.vue b/packages/ui/src/components/servers/access/GrantAccessModal.vue
index 80a6b19c57..315e569c24 100644
--- a/packages/ui/src/components/servers/access/GrantAccessModal.vue
+++ b/packages/ui/src/components/servers/access/GrantAccessModal.vue
@@ -126,18 +126,20 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(messages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button v-tooltip="grantPermissionTooltip" :disabled="!canSubmit" @click="submit">
-						<UserPlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.inviteButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(messages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="grantPermissionTooltip"
+					type="colored"
+					color="brand"
+					:disabled="!canSubmit"
+					@click="submit"
+				>
+					<UserPlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.inviteButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -148,10 +150,11 @@ import { EyeIcon, PencilIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages } from '../../../utils/common-messages'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import Checkbox from '../../base/Checkbox.vue'
 import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
 import IntlFormatted from '../../base/IntlFormatted.vue'
diff --git a/packages/ui/src/components/servers/access/RemoveAccessModal.vue b/packages/ui/src/components/servers/access/RemoveAccessModal.vue
index e58dc2d634..77e397d051 100644
--- a/packages/ui/src/components/servers/access/RemoveAccessModal.vue
+++ b/packages/ui/src/components/servers/access/RemoveAccessModal.vue
@@ -62,21 +62,23 @@
 			</div>
 
 			<div class="flex justify-end gap-2 pt-1">
-				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-5" @click="hide">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button v-tooltip="removePermissionTooltip" :disabled="!canRemove" @click="confirm">
-						<TrashIcon v-if="modalState.shouldCancel" aria-hidden="true" />
-						<UserXIcon v-else aria-hidden="true" />
-						{{
-							formatMessage(modalState.shouldCancel ? messages.cancelButton : messages.removeButton)
-						}}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" class="!border !border-surface-5" @click="hide">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="removePermissionTooltip"
+					type="colored"
+					color="orange"
+					:disabled="!canRemove"
+					@click="confirm"
+				>
+					<TrashIcon v-if="modalState.shouldCancel" aria-hidden="true" />
+					<UserXIcon v-else aria-hidden="true" />
+					{{
+						formatMessage(modalState.shouldCancel ? messages.cancelButton : messages.removeButton)
+					}}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -86,12 +88,13 @@
 import { TrashIcon, UserXIcon, XIcon } from '@modrinth/assets'
 import { computed, ref, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useRelativeTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages } from '../../../utils/common-messages'
 import Admonition from '../../base/Admonition.vue'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import NewModal from '../../modal/NewModal.vue'
 import type { ServerAccessRole } from './types'
 
diff --git a/packages/ui/src/components/servers/admonitions/BackupAdmonition.vue b/packages/ui/src/components/servers/admonitions/BackupAdmonition.vue
index beac824d1f..42479156eb 100644
--- a/packages/ui/src/components/servers/admonitions/BackupAdmonition.vue
+++ b/packages/ui/src/components/servers/admonitions/BackupAdmonition.vue
@@ -8,7 +8,7 @@ import {
 } from '@modrinth/assets'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import type { MessageDescriptor } from '#ui/composables/i18n'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -279,29 +279,29 @@ function getDescription(item: BackupAdmonitionEntry): string {
 			</span>
 		</div>
 		<template #top-right-actions>
-			<ButtonStyled v-if="canCancel(item)" type="outlined" color="blue">
-				<button
-					v-tooltip="canManageBackups === false ? permissionDeniedMessage : undefined"
-					class="!border"
-					type="button"
-					:disabled="cancelling || canManageBackups === false"
-					@click="$emit('cancel')"
-				>
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled v-if="canRetry(item)" color="red" type="outlined">
-				<button
-					v-tooltip="canManageBackups === false ? permissionDeniedMessage : undefined"
-					class="!border"
-					type="button"
-					:disabled="canManageBackups === false"
-					@click="$emit('retry')"
-				>
-					<RotateCounterClockwiseIcon class="size-5" />
-					{{ formatMessage(commonMessages.retryButton) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				v-if="canCancel(item)"
+				v-tooltip="canManageBackups === false ? permissionDeniedMessage : undefined"
+				type="outlined"
+				class="!border !text-blue [&>svg]:!text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)]"
+				native-type="button"
+				:disabled="cancelling || canManageBackups === false"
+				@click="$emit('cancel')"
+			>
+				{{ formatMessage(commonMessages.cancelButton) }}
+			</Button>
+			<Button
+				v-if="canRetry(item)"
+				v-tooltip="canManageBackups === false ? permissionDeniedMessage : undefined"
+				type="outlined"
+				class="!border !text-red [&>svg]:!text-red !shadow-[inset_0_0_0_1px_var(--color-red)]"
+				native-type="button"
+				:disabled="canManageBackups === false"
+				@click="$emit('retry')"
+			>
+				<RotateCounterClockwiseIcon class="size-5" />
+				{{ formatMessage(commonMessages.retryButton) }}
+			</Button>
 		</template>
 	</Admonition>
 </template>
diff --git a/packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue b/packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue
index 8ce40296d5..dc96fe350a 100644
--- a/packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue
+++ b/packages/ui/src/components/servers/admonitions/FileOperationAdmonition.vue
@@ -24,17 +24,17 @@
 			</span>
 		</span>
 		<template v-if="op.id" #top-right-actions>
-			<ButtonStyled v-if="!isTerminal" type="outlined" color="blue">
-				<button
-					v-tooltip="!canWriteFiles ? permissionDeniedMessage : undefined"
-					class="!border"
-					type="button"
-					:disabled="!canWriteFiles"
-					@click="cancelOperation"
-				>
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				v-if="!isTerminal"
+				v-tooltip="!canWriteFiles ? permissionDeniedMessage : undefined"
+				type="outlined"
+				class="!border !text-blue [&>svg]:!text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)]"
+				native-type="button"
+				:disabled="!canWriteFiles"
+				@click="cancelOperation"
+			>
+				{{ formatMessage(commonMessages.cancelButton) }}
+			</Button>
 		</template>
 	</Admonition>
 </template>
@@ -44,7 +44,7 @@ import { PackageOpenIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import { useFormatBytes } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerPermissions } from '#ui/composables/server-permissions'
diff --git a/packages/ui/src/components/servers/admonitions/UploadAdmonition.vue b/packages/ui/src/components/servers/admonitions/UploadAdmonition.vue
index b5fb1ab21e..294d793976 100644
--- a/packages/ui/src/components/servers/admonitions/UploadAdmonition.vue
+++ b/packages/ui/src/components/servers/admonitions/UploadAdmonition.vue
@@ -16,11 +16,15 @@
 			}}%)
 		</span>
 		<template v-if="cancelable" #top-right-actions>
-			<ButtonStyled type="outlined" color="blue">
-				<button class="!border" type="button" :disabled="cancelling" @click="$emit('cancel')">
-					Cancel
-				</button>
-			</ButtonStyled>
+			<Button
+				type="outlined"
+				class="!border !text-blue [&>svg]:!text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)]"
+				native-type="button"
+				:disabled="cancelling"
+				@click="$emit('cancel')"
+			>
+				Cancel
+			</Button>
 		</template>
 	</Admonition>
 </template>
@@ -30,7 +34,7 @@ import { UploadIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import { useFormatBytes } from '#ui/composables'
 import { injectModrinthServerContext } from '#ui/providers'
 
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index 363f428cc7..229f1d3d2e 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -46,22 +46,20 @@
 		</div>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hideModal">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button
-						v-tooltip="createDisabledTooltip"
-						:disabled="createDisabled"
-						@click="createBackup"
-					>
-						<PlusIcon />
-						Create backup
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hideModal">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button
+					v-tooltip="createDisabledTooltip"
+					type="colored"
+					color="brand"
+					:disabled="createDisabled"
+					@click="createBackup"
+				>
+					<PlusIcon />
+					Create backup
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -73,6 +71,8 @@ import { IssuesIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useVIntl } from '../../../composables/i18n'
 import {
 	injectModrinthClient,
@@ -80,7 +80,6 @@ import {
 	injectNotificationManager,
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 
diff --git a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
index d00e857aad..860b81264a 100644
--- a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
@@ -60,22 +60,20 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button
-						v-tooltip="deleteDisabledTooltip"
-						:disabled="!props.canDelete"
-						@click="confirmDelete"
-					>
-						<TrashIcon />
-						{{ formatMessage(messages.confirm, { count }) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="deleteDisabledTooltip"
+					type="colored"
+					color="red"
+					:disabled="!props.canDelete"
+					@click="confirmDelete"
+				>
+					<TrashIcon />
+					{{ formatMessage(messages.confirm, { count }) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -86,11 +84,12 @@ import type { Archon } from '@modrinth/api-client'
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { useScrollIndicator } from '../../../composables/scroll-indicator'
 import { commonMessages } from '../../../utils'
 import Admonition from '../../base/Admonition.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import NewModal from '../../modal/NewModal.vue'
 import BackupItem from './BackupItem.vue'
 
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index 4d883227c7..b64cf65c1a 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -13,13 +13,14 @@ import {
 } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
+import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import { Button, TeleportOverflowMenu } from '#ui/components/base/buttons'
+
 import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages, truncatedTooltip } from '../../../utils'
 import AutoLink from '../../base/AutoLink.vue'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
-import OverflowMenu, { type Option as OverflowOption } from '../../base/OverflowMenu.vue'
 
 const { formatMessage } = useVIntl()
 const formatDateTime = useFormatDateTime({
@@ -93,38 +94,41 @@ const itemBorderClass = computed(() => {
 	return 'border-transparent'
 })
 
-const overflowMenuOptions = computed<OverflowOption[]>(() => {
-	const options: OverflowOption[] = []
+const overflowMenuOptions = computed<OverflowMenuOption[]>(() => {
+	const options: OverflowMenuOption[] = []
 
 	if (props.showCopyIdAction) {
 		options.push({
 			id: 'copy-id',
+			label: formatMessage(commonMessages.copyIdButton),
 			action: () => copyId(),
 		})
 	}
 
 	if (options.length > 0) {
-		options.push({ divider: true })
+		options.push({ type: 'divider' })
 	}
 
 	options.push({
 		id: 'download',
+		label: formatMessage(commonMessages.downloadButton),
 		action: () => emit('download'),
-		link: `https://${props.kyrosUrl}/modrinth/v0/backups/${props.backup.id}/download?auth=${props.jwt}`,
 		disabled: !props.kyrosUrl || !props.jwt,
 	})
 
 	options.push({
 		id: 'rename',
+		label: formatMessage(messages.rename),
 		action: () => emit('rename'),
 		disabled: props.writeDisabled,
 		tooltip: props.writeDisabled ? props.writeDisabledTooltip : undefined,
 	})
 
-	options.push({ divider: true })
+	options.push({ type: 'divider' })
 	options.push({
 		id: 'delete',
-		color: 'red',
+		label: formatMessage(commonMessages.deleteLabel),
+		tone: 'red',
 		action: () => emit('delete'),
 		disabled: props.writeDisabled,
 		tooltip: props.writeDisabled ? props.writeDisabledTooltip : undefined,
@@ -265,35 +269,32 @@ const creatorAvatarSrc = computed(() =>
 
 		<!-- Right side actions -->
 		<div v-if="!preview" class="flex min-w-0 flex-1 items-center justify-end gap-2">
-			<ButtonStyled color="brand" type="outlined">
-				<button
-					v-tooltip="props.restoreDisabled"
-					class="!border"
-					:disabled="!!props.restoreDisabled"
-					@click="() => emit('restore')"
-				>
-					<RotateCounterClockwiseIcon class="size-5" />
-					{{ formatMessage(messages.restore) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled circular type="transparent">
-				<OverflowMenu :options="overflowMenuOptions">
-					<MoreVerticalIcon class="size-5" />
-					<template #copy-id>
-						<ClipboardCopyIcon class="size-5" />
-						{{ formatMessage(commonMessages.copyIdButton) }}
-					</template>
-					<template #download>
-						<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
-					</template>
-					<template #rename>
-						<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
-					</template>
-					<template #delete>
-						<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
-					</template>
-				</OverflowMenu>
-			</ButtonStyled>
+			<Button
+				v-tooltip="props.restoreDisabled"
+				type="outlined"
+				class="!border !text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)]"
+				:disabled="!!props.restoreDisabled"
+				@click="() => emit('restore')"
+			>
+				<RotateCounterClockwiseIcon class="size-5" />
+				{{ formatMessage(messages.restore) }}
+			</Button>
+			<TeleportOverflowMenu type="quiet" label="More options" :options="overflowMenuOptions">
+				<MoreVerticalIcon class="size-5" />
+				<template #copy-id>
+					<ClipboardCopyIcon class="size-5" />
+					{{ formatMessage(commonMessages.copyIdButton) }}
+				</template>
+				<template #download>
+					<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
+				</template>
+				<template #rename>
+					<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
+				</template>
+				<template #delete>
+					<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
+				</template>
+			</TeleportOverflowMenu>
 		</div>
 
 		<pre v-if="!preview && showDebugInfo" class="w-full rounded-xl bg-surface-4 p-2 text-xs">{{
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index 54d090990a..97c34d2a69 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -22,28 +22,26 @@
 		</div>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button
-						v-tooltip="renameDisabledTooltip"
-						:disabled="renameDisabled"
-						@click="renameBackup"
-					>
-						<template v-if="renameMutation.isPending.value">
-							<SpinnerIcon class="animate-spin" />
-							Renaming...
-						</template>
-						<template v-else>
-							<SaveIcon />
-							Save changes
-						</template>
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button
+					v-tooltip="renameDisabledTooltip"
+					type="colored"
+					color="brand"
+					:disabled="renameDisabled"
+					@click="renameBackup"
+				>
+					<template v-if="renameMutation.isPending.value">
+						<SpinnerIcon class="animate-spin" />
+						Renaming...
+					</template>
+					<template v-else>
+						<SaveIcon />
+						Save changes
+					</template>
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -55,6 +53,8 @@ import { IssuesIcon, SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useVIntl } from '../../../composables/i18n'
 import {
 	injectModrinthClient,
@@ -62,7 +62,6 @@ import {
 	injectNotificationManager,
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 
diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index 64dc1de2c6..016dccbe37 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -17,23 +17,21 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button
-						v-tooltip="restoreDisabledTooltip"
-						:disabled="restoreDisabled"
-						@click="restoreBackup"
-					>
-						<SpinnerIcon v-if="isRestoring" class="animate-spin" />
-						<RotateCounterClockwiseIcon v-else />
-						{{ isRestoring ? 'Restoring...' : 'Restore backup' }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button
+					v-tooltip="restoreDisabledTooltip"
+					type="colored"
+					color="red"
+					:disabled="restoreDisabled"
+					@click="restoreBackup"
+				>
+					<SpinnerIcon v-if="isRestoring" class="animate-spin" />
+					<RotateCounterClockwiseIcon v-else />
+					{{ isRestoring ? 'Restoring...' : 'Restore backup' }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -45,6 +43,8 @@ import { RotateCounterClockwiseIcon, SpinnerIcon, XIcon } from '@modrinth/assets
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useVIntl } from '../../../composables/i18n'
 import {
 	injectModrinthClient,
@@ -53,7 +53,6 @@ import {
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
 import Admonition from '../../base/Admonition.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import NewModal from '../../modal/NewModal.vue'
 import BackupItem from './BackupItem.vue'
 
diff --git a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
index 936e415cca..30967a7440 100644
--- a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
+++ b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
@@ -2,19 +2,25 @@
 	<div class="flex flex-col gap-2.5">
 		<span class="text-lg font-semibold text-contrast">Icon</span>
 		<div class="group relative w-fit">
-			<OverflowMenu
-				v-tooltip="editIconTooltip"
-				class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+			<TeleportOverflowMenu
+				:label="editIconTooltip"
+				:tooltip="editIconTooltip"
+				:icon-only="false"
+				type="quiet"
+				interaction="none"
+				class="m-0 !h-auto cursor-pointer appearance-none border-none bg-transparent !p-0 transition-transform group-active:scale-95"
 				:disabled="isIconActionDisabled"
 				:options="[
 					{
 						id: 'upload',
+						label: 'Upload icon',
 						action: () => triggerFileInput(),
 						disabled: !props.canEdit,
 						tooltip: !props.canEdit ? editIconTooltip : undefined,
 					},
 					{
 						id: 'sync',
+						label: 'Sync icon',
 						action: () => resetIcon(),
 						disabled: !props.canEdit,
 						tooltip: !props.canEdit ? editIconTooltip : undefined,
@@ -39,7 +45,7 @@
 				</div>
 				<template #upload> <UploadIcon /> Upload icon </template>
 				<template #sync> <TransferIcon /> Sync icon </template>
-			</OverflowMenu>
+			</TeleportOverflowMenu>
 		</div>
 	</div>
 </template>
@@ -49,7 +55,7 @@ import { EditIcon, SpinnerIcon, TransferIcon, UploadIcon } from '@modrinth/asset
 import { useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
-import { OverflowMenu, ServerIcon } from '#ui/components'
+import { ServerIcon, TeleportOverflowMenu } from '#ui/components'
 import { useServerImage } from '#ui/composables'
 import { useVIntl } from '#ui/composables/i18n'
 import {
diff --git a/packages/ui/src/components/servers/marketing/MedalServerCountdown.vue b/packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
index e219c20ea2..fd67f30c1c 100644
--- a/packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
@@ -30,9 +30,10 @@
 			</Transition>
 		</div>
 
-		<ButtonStyled color="medal-promo" type="outlined" size="large">
-			<button class="z-10 my-auto" @click="openUpgradeModal"><RocketIcon /> Upgrade</button>
-		</ButtonStyled>
+		<Button type="outlined" size="xl" class="z-10 my-auto" @click="openUpgradeModal">
+			<RocketIcon aria-hidden="true" />
+			Upgrade
+		</Button>
 	</div>
 	<ServersUpgradeModalWrapper
 		ref="upgradeModal"
@@ -50,7 +51,7 @@ import dayjs from 'dayjs'
 import dayjsDuration from 'dayjs/plugin/duration'
 import { type ComponentPublicInstance, computed, onMounted, onUnmounted, ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import ServersUpgradeModalWrapper from '#ui/components/billing/ServersUpgradeModalWrapper.vue'
 import { injectModrinthClient } from '#ui/providers'
 
diff --git a/packages/ui/src/components/servers/marketing/MedalServerListing.vue b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
index b357dfc933..ade503c3aa 100644
--- a/packages/ui/src/components/servers/marketing/MedalServerListing.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
@@ -120,11 +120,17 @@
 			</div>
 
 			<div class="z-10 ml-auto">
-				<ButtonStyled color="medal-promo" type="outlined" size="large">
-					<button class="my-auto" data-server-listing-button @click="handleUpgrade">
-						<RocketIcon /> {{ formatMessage(messages.upgradeButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="outlined"
+					color="medal_promotion"
+					size="xl"
+					class="my-auto"
+					data-server-listing-button
+					@click="handleUpgrade"
+				>
+					<RocketIcon aria-hidden="true" />
+					{{ formatMessage(messages.upgradeButton) }}
+				</Button>
 			</div>
 		</div>
 
@@ -168,10 +174,11 @@ import dayjsDuration from 'dayjs/plugin/duration'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectModrinthClient } from '../../../providers/api-client'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import CopyCode from '../../base/CopyCode.vue'
 import IntlFormatted from '../../base/IntlFormatted.vue'
 import type { ServerListingOwner } from '../access/types'
diff --git a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
index 52d47effe2..381aed3b28 100644
--- a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
+++ b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
@@ -1,60 +1,75 @@
 <template>
 	<div class="contents">
 		<div class="flex flex-row items-center gap-2 rounded-lg">
-			<ButtonStyled v-if="isInstalling" type="standard" color="brand" size="large">
-				<button disabled class="flex-shrink-0">
-					<LoaderCircleIcon class="size-5 animate-spin" /> Installing...
-				</button>
-			</ButtonStyled>
+			<Button
+				v-if="isInstalling"
+				type="colored"
+				color="brand"
+				size="xl"
+				disabled
+				class="flex-shrink-0"
+			>
+				<LoaderCircleIcon class="size-5 animate-spin" /> Installing...
+			</Button>
 
 			<template v-else-if="showRestartButton">
-				<ButtonStyled type="standard" color="orange" size="large">
-					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
-						<UpdatedIcon />
-						<span>{{ primaryActionText }}</span>
-					</button>
-				</ButtonStyled>
-
-				<JoinedButtons
-					color="red"
-					size="large"
-					:actions="stopSplitActions"
-					:primary-disabled="!canTakeAction"
-					:dropdown-disabled="!canKill"
-					:primary-tooltip="busyTooltip"
-					:dropdown-tooltip="busyTooltip"
+				<Button
+					v-tooltip="busyTooltip"
+					type="colored"
+					color="orange"
+					size="xl"
+					:disabled="!canTakeAction"
+					@click="handlePrimaryAction"
 				>
-					<template #kill_server>
-						<SlashIcon class="h-5 w-5" />
-						Kill server
-					</template>
-				</JoinedButtons>
+					<UpdatedIcon />
+					<span>{{ primaryActionText }}</span>
+				</Button>
+
+				<SplitButton
+					v-tooltip="busyTooltip"
+					type="colored"
+					color="red"
+					size="xl"
+					:options="stopMenuOptions"
+					menu-label="Force stop options"
+					:primary-disabled="!canTakeAction"
+					:menu-disabled="!canKill"
+					@click="initiateAction('Stop')"
+				>
+					<StopCircleIcon />
+					{{ isStopping ? 'Stopping' : 'Stop' }}
+				</SplitButton>
 			</template>
 
 			<template v-else-if="isStopping">
-				<JoinedButtons
+				<SplitButton
+					v-tooltip="busyTooltip"
+					type="colored"
 					color="red"
-					size="large"
-					:actions="stopSplitActions"
+					size="xl"
+					:options="stopMenuOptions"
+					menu-label="Force stop options"
 					:primary-disabled="true"
-					:dropdown-disabled="!canKill"
-					:primary-muted="true"
-					:dropdown-tooltip="busyTooltip"
+					:menu-disabled="!canKill"
+					class="opacity-60"
 				>
-					<template #kill_server>
-						<SlashIcon class="h-5 w-5" />
-						Kill server
-					</template>
-				</JoinedButtons>
+					<StopCircleIcon />
+					Stopping
+				</SplitButton>
 			</template>
 
 			<template v-else>
-				<ButtonStyled type="standard" color="brand" size="large">
-					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
-						<PlayIcon />
-						<span>{{ primaryActionText }}</span>
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="busyTooltip"
+					type="colored"
+					color="brand"
+					size="xl"
+					:disabled="!canTakeAction"
+					@click="handlePrimaryAction"
+				>
+					<PlayIcon />
+					<span>{{ primaryActionText }}</span>
+				</Button>
 			</template>
 		</div>
 	</div>
@@ -70,7 +85,8 @@ import {
 } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import { ButtonStyled, type JoinedButtonAction, JoinedButtons } from '#ui/components'
+import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import { Button, SplitButton } from '#ui/components/base/buttons'
 
 import { useServerPowerAction } from './use-server-power-action'
 
@@ -97,13 +113,7 @@ const {
 	disabled: computed(() => props.disabled),
 })
 
-const stopSplitActions = computed<JoinedButtonAction[]>(() => [
-	{
-		id: 'stop',
-		label: isStopping.value ? 'Stopping' : 'Stop',
-		icon: StopCircleIcon,
-		action: () => initiateAction('Stop'),
-	},
+const stopMenuOptions = computed<OverflowMenuOption[]>(() => [
 	{
 		id: 'kill_server',
 		label: 'Kill server',
diff --git a/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue b/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
index 791c85410f..3e58b62071 100644
--- a/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
+++ b/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
@@ -66,12 +66,10 @@
 			<!-- CTA section -->
 			<div class="flex flex-col gap-6 items-start">
 				<div class="flex flex-col gap-3 items-start">
-					<ButtonStyled color="brand">
-						<button @click="onClickNewServer?.()">
-							<PlusIcon aria-hidden="true" />
-							{{ formatMessage(messages.newServerButton) }}
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" @click="onClickNewServer?.()">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.newServerButton) }}
+					</Button>
 
 					<AutoLink
 						to="https://modrinth.com/hosting"
@@ -90,12 +88,10 @@
 						<p class="text-base font-normal text-primary">
 							{{ formatMessage(messages.alreadyHaveServerLabel) }}
 						</p>
-						<ButtonStyled>
-							<button @click="onClickSignIn?.()">
-								<LogInIcon aria-hidden="true" />
-								{{ formatMessage(messages.signInButton) }}
-							</button>
-						</ButtonStyled>
+						<Button @click="onClickSignIn?.()">
+							<LogInIcon aria-hidden="true" />
+							{{ formatMessage(messages.signInButton) }}
+						</Button>
 					</div>
 				</template>
 			</div>
@@ -153,7 +149,7 @@ import {
 } from '@modrinth/assets'
 import { AutoLink } from '@modrinth/ui'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import imgAircraft from './grid-images/aircraft.png'
diff --git a/packages/ui/src/components/sharing/invite-players-modal/index.vue b/packages/ui/src/components/sharing/invite-players-modal/index.vue
index 0499ee1af7..656459e741 100644
--- a/packages/ui/src/components/sharing/invite-players-modal/index.vue
+++ b/packages/ui/src/components/sharing/invite-players-modal/index.vue
@@ -54,17 +54,17 @@
 							</div>
 						</template>
 					</Combobox>
-					<ButtonStyled color="brand">
-						<button
-							v-tooltip="searchInviteTooltip"
-							class="shrink-0"
-							:disabled="!canInviteSearchTarget"
-							@click="inviteSearchTarget"
-						>
-							<PlusIcon aria-hidden="true" />
-							{{ addButtonLabel }}
-						</button>
-					</ButtonStyled>
+					<Button
+						v-tooltip="searchInviteTooltip"
+						type="colored"
+						color="brand"
+						class="shrink-0"
+						:disabled="!canInviteSearchTarget"
+						@click="inviteSearchTarget"
+					>
+						<PlusIcon aria-hidden="true" />
+						{{ addButtonLabel }}
+					</Button>
 				</div>
 			</div>
 
@@ -102,18 +102,17 @@
 					<div class="text-base font-semibold text-contrast">
 						{{ inviteLinkHeading }}
 					</div>
-					<ButtonStyled>
-						<button
-							type="button"
-							class="!h-10 w-full !justify-between !px-4 text-left !shadow-none"
-							@click="copyInviteLink"
-						>
-							<span class="min-w-0 truncate text-base font-semibold text-primary">
-								{{ link }}
-							</span>
-							<ClipboardCopyIcon class="size-5 shrink-0 text-secondary" aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+					<Button
+						native-type="button"
+						size="lg"
+						class="w-full !justify-between text-left"
+						@click="copyInviteLink"
+					>
+						<span class="min-w-0 truncate text-base font-semibold text-primary">
+							{{ link }}
+						</span>
+						<ClipboardCopyIcon class="size-5 shrink-0 text-secondary" aria-hidden="true" />
+					</Button>
 					<p v-if="link && linkExpiryDescription" class="m-0 text-base text-primary">
 						{{ linkExpiryDescription }}
 						<button
@@ -144,10 +143,11 @@
 import { ClipboardCopyIcon, PlusIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectNotificationManager } from '../../../providers'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import Combobox from '../../base/Combobox.vue'
 import NewModal from '../../modal/NewModal.vue'
 import InvitePlayersModalInviteLinkEditor from './invite-players-modal-invite-link-editor.vue'
diff --git a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
index 433b42085e..e1caca8cd1 100644
--- a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
+++ b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
@@ -31,20 +31,18 @@
 								calendar-class="!border-none"
 							/>
 							<div class="flex justify-end gap-2 p-3 pt-1">
-								<ButtonStyled type="outlined">
-									<button type="button" @click="cancelCustomExpiry">
-										{{ formatMessage(messages.cancel) }}
-									</button>
-								</ButtonStyled>
-								<ButtonStyled color="brand">
-									<button
-										type="button"
-										:disabled="!canApplyCustomExpiry"
-										@click="applyCustomExpiry"
-									>
-										{{ formatMessage(messages.apply) }}
-									</button>
-								</ButtonStyled>
+								<Button type="outlined" native-type="button" @click="cancelCustomExpiry">
+									{{ formatMessage(messages.cancel) }}
+								</Button>
+								<Button
+									type="colored"
+									color="brand"
+									native-type="button"
+									:disabled="!canApplyCustomExpiry"
+									@click="applyCustomExpiry"
+								>
+									{{ formatMessage(messages.apply) }}
+								</Button>
 							</div>
 						</div>
 						<button
@@ -73,19 +71,15 @@
 		</div>
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<button :disabled="saving" @click="modal?.hide()">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(messages.cancel) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!canSave" @click="save">
-						<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
-						<SaveIcon v-else aria-hidden="true" />
-						{{ formatMessage(messages.save) }}
-					</button>
-				</ButtonStyled>
+				<Button :disabled="saving" @click="modal?.hide()">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(messages.cancel) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!canSave" @click="save">
+					<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
+					<SaveIcon v-else aria-hidden="true" />
+					{{ formatMessage(messages.save) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -95,10 +89,11 @@
 import { SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { computed, ref, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectNotificationManager } from '../../../providers'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
 import DatePicker from '../../base/DatePicker.vue'
 import StyledInput from '../../base/StyledInput.vue'
diff --git a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-user-row.vue b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-user-row.vue
index d4bd297094..50d3a696ff 100644
--- a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-user-row.vue
+++ b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-user-row.vue
@@ -30,29 +30,26 @@
 			</AutoLink>
 		</div>
 
-		<ButtonStyled v-if="status === 'added'" type="standard" color-fill="none">
-			<button disabled>
-				<CheckIcon aria-hidden="true" />
-				{{ addedLabel }}
-			</button>
-		</ButtonStyled>
-		<ButtonStyled v-else-if="status === 'pending'" type="outlined">
-			<button :disabled="disabled" @click="$emit('cancel', user)">
-				{{ cancelLabel }}
-			</button>
-		</ButtonStyled>
+		<Button v-if="status === 'added'" type="quiet" disabled>
+			<CheckIcon aria-hidden="true" />
+			{{ addedLabel }}
+		</Button>
+		<Button
+			v-else-if="status === 'pending'"
+			type="outlined"
+			:disabled="disabled"
+			@click="$emit('cancel', user)"
+		>
+			{{ cancelLabel }}
+		</Button>
 		<span v-else-if="status === 'requested'" v-tooltip="requestedTooltip" class="inline-flex">
-			<ButtonStyled type="standard" color-fill="none">
-				<button disabled>
-					{{ requestedLabel }}
-				</button>
-			</ButtonStyled>
+			<Button type="quiet" disabled>
+				{{ requestedLabel }}
+			</Button>
 		</span>
-		<ButtonStyled v-else color-fill="none">
-			<button :disabled="disabled" @click="$emit('invite', user)">
-				{{ inviteLabel }}
-			</button>
-		</ButtonStyled>
+		<Button v-else type="quiet" :disabled="disabled" @click="$emit('invite', user)">
+			{{ inviteLabel }}
+		</Button>
 	</div>
 </template>
 
@@ -60,9 +57,10 @@
 import { CheckIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import AutoLink from '../../base/AutoLink.vue'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import type { InvitePlayersUser, InvitePlayersUserProfileLink } from './types'
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/user/UserPageHeader.vue b/packages/ui/src/components/user/UserPageHeader.vue
index bac7c7db25..5fd30e87db 100644
--- a/packages/ui/src/components/user/UserPageHeader.vue
+++ b/packages/ui/src/components/user/UserPageHeader.vue
@@ -57,21 +57,19 @@
 
 		<template #actions>
 			<PageHeaderActions>
-				<ButtonStyled v-if="isSelf" size="large">
-					<AutoLink :to="editProfileLink">
-						<EditIcon />
-						{{ formatMessage(commonMessages.editButton) }}
-					</AutoLink>
-				</ButtonStyled>
-				<ButtonStyled circular size="large" type="transparent">
-					<TeleportOverflowMenu
-						:options="moreActions"
-						:tooltip="formatMessage(commonMessages.moreOptionsButton)"
-						:aria-label="formatMessage(commonMessages.moreOptionsButton)"
-					>
-						<MoreVerticalIcon />
-					</TeleportOverflowMenu>
-				</ButtonStyled>
+				<ButtonLink v-if="isSelf" size="xl" :to="editProfileLink">
+					<EditIcon />
+					{{ formatMessage(commonMessages.editButton) }}
+				</ButtonLink>
+				<TeleportOverflowMenu
+					type="quiet"
+					size="xl"
+					:label="formatMessage(commonMessages.moreOptionsButton)"
+					:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+					:options="moreActions"
+				>
+					<MoreVerticalIcon />
+				</TeleportOverflowMenu>
 			</PageHeaderActions>
 		</template>
 	</PageHeader>
@@ -96,17 +94,15 @@ import {
 } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import { ButtonLink, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import PageHeader from '#ui/components/base/page-header/index.vue'
 import PageHeaderMetadata from '#ui/components/base/page-header/metadata/index.vue'
 import PageHeaderMetadataNumberItem from '#ui/components/base/page-header/metadata/page-header-metadata-number-item.vue'
 import PageHeaderMetadataTimeItem from '#ui/components/base/page-header/metadata/page-header-metadata-time-item.vue'
 import PageHeaderActions from '#ui/components/base/page-header/page-header-actions.vue'
 import PageHeaderBadgeItem from '#ui/components/base/page-header/page-header-badge-item.vue'
-import type { Item as TeleportOverflowMenuItem } from '#ui/components/base/TeleportOverflowMenu.vue'
-import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import { defineMessages, useFormatDateTime, useFormatNumber, useVIntl } from '#ui/composables'
 import type { AuthUser } from '#ui/providers/auth'
 import { commonMessages } from '#ui/utils'
@@ -228,7 +224,7 @@ const formatDateTime = useFormatDateTime({
 const downloadsTooltip = computed(() => formatNumber(props.downloads))
 const joinedTooltip = computed(() => formatDateTime(props.user.created))
 
-const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
+const moreActions = computed<OverflowMenuOption[]>(() => [
 	{
 		id: 'manage-projects',
 		label: formatMessage(messages.profileManageProjectsButton),
@@ -236,16 +232,13 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 		action: () => emit('manageProjects'),
 		shown: props.isSelf,
 	},
-	{
-		divider: true,
-		shown: props.isSelf,
-	},
+	{ type: 'divider', shown: props.isSelf },
 	{
 		id: 'report',
 		label: formatMessage(commonMessages.reportButton),
 		icon: ReportIcon,
 		action: () => emit('report'),
-		color: 'red',
+		tone: 'red',
 		shown: props.authUser?.id !== props.user.id,
 	},
 	{
@@ -253,7 +246,7 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 		label: formatMessage(props.isBlocked ? messages.unblockButton : messages.blockButton),
 		icon: BanIcon,
 		action: () => emit('block'),
-		color: 'red',
+		tone: 'red',
 		shown: props.authUser?.id !== props.user.id,
 	},
 	{
@@ -268,15 +261,13 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 		icon: ClipboardCopyIcon,
 		action: () => emit('copyPermalink'),
 	},
-	{
-		divider: true,
-		shown: props.showStaffActions && (props.isAdmin || props.isStaff),
-	},
+	{ type: 'divider', shown: props.showStaffActions && (props.isAdmin || props.isStaff) },
 	{
 		id: 'open-billing',
 		label: formatMessage(messages.billingButton),
 		icon: CurrencyIcon,
 		action: () => emit('openBilling'),
+		tone: 'orange',
 		shown: props.showStaffActions && props.isStaff,
 	},
 	{
@@ -287,14 +278,15 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 		icon: AffiliateIcon,
 		action: () => emit('toggleAffiliate'),
 		shown: props.showStaffActions && props.isAdmin,
-		remainOnClick: true,
-		color: props.isAffiliate ? 'red' : 'orange',
+		remainOpen: true,
+		tone: props.isAffiliate ? 'red' : 'orange',
 	},
 	{
 		id: 'open-info',
 		label: formatMessage(messages.infoButton),
 		icon: InfoIcon,
 		action: () => emit('openInfo'),
+		tone: 'orange',
 		shown: props.showStaffActions && props.isStaff,
 	},
 	{
@@ -302,6 +294,7 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 		label: formatMessage(messages.analyticsButton),
 		icon: ChartIcon,
 		action: () => emit('openAnalytics'),
+		tone: 'orange',
 		shown: props.showStaffActions && props.isAdmin,
 	},
 	{
@@ -309,6 +302,7 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 		label: formatMessage(messages.editRoleButton),
 		icon: EditIcon,
 		action: () => emit('editRole'),
+		tone: 'orange',
 		shown: props.showStaffActions && props.isAdmin,
 	},
 ])
diff --git a/packages/ui/src/components/version/VersionFilterControl.vue b/packages/ui/src/components/version/VersionFilterControl.vue
index 09a77a7bdd..5c38c04da4 100644
--- a/packages/ui/src/components/version/VersionFilterControl.vue
+++ b/packages/ui/src/components/version/VersionFilterControl.vue
@@ -7,13 +7,13 @@
 				:options="platformOptions"
 				fit-content
 				:dropdown-min-width="180"
-				trigger-class="!min-h-9 !px-3 !py-0"
+				trigger-type="base"
 				@update:model-value="updateSelectedPlatforms"
 			>
 				<template #input-content="{ isOpen, openDirection }">
 					<div class="flex items-center gap-2">
 						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-primary">Platforms</span>
+						<span class="font-semibold text-inherit">Platforms</span>
 						<ChevronLeftIcon
 							class="h-5 w-5 text-secondary transition-transform duration-150"
 							:class="
@@ -31,13 +31,13 @@
 				search-placeholder="Search..."
 				fit-content
 				:dropdown-min-width="240"
-				trigger-class="!min-h-9 !px-3 !py-0"
+				trigger-type="base"
 				@update:model-value="updateSelectedGameVersions"
 			>
 				<template #input-content="{ isOpen, openDirection }">
 					<div class="flex items-center gap-2">
 						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-primary">Game versions</span>
+						<span class="font-semibold text-inherit">Game versions</span>
 						<ChevronLeftIcon
 							class="h-5 w-5 text-secondary transition-transform duration-150"
 							:class="
@@ -63,13 +63,13 @@
 				:options="channelOptions"
 				fit-content
 				:dropdown-min-width="180"
-				trigger-class="!min-h-9 !px-3 !py-0"
+				trigger-type="base"
 				@update:model-value="updateSelectedChannels"
 			>
 				<template #input-content="{ isOpen, openDirection }">
 					<div class="flex items-center gap-2">
 						<FilterIcon class="h-5 w-5 text-secondary" />
-						<span class="font-semibold text-primary">Channels</span>
+						<span class="font-semibold text-inherit">Channels</span>
 						<ChevronLeftIcon
 							class="h-5 w-5 text-secondary transition-transform duration-150"
 							:class="
diff --git a/packages/ui/src/components/version/VersionSummary.vue b/packages/ui/src/components/version/VersionSummary.vue
index 8e26a8ea1c..db345933bd 100644
--- a/packages/ui/src/components/version/VersionSummary.vue
+++ b/packages/ui/src/components/version/VersionSummary.vue
@@ -11,27 +11,25 @@
 				{{ version.name }}
 			</p>
 		</div>
-		<ButtonStyled color="brand">
-			<a
-				:href="downloadUrl"
-				:download="primaryFilename"
-				class="min-w-0"
-				@click="emit('onDownload')"
-			>
-				<DownloadIcon aria-hidden="true" /> Download
-			</a>
-		</ButtonStyled>
-		<ButtonStyled circular>
-			<button
-				class="min-w-0"
-				aria-label="View version"
-				@click="
-					emit('onNavigate', `/project/${props.version.project_id}/version/${props.version.id}`)
-				"
-			>
-				<ExternalIcon aria-hidden="true" />
-			</button>
-		</ButtonStyled>
+		<ButtonLink
+			type="colored"
+			color="brand"
+			:href="downloadUrl"
+			:download="primaryFilename"
+			class="min-w-0"
+			@click="emit('onDownload')"
+		>
+			<DownloadIcon aria-hidden="true" /> Download
+		</ButtonLink>
+		<IconButton
+			label="View version"
+			class="min-w-0"
+			@click="
+				emit('onNavigate', `/project/${props.version.project_id}/version/${props.version.id}`)
+			"
+		>
+			<ExternalIcon aria-hidden="true" />
+		</IconButton>
 	</div>
 </template>
 
@@ -40,7 +38,9 @@ import { DownloadIcon, ExternalIcon } from '@modrinth/assets'
 import type { Version, VersionFile } from '@modrinth/utils'
 import { computed } from 'vue'
 
-import { ButtonStyled, VersionChannelIndicator } from '../index'
+import { ButtonLink, IconButton } from '#ui/components/base/buttons'
+
+import { VersionChannelIndicator } from '../index'
 
 const props = defineProps<{
 	version: Version
diff --git a/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsFloatingBar.vue b/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsFloatingBar.vue
index a97ac6ba2a..5fc1a98cb1 100644
--- a/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsFloatingBar.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsFloatingBar.vue
@@ -40,25 +40,28 @@
 				{{ selectedCountText }}
 			</span>
 			<div class="mx-0.5 h-6 w-px bg-surface-5" />
-			<ButtonStyled type="transparent">
-				<button
-					type="button"
-					class="!text-primary"
-					:disabled="isInstallingSelected"
-					@click="clearSelected"
-				>
-					<span>{{ formatMessage(commonMessages.clearButton) }}</span>
-				</button>
-			</ButtonStyled>
+			<Button
+				type="quiet"
+				native-type="button"
+				class="!text-primary"
+				:disabled="isInstallingSelected"
+				@click="clearSelected"
+			>
+				<span>{{ formatMessage(commonMessages.clearButton) }}</span>
+			</Button>
 		</div>
 
 		<div class="ml-auto shrink-0">
-			<ButtonStyled color="green">
-				<button type="button" :disabled="isInstallingSelected" @click="installSelected">
-					<PlusIcon />
-					{{ installButtonText }}
-				</button>
-			</ButtonStyled>
+			<Button
+				type="colored"
+				color="green"
+				native-type="button"
+				:disabled="isInstallingSelected"
+				@click="installSelected"
+			>
+				<PlusIcon />
+				{{ installButtonText }}
+			</Button>
 		</div>
 	</FloatingActionBar>
 </template>
@@ -68,7 +71,7 @@ import { PlusIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue b/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue
index c20bae50c8..450c70665b 100644
--- a/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue
@@ -6,24 +6,18 @@
 
 		<template #actions>
 			<div class="flex flex-wrap justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="resolve('cancel')">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="installing" @click="resolve('discard')">
-						<TrashIcon />
-						{{ formatMessage(messages.discardButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="green">
-					<button :disabled="installing" @click="resolve('install')">
-						<PlusIcon />
-						{{ formatMessage(commonMessages.installButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="resolve('cancel')">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" :disabled="installing" @click="resolve('discard')">
+					<TrashIcon />
+					{{ formatMessage(messages.discardButton) }}
+				</Button>
+				<Button type="colored" color="green" :disabled="installing" @click="resolve('install')">
+					<PlusIcon />
+					{{ formatMessage(commonMessages.installButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -33,7 +27,7 @@
 import { PlusIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
index cda1745fb1..b2094e07fa 100644
--- a/packages/ui/src/layouts/shared/browse-tab/header.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { IconButton } from '#ui/components/base/buttons'
 import PageHeader from '#ui/components/base/page-header/index.vue'
 import PageHeaderMetadata from '#ui/components/base/page-header/metadata/index.vue'
 import PageHeaderMetadataItem from '#ui/components/base/page-header/metadata/page-header-metadata-item.vue'
@@ -146,16 +146,15 @@ async function handleSelectedProjectsLeaveResult(
 			truncate-title
 		>
 			<template #leading>
-				<ButtonStyled circular size="large">
-					<button
-						v-tooltip="installContext.backLabel"
-						type="button"
-						:aria-label="installContext.backLabel"
-						@click="handleBack"
-					>
-						<LeftArrowIcon />
-					</button>
-				</ButtonStyled>
+				<IconButton
+					v-tooltip="installContext.backLabel"
+					size="xl"
+					:label="installContext.backLabel"
+					native-type="button"
+					@click="handleBack"
+				>
+					<LeftArrowIcon />
+				</IconButton>
 				<Avatar
 					v-if="iconSrc"
 					:src="iconSrc"
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index c407a9be94..371333d612 100644
--- a/packages/ui/src/layouts/shared/browse-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -3,7 +3,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { SearchIcon } from '@modrinth/assets'
 import { computed, ref, toValue } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button, IconButton } from '#ui/components/base/buttons'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
@@ -20,6 +20,7 @@ import type { SortType } from '#ui/utils/search'
 import SelectedProjectsFloatingBar from './components/SelectedProjectsFloatingBar.vue'
 import BrowseInstallHeader from './header.vue'
 import { injectBrowseManager } from './providers/browse-manager'
+import type { CardAction } from './types'
 
 const ctx = injectBrowseManager()
 const { formatMessage } = useVIntl()
@@ -67,6 +68,27 @@ const messages = defineMessages({
 	},
 })
 
+function cardActionType(action: CardAction) {
+	if (action.type === 'transparent') return 'quiet'
+	if (action.type === 'outlined') return 'outlined'
+	return action.color && action.color !== 'standard' ? 'colored' : 'base'
+}
+
+function cardActionColor(action: CardAction) {
+	const type = cardActionType(action)
+	return type === 'colored' || type === 'quiet' ? action.color : undefined
+}
+
+function cardActionClass(action: CardAction) {
+	if (action.type !== 'outlined' || !action.color || action.color === 'standard') return undefined
+
+	return {
+		brand: '!text-brand [&>svg]:!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)]',
+		red: '!text-red [&>svg]:!text-red !shadow-[inset_0_0_0_1px_var(--color-red)]',
+		green: '!text-green [&>svg]:!text-green !shadow-[inset_0_0_0_1px_var(--color-green)]',
+	}[action.color]
+}
+
 function getLoaderFieldValues(
 	result: Labrinth.Search.v3.ResultSearchProject,
 	field: string,
@@ -133,6 +155,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		<Combobox
 			:model-value="ctx.effectiveCurrentSortType.value"
 			:options="sortOptions"
+			trigger-type="base"
 			:class="
 				ctx.variant === 'web'
 					? '!w-[16rem] min-w-max max-w-full flex-grow md:flex-grow-0'
@@ -150,6 +173,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		<Combobox
 			:model-value="ctx.maxResults.value"
 			:options="maxResultsOptions"
+			trigger-type="base"
 			:class="
 				ctx.variant === 'web'
 					? '!w-[9rem] min-w-max max-w-full flex-grow md:flex-grow-0'
@@ -164,18 +188,18 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		</Combobox>
 
 		<div v-if="ctx.filtersMenuOpen && !ctx.filtersMenuOpen.value" class="lg:hidden">
-			<ButtonStyled>
-				<button @click="ctx.filtersMenuOpen.value = true">
-					{{ formatMessage(messages.filterResults) }}
-				</button>
-			</ButtonStyled>
+			<Button @click="ctx.filtersMenuOpen.value = true">
+				{{ formatMessage(messages.filterResults) }}
+			</Button>
 		</div>
 
-		<ButtonStyled v-if="ctx.cycleDisplayMode" circular>
-			<button @click="ctx.cycleDisplayMode!()">
-				<slot name="display-mode-icon" />
-			</button>
-		</ButtonStyled>
+		<IconButton
+			v-if="ctx.cycleDisplayMode"
+			label="Change display mode"
+			@click="ctx.cycleDisplayMode!()"
+		>
+			<slot name="display-mode-icon" />
+		</IconButton>
 
 		<Pagination
 			:page="ctx.currentPage.value"
@@ -253,22 +277,35 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 				>
 					<template v-if="ctx.getCardActions?.(result, ctx.projectType.value)?.length" #actions>
 						<div class="flex gap-2">
-							<ButtonStyled
+							<template
 								v-for="action in ctx.getCardActions(result, ctx.projectType.value)"
 								:key="action.key"
-								:color="action.color"
-								:type="action.type"
-								:circular="action.circular"
 							>
-								<button
+								<IconButton
+									v-if="action.circular"
 									v-tooltip="action.tooltip"
+									:type="cardActionType(action)"
+									:color="cardActionColor(action)"
+									:class="cardActionClass(action)"
+									:label="action.label || action.tooltip || action.key"
 									:disabled="action.disabled"
 									@click.stop="action.onClick"
 								>
 									<component :is="action.icon" :class="action.iconClass" />
-									<template v-if="!action.circular">{{ action.label }}</template>
-								</button>
-							</ButtonStyled>
+								</IconButton>
+								<Button
+									v-else
+									v-tooltip="action.tooltip"
+									:type="cardActionType(action)"
+									:color="cardActionColor(action)"
+									:class="cardActionClass(action)"
+									:disabled="action.disabled"
+									@click.stop="action.onClick"
+								>
+									<component :is="action.icon" :class="action.iconClass" />
+									{{ action.label }}
+								</Button>
+							</template>
 						</div>
 					</template>
 				</ProjectCard>
@@ -315,22 +352,35 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 				>
 					<template v-if="ctx.getCardActions?.(result, ctx.projectType.value)?.length" #actions>
 						<div class="flex gap-2">
-							<ButtonStyled
+							<template
 								v-for="action in ctx.getCardActions(result, ctx.projectType.value)"
 								:key="action.key"
-								:color="action.color"
-								:type="action.type"
-								:circular="action.circular"
 							>
-								<button
+								<IconButton
+									v-if="action.circular"
 									v-tooltip="action.tooltip"
+									:type="cardActionType(action)"
+									:color="cardActionColor(action)"
+									:class="cardActionClass(action)"
+									:label="action.label || action.tooltip || action.key"
 									:disabled="action.disabled"
 									@click.stop="action.onClick"
 								>
 									<component :is="action.icon" :class="action.iconClass" />
-									<template v-if="!action.circular">{{ action.label }}</template>
-								</button>
-							</ButtonStyled>
+								</IconButton>
+								<Button
+									v-else
+									v-tooltip="action.tooltip"
+									:type="cardActionType(action)"
+									:color="cardActionColor(action)"
+									:class="cardActionClass(action)"
+									:disabled="action.disabled"
+									@click.stop="action.onClick"
+								>
+									<component :is="action.icon" :class="action.iconClass" />
+									{{ action.label }}
+								</Button>
+							</template>
 						</div>
 					</template>
 				</ProjectCard>
diff --git a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
index 29a78996ed..399d3153b2 100644
--- a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
@@ -2,7 +2,7 @@
 import { InfoIcon, XIcon } from '@modrinth/assets'
 import { computed, toValue } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { IconButton } from '#ui/components/base/buttons'
 import Toggle from '#ui/components/base/Toggle.vue'
 import SearchSidebarFilter from '#ui/components/search/SearchSidebarFilter.vue'
 import { useVIntl } from '#ui/composables/i18n'
@@ -103,11 +103,9 @@ function getFilterOpenByDefault(filterId: string): boolean {
 			class="sticky top-0 z-10 mx-1 flex items-center justify-between gap-3 border-0 border-b-[1px] border-solid border-divider bg-bg-raised px-6 py-4"
 		>
 			<h3 class="m-0 text-lg text-contrast">{{ formatMessage(commonMessages.filtersLabel) }}</h3>
-			<ButtonStyled circular>
-				<button @click="closeFiltersMenu">
-					<XIcon />
-				</button>
-			</ButtonStyled>
+			<IconButton label="Close" @click="closeFiltersMenu">
+				<XIcon />
+			</IconButton>
 		</div>
 
 		<div
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
index a720d5fb54..10671ffed7 100644
--- a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
@@ -1,43 +1,43 @@
 <template>
 	<div class="flex items-center gap-1">
-		<ButtonStyled v-if="showClear && hasLogs" type="transparent">
-			<button
-				v-tooltip="clearDisabled ? clearDisabledTooltip : undefined"
-				:disabled="clearDisabled"
-				@click="emit('clear')"
-			>
-				<XIcon />
-				Clear
-			</button>
-		</ButtonStyled>
-		<ButtonStyled v-if="showDelete" type="transparent" hover-color-fill="background" color="red">
-			<button
-				v-tooltip="deleteDisabled ? deleteDisabledTooltip : undefined"
-				:disabled="deleteDisabled"
-				@click="emit('delete')"
-			>
-				<TrashIcon />
-				Delete
-			</button>
-		</ButtonStyled>
-		<ButtonStyled v-if="hasLogs" type="transparent">
-			<button
-				v-tooltip="shareDisabled ? shareDisabledTooltip : undefined"
-				:disabled="shareDisabled || sharing"
-				@click="emit('share')"
-			>
-				<SpinnerIcon v-if="sharing" class="animate-spin" />
-				<ShareIcon v-else />
-				Share
-			</button>
-		</ButtonStyled>
-		<ButtonStyled type="transparent">
-			<button @click="emit('toggle-fullscreen')">
-				<ContractIcon v-if="fullscreen" />
-				<ExpandIcon v-else />
-				{{ fullscreen ? 'Collapse' : 'Expand' }}
-			</button>
-		</ButtonStyled>
+		<Button
+			v-if="showClear && hasLogs"
+			v-tooltip="clearDisabled ? clearDisabledTooltip : undefined"
+			type="quiet"
+			:disabled="clearDisabled"
+			@click="emit('clear')"
+		>
+			<XIcon />
+			Clear
+		</Button>
+		<Button
+			v-if="showDelete"
+			v-tooltip="deleteDisabled ? deleteDisabledTooltip : undefined"
+			type="quiet"
+			color="red"
+			:disabled="deleteDisabled"
+			class="hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+			@click="emit('delete')"
+		>
+			<TrashIcon />
+			Delete
+		</Button>
+		<Button
+			v-if="hasLogs"
+			v-tooltip="shareDisabled ? shareDisabledTooltip : undefined"
+			type="quiet"
+			:disabled="shareDisabled || sharing"
+			@click="emit('share')"
+		>
+			<SpinnerIcon v-if="sharing" class="animate-spin" />
+			<ShareIcon v-else />
+			Share
+		</Button>
+		<Button type="quiet" @click="emit('toggle-fullscreen')">
+			<ContractIcon v-if="fullscreen" />
+			<ExpandIcon v-else />
+			{{ fullscreen ? 'Collapse' : 'Expand' }}
+		</Button>
 	</div>
 </template>
 
@@ -51,7 +51,7 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 
 defineProps<{
 	showClear?: boolean
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 038f596fd4..a38881d351 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -27,6 +27,7 @@
 				<Combobox
 					:model-value="ctx.activeLogSourceIndex.value"
 					:options="logSourceOptions"
+					trigger-size="lg"
 					@update:model-value="(v) => (ctx.activeLogSourceIndex!.value = v)"
 				/>
 			</div>
@@ -79,18 +80,14 @@
 		</div>
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="deleteModal?.hide()">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="isDeleting" @click="confirmDelete">
-						<TrashIcon />
-						Delete
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="deleteModal?.hide()">
+					<XIcon />
+					Cancel
+				</Button>
+				<Button type="colored" color="red" :disabled="isDeleting" @click="confirmDelete">
+					<TrashIcon />
+					Delete
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -103,7 +100,7 @@ import { computed, isRef, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import BaseTerminal from '#ui/components/base/BaseTerminal.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import type { CollapsibleAdmonitionItem } from '#ui/components/base/CollapsibleAdmonition.vue'
 import CollapsibleAdmonition from '#ui/components/base/CollapsibleAdmonition.vue'
 import Combobox from '#ui/components/base/Combobox.vue'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
index 930615c2f5..1070c4fc84 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
@@ -15,10 +15,9 @@ import type { RouteLocationRaw } from 'vue-router'
 import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
 import BulletDivider from '#ui/components/base/BulletDivider.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import { IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
-import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
-import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import Toggle from '#ui/components/base/Toggle.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -313,43 +312,44 @@ const deleteHovered = ref(false)
 				v-if="hasUpdateListener || hasSwitchVersionListener"
 				class="flex w-8 items-center justify-center"
 			>
-				<ButtonStyled
+				<IconButton
 					v-if="hasUpdate"
-					circular
-					type="transparent"
+					v-tooltip="
+						isDisabled && disabledTooltip
+							? disabledTooltip
+							: formatMessage(commonMessages.updateAvailableLabel)
+					"
+					type="quiet"
 					color="green"
-					color-fill="text"
-					hover-color-fill="background"
+					:label="
+						isDisabled && disabledTooltip
+							? disabledTooltip
+							: formatMessage(commonMessages.updateAvailableLabel)
+					"
+					:disabled="isDisabled"
+					class="hover:!bg-green focus-visible:!bg-green hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+					@click="emit('update')"
 				>
-					<button
-						v-tooltip="
-							isDisabled && disabledTooltip
-								? disabledTooltip
-								: formatMessage(commonMessages.updateAvailableLabel)
-						"
-						:disabled="isDisabled"
-						@click="emit('update')"
-					>
-						<DownloadIcon class="size-5" />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled
+					<DownloadIcon class="size-5" />
+				</IconButton>
+				<IconButton
 					v-else-if="hasSwitchVersionListener && version && !hideSwitchVersion"
-					circular
-					type="transparent"
+					v-tooltip="
+						isDisabled && disabledTooltip
+							? disabledTooltip
+							: formatMessage(commonMessages.switchVersionButton)
+					"
+					type="quiet"
+					:label="
+						isDisabled && disabledTooltip
+							? disabledTooltip
+							: formatMessage(commonMessages.switchVersionButton)
+					"
+					:disabled="isDisabled"
+					@click="emit('switchVersion')"
 				>
-					<button
-						v-tooltip="
-							isDisabled && disabledTooltip
-								? disabledTooltip
-								: formatMessage(commonMessages.switchVersionButton)
-						"
-						:disabled="isDisabled"
-						@click="emit('switchVersion')"
-					>
-						<ArrowLeftRightIcon class="size-5" />
-					</button>
-				</ButtonStyled>
+					<ArrowLeftRightIcon class="size-5" />
+				</IconButton>
 			</div>
 
 			<Toggle
@@ -366,46 +366,55 @@ const deleteHovered = ref(false)
 				@update:model-value="(val) => emit('update:enabled', val as boolean)"
 			/>
 
-			<ButtonStyled v-if="hasDeleteListener && !props.hideDelete" circular type="transparent">
-				<button
-					v-tooltip="
-						isDisabled && disabledTooltip
-							? disabledTooltip
-							: formatMessage(
-									shiftHeld && deleteHovered
-										? commonMessages.deleteImmediatelyLabel
-										: commonMessages.deleteLabel,
-								)
-					"
-					:disabled="isDisabled"
-					@click="emit('delete', $event)"
-					@mouseenter="deleteHovered = true"
-					@mouseleave="deleteHovered = false"
-				>
-					<span class="relative size-5">
-						<TrashIcon
-							class="absolute inset-0 size-5 text-secondary transition-opacity duration-200"
-							:class="shiftHeld && deleteHovered ? 'opacity-0' : 'opacity-100'"
-						/>
-						<TrashExclamationIcon
-							class="absolute inset-0 size-5 text-red transition-opacity duration-200"
-							:class="shiftHeld && deleteHovered ? 'opacity-100' : 'opacity-0'"
-						/>
-					</span>
-				</button>
-			</ButtonStyled>
+			<IconButton
+				v-if="hasDeleteListener && !props.hideDelete"
+				v-tooltip="
+					isDisabled && disabledTooltip
+						? disabledTooltip
+						: formatMessage(
+								shiftHeld && deleteHovered
+									? commonMessages.deleteImmediatelyLabel
+									: commonMessages.deleteLabel,
+							)
+				"
+				type="quiet"
+				:label="
+					isDisabled && disabledTooltip
+						? disabledTooltip
+						: formatMessage(
+								shiftHeld && deleteHovered
+									? commonMessages.deleteImmediatelyLabel
+									: commonMessages.deleteLabel,
+							)
+				"
+				:disabled="isDisabled"
+				@click="emit('delete', $event)"
+				@mouseenter="deleteHovered = true"
+				@mouseleave="deleteHovered = false"
+			>
+				<span class="relative size-5">
+					<TrashIcon
+						class="absolute inset-0 size-5 text-secondary transition-opacity duration-200"
+						:class="shiftHeld && deleteHovered ? 'opacity-0' : 'opacity-100'"
+					/>
+					<TrashExclamationIcon
+						class="absolute inset-0 size-5 text-red transition-opacity duration-200"
+						:class="shiftHeld && deleteHovered ? 'opacity-100' : 'opacity-0'"
+					/>
+				</span>
+			</IconButton>
 
 			<slot name="additionalButtonsRight" />
 
-			<ButtonStyled circular type="transparent">
-				<TeleportOverflowMenu
-					v-if="overflowOptions?.length"
-					:options="overflowOptions"
-					:disabled="isDisabled"
-				>
-					<MoreVerticalIcon class="size-5" />
-				</TeleportOverflowMenu>
-			</ButtonStyled>
+			<TeleportOverflowMenu
+				v-if="overflowOptions?.length"
+				type="quiet"
+				label="More options"
+				:options="overflowOptions"
+				:disabled="isDisabled"
+			>
+				<MoreVerticalIcon class="size-5" />
+			</TeleportOverflowMenu>
 		</div>
 	</div>
 </template>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
index e6898f8eae..fa36c4de7f 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
@@ -14,12 +14,13 @@ import type { RouteLocationRaw } from 'vue-router'
 import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
 import BulletDivider from '#ui/components/base/BulletDivider.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import OverflowMenu, {
-	type Option as OverflowMenuOption,
-} from '#ui/components/base/OverflowMenu.vue'
+import {
+	Button,
+	IconButton,
+	type OverflowMenuOption,
+	TeleportOverflowMenu,
+} from '#ui/components/base/buttons'
 import TagTagItem from '#ui/components/base/TagTagItem.vue'
-import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import { useRelativeTime } from '#ui/composables/how-ago'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -83,21 +84,19 @@ const formatCompact = (n: number | undefined) => {
 	return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 }).format(n)
 }
 
-const collapsedOptions = computed(() => {
-	const options: {
-		id: string
-		action: () => void
-		color?: 'standard' | 'red' | 'brand' | 'orange' | 'green' | 'blue' | 'purple'
-	}[] = []
+const collapsedOptions = computed<OverflowMenuOption[]>(() => {
+	const options: OverflowMenuOption[] = []
 	if (hasContentListener.value) {
 		options.push({
 			id: 'content',
+			label: formatMessage(commonMessages.contentLabel),
 			action: () => emit('content'),
 		})
 	}
 	if (hasSettingsListener.value) {
 		options.push({
 			id: 'settings',
+			label: formatMessage(messages.installationSettingsTooltip),
 			action: () => emit('settings'),
 		})
 	}
@@ -205,70 +204,72 @@ onUnmounted(() => {
 				<template v-else>
 					<!-- Expanded actions visible at >= 700px -->
 					<div class="hidden @[700px]:flex items-center gap-2">
-						<ButtonStyled
+						<Button
 							v-if="hasUpdateListener && hasUpdate"
-							type="transparent"
+							type="quiet"
 							color="green"
-							color-fill="text"
+							class="flex items-center gap-2"
+							@click="emit('update')"
 						>
-							<button class="flex items-center gap-2" @click="emit('update')">
-								<DownloadIcon class="!text-green" />
-								<span class="font-semibold">{{ formatMessage(commonMessages.updateButton) }}</span>
-							</button>
-						</ButtonStyled>
+							<DownloadIcon class="!text-green" />
+							<span class="font-semibold">{{ formatMessage(commonMessages.updateButton) }}</span>
+						</Button>
 
-						<ButtonStyled v-if="hasContentListener">
-							<button class="!shadow-none" @click="emit('content')">
-								<BoxesIcon />
-								{{ formatMessage(commonMessages.contentLabel) }}
-							</button>
-						</ButtonStyled>
+						<Button v-if="hasContentListener" type="base" @click="emit('content')">
+							<BoxesIcon />
+							{{ formatMessage(commonMessages.contentLabel) }}
+						</Button>
 
-						<ButtonStyled v-if="hasSettingsListener" type="outlined" circular>
-							<button
-								v-tooltip="formatMessage(messages.installationSettingsTooltip)"
-								@click="emit('settings')"
-							>
-								<Settings2Icon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-if="hasSettingsListener"
+							v-tooltip="formatMessage(messages.installationSettingsTooltip)"
+							type="outlined"
+							:label="formatMessage(messages.installationSettingsTooltip)"
+							@click="emit('settings')"
+						>
+							<Settings2Icon />
+						</IconButton>
 					</div>
 
 					<!-- Collapsed actions visible at < 700px -->
 					<div v-if="hasUpdate && hasUpdateListener" class="flex @[700px]:hidden">
-						<ButtonStyled circular type="transparent" color="green" color-fill="text">
-							<button
-								v-tooltip="formatMessage(commonMessages.updateButton)"
-								@click="emit('update')"
-							>
-								<DownloadIcon class="size-5" />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(commonMessages.updateButton)"
+							type="quiet"
+							color="green"
+							:label="formatMessage(commonMessages.updateButton)"
+							@click="emit('update')"
+						>
+							<DownloadIcon class="size-5" />
+						</IconButton>
 					</div>
-					<ButtonStyled v-if="collapsedOptions.length" circular type="outlined">
-						<TeleportOverflowMenu :options="collapsedOptions" class="flex @[700px]:hidden">
-							<MoreVerticalIcon class="size-5" />
-							<template #content>
-								<BoxesIcon class="size-5" />
-								{{ formatMessage(commonMessages.contentLabel) }}
-							</template>
-							<template #settings>
-								<Settings2Icon class="size-5" />
-								{{ formatMessage(messages.installationSettingsTooltip) }}
-							</template>
-						</TeleportOverflowMenu>
-					</ButtonStyled>
-
-					<ButtonStyled
-						v-if="overflowOptions?.length"
-						circular
-						type="transparent"
-						class="hidden @[700px]:flex"
+					<TeleportOverflowMenu
+						v-if="collapsedOptions.length"
+						type="outlined"
+						label="More options"
+						:options="collapsedOptions"
+						class="flex @[700px]:hidden"
 					>
-						<OverflowMenu :options="overflowOptions">
-							<MoreVerticalIcon class="size-5" />
-						</OverflowMenu>
-					</ButtonStyled>
+						<MoreVerticalIcon class="size-5" />
+						<template #content>
+							<BoxesIcon class="size-5" />
+							{{ formatMessage(commonMessages.contentLabel) }}
+						</template>
+						<template #settings>
+							<Settings2Icon class="size-5" />
+							{{ formatMessage(messages.installationSettingsTooltip) }}
+						</template>
+					</TeleportOverflowMenu>
+
+					<TeleportOverflowMenu
+						v-if="overflowOptions?.length"
+						type="quiet"
+						label="More options"
+						class="hidden @[700px]:flex"
+						:options="overflowOptions"
+					>
+						<MoreVerticalIcon class="size-5" />
+					</TeleportOverflowMenu>
 				</template>
 			</div>
 		</div>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue
index d2693db24b..312ec5ec2c 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentSelectionBar.vue
@@ -3,7 +3,7 @@ import { PowerIcon, PowerOffIcon, XIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
@@ -218,55 +218,54 @@ const bulkProgressMessage = computed(() => {
 				{{ selectedCountText }}
 			</span>
 			<div class="mx-0.5 h-6 w-px bg-surface-5" />
-			<ButtonStyled type="transparent">
-				<button
-					v-tooltip="formatMessage(commonMessages.clearButton)"
-					class="!text-primary"
-					:disabled="isBulkOperating"
-					:class="{ 'opacity-60 pointer-events-none': isBulkOperating }"
-					@click="emit('clear')"
-				>
-					<XIcon class="hidden cq-show-icon" />
-					<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
-				</button>
-			</ButtonStyled>
+			<Button
+				v-tooltip="formatMessage(commonMessages.clearButton)"
+				type="quiet"
+				class="!text-primary"
+				:disabled="isBulkOperating"
+				:class="{ 'opacity-60 pointer-events-none': isBulkOperating }"
+				@click="emit('clear')"
+			>
+				<XIcon class="hidden cq-show-icon" />
+				<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
+			</Button>
 		</div>
 
 		<div v-if="!isBulkOperating" class="ml-auto flex items-center gap-0.5">
 			<slot name="actions" />
 
-			<ButtonStyled v-if="hasToggleActions" type="transparent">
-				<button
-					v-tooltip="
-						isBusy && busyTooltip
-							? busyTooltip
-							: allEnabled
-								? formatMessage(messages.allAlreadyEnabled)
-								: formatMessage(commonMessages.enableButton)
-					"
-					:disabled="isBusy || allEnabled"
-					@click="emit('enable')"
-				>
-					<PowerIcon />
-					<span class="bar-label">{{ formatMessage(commonMessages.enableButton) }}</span>
-				</button>
-			</ButtonStyled>
-			<ButtonStyled v-if="hasToggleActions" type="transparent">
-				<button
-					v-tooltip="
-						isBusy && busyTooltip
-							? busyTooltip
-							: allDisabled
-								? formatMessage(messages.allAlreadyDisabled)
-								: formatMessage(commonMessages.disableButton)
-					"
-					:disabled="isBusy || allDisabled"
-					@click="emit('disable')"
-				>
-					<PowerOffIcon />
-					<span class="bar-label">{{ formatMessage(commonMessages.disableButton) }}</span>
-				</button>
-			</ButtonStyled>
+			<Button
+				v-if="hasToggleActions"
+				v-tooltip="
+					isBusy && busyTooltip
+						? busyTooltip
+						: allEnabled
+							? formatMessage(messages.allAlreadyEnabled)
+							: formatMessage(commonMessages.enableButton)
+				"
+				type="quiet"
+				:disabled="isBusy || allEnabled"
+				@click="emit('enable')"
+			>
+				<PowerIcon />
+				<span class="bar-label">{{ formatMessage(commonMessages.enableButton) }}</span>
+			</Button>
+			<Button
+				v-if="hasToggleActions"
+				v-tooltip="
+					isBusy && busyTooltip
+						? busyTooltip
+						: allDisabled
+							? formatMessage(messages.allAlreadyDisabled)
+							: formatMessage(commonMessages.disableButton)
+				"
+				type="quiet"
+				:disabled="isBusy || allDisabled"
+				@click="emit('disable')"
+			>
+				<PowerOffIcon />
+				<span class="bar-label">{{ formatMessage(commonMessages.disableButton) }}</span>
+			</Button>
 
 			<slot name="actions-end" />
 		</div>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
index 92c2863ff7..920d867b8f 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
@@ -22,22 +22,20 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button
-						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
-						:disabled="buttonsDisabled || props.actionDisabled"
-						@click="confirm"
-					>
-						<DownloadIcon />
-						{{ formatMessage(messages.updateButton, { count: visibleCount }) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+					type="colored"
+					color="orange"
+					:disabled="buttonsDisabled || props.actionDisabled"
+					@click="confirm"
+				>
+					<DownloadIcon />
+					{{ formatMessage(messages.updateButton, { count: visibleCount }) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -48,7 +46,7 @@ import { DownloadIcon, XIcon } from '@modrinth/assets'
 import { nextTick, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
index 77317e4c8c..042caff48c 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
@@ -23,22 +23,20 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button
-						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
-						:disabled="buttonsDisabled || props.actionDisabled"
-						@click="confirm"
-					>
-						<TrashIcon />
-						{{ deleteButtonLabel }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+					type="colored"
+					color="orange"
+					:disabled="buttonsDisabled || props.actionDisabled"
+					@click="confirm"
+				>
+					<TrashIcon />
+					{{ deleteButtonLabel }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -49,7 +47,7 @@ import { TrashIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue
index dc1d76df7c..5a39f0d595 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue
@@ -17,22 +17,20 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button
-						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
-						:disabled="props.actionDisabled"
-						@click="confirm"
-					>
-						<SlashIcon />
-						{{ visibleWarning?.actionLabel }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+					type="colored"
+					color="orange"
+					:disabled="props.actionDisabled"
+					@click="confirm"
+				>
+					<SlashIcon />
+					{{ visibleWarning?.actionLabel }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -43,7 +41,7 @@ import { SlashIcon, XIcon } from '@modrinth/assets'
 import { nextTick, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
index a0ab73badf..889045bf0c 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
@@ -31,24 +31,22 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button
-						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
-						:disabled="buttonsDisabled || props.actionDisabled"
-						@click="handleConfirm"
-					>
-						<DownloadIcon />
-						{{
-							formatMessage(messages.confirmButton, { action: downgrade ? 'downgrade' : 'update' })
-						}}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+					type="colored"
+					color="orange"
+					:disabled="buttonsDisabled || props.actionDisabled"
+					@click="handleConfirm"
+				>
+					<DownloadIcon />
+					{{
+						formatMessage(messages.confirmButton, { action: downgrade ? 'downgrade' : 'update' })
+					}}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -59,7 +57,7 @@ import { DownloadIcon, XIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
index d8946e3a5e..f51258d046 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
@@ -19,18 +19,14 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="buttonsDisabled" @click="confirm">
-						<DownloadIcon />
-						{{ formatMessage(messages.reinstallButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" :disabled="buttonsDisabled" @click="confirm">
+					<DownloadIcon />
+					{{ formatMessage(messages.reinstallButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -41,7 +37,7 @@ import { DownloadIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
index a9dedf3c30..ed26509ec8 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
@@ -14,18 +14,14 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="green">
-					<button @click="confirm">
-						<HammerIcon />
-						{{ formatMessage(messages.repairButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="green" @click="confirm">
+					<HammerIcon />
+					{{ formatMessage(messages.repairButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -35,7 +31,7 @@
 import { HammerIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
index 9497d880cc..331e9d95dd 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
@@ -19,22 +19,20 @@
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button
-						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
-						:disabled="buttonsDisabled || props.actionDisabled"
-						@click="confirm"
-					>
-						<UnlinkIcon />
-						{{ formatMessage(actionMessage) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+					type="colored"
+					color="orange"
+					:disabled="buttonsDisabled || props.actionDisabled"
+					@click="confirm"
+				>
+					<UnlinkIcon />
+					{{ formatMessage(actionMessage) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -45,7 +43,7 @@ import { UnlinkIcon, XIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue
index eccfc87e16..9d1d50f10a 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue
@@ -168,22 +168,20 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-5" @click="hide">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button
-						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
-						:disabled="buttonsDisabled || props.actionDisabled"
-						@click="confirm"
-					>
-						<TrashIcon aria-hidden="true" />
-						{{ deleteButtonLabel }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" class="!border !border-surface-5" @click="hide">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+					type="colored"
+					color="red"
+					:disabled="buttonsDisabled || props.actionDisabled"
+					@click="confirm"
+				>
+					<TrashIcon aria-hidden="true" />
+					{{ deleteButtonLabel }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -194,7 +192,7 @@ import { TrashIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index b8df546ea5..96f1bb2d52 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -73,15 +73,15 @@
 					:placeholder="formatMessage(messages.searchPlaceholder)"
 					class="flex-1"
 				/>
-				<ButtonStyled type="outlined" circular>
-					<button
-						v-tooltip="`${hideUninstallable ? 'Show' : 'Hide'} unavailable`"
-						@click="hideUninstallable = !hideUninstallable"
-					>
-						<EyeOffIcon v-if="hideUninstallable" />
-						<EyeIcon v-else />
-					</button>
-				</ButtonStyled>
+				<IconButton
+					v-tooltip="`${hideUninstallable ? 'Show' : 'Hide'} unavailable`"
+					type="outlined"
+					:label="`${hideUninstallable ? 'Show' : 'Hide'} unavailable`"
+					@click="hideUninstallable = !hideUninstallable"
+				>
+					<EyeOffIcon v-if="hideUninstallable" />
+					<EyeIcon v-else />
+				</IconButton>
 			</div>
 
 			<div v-if="loading" class="flex items-center justify-center py-12">
@@ -110,30 +110,29 @@
 							inst.name
 						}}</span>
 					</button>
-					<ButtonStyled v-if="inst.installed">
-						<button disabled>
-							<CheckIcon />
-							{{ formatMessage(messages.installedBadge) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled
+					<Button v-if="inst.installed" disabled>
+						<CheckIcon />
+						{{ formatMessage(messages.installedBadge) }}
+					</Button>
+					<Button
 						v-else
-						:type="inst.compatible ? 'standard' : 'outlined'"
-						:color="inst.compatible ? 'standard' : 'orange'"
+						v-tooltip="!inst.compatible ? formatMessage(messages.incompatibleTooltip) : undefined"
+						:type="inst.compatible ? 'base' : 'outlined'"
+						:class="
+							inst.compatible
+								? undefined
+								: '!text-orange [&>svg]:!text-orange !shadow-[inset_0_0_0_1px_var(--color-orange)]'
+						"
+						:disabled="inst.installing"
+						@click="emit('install', inst)"
 					>
-						<button
-							v-tooltip="!inst.compatible ? formatMessage(messages.incompatibleTooltip) : undefined"
-							:disabled="inst.installing"
-							@click="emit('install', inst)"
-						>
-							<TriangleAlertIcon v-if="!inst.compatible" />
-							{{
-								inst.installing
-									? formatMessage(commonMessages.installingLabel)
-									: formatMessage(messages.installButton)
-							}}
-						</button>
-					</ButtonStyled>
+						<TriangleAlertIcon v-if="!inst.compatible" />
+						{{
+							inst.installing
+								? formatMessage(commonMessages.installingLabel)
+								: formatMessage(messages.installButton)
+						}}
+					</Button>
 				</div>
 			</div>
 		</div>
@@ -143,18 +142,14 @@
 			<div class="flex items-center gap-4">
 				<Avatar :src="iconPreviewUrl ?? undefined" size="5rem" rounded="2xl" />
 				<div class="flex flex-col gap-2">
-					<ButtonStyled type="outlined">
-						<button @click="selectIcon">
-							<UploadIcon />
-							{{ formatMessage(messages.selectIcon) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled type="outlined">
-						<button :disabled="!iconPreviewUrl" @click="removeIcon">
-							<XIcon />
-							{{ formatMessage(messages.removeIcon) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" @click="selectIcon">
+						<UploadIcon />
+						{{ formatMessage(messages.selectIcon) }}
+					</Button>
+					<Button type="outlined" :disabled="!iconPreviewUrl" @click="removeIcon">
+						<XIcon />
+						{{ formatMessage(messages.removeIcon) }}
+					</Button>
 				</div>
 			</div>
 
@@ -218,27 +213,26 @@
 						{{ formatMessage(messages.compatibleCount, { count: compatibleCount }) }}
 					</span>
 				</div>
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
 			</div>
 
 			<div v-else class="flex items-center justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="modal?.hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!instanceName" @click="handleCreateAndInstall">
-						<DownloadIcon />
-						{{ formatMessage(messages.installButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="modal?.hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="!instanceName"
+					@click="handleCreateAndInstall"
+				>
+					<DownloadIcon />
+					{{ formatMessage(messages.installButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -260,7 +254,7 @@ import { computed, ref, watch } from 'vue'
 
 import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button, IconButton } from '#ui/components/base/buttons'
 import Chips from '#ui/components/base/Chips.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
index f2cb95231f..313d8c8299 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/InlineBackupCreator.vue
@@ -10,26 +10,24 @@
 
 		<div v-if="backup.available" class="flex items-center gap-2">
 			<!-- Button / Loading state -->
-			<ButtonStyled v-if="!backup.backupComplete.value && !backup.backupFailed.value">
-				<button
-					v-tooltip="
-						!canManageBackups
-							? permissionDeniedMessage
-							: backup.externalBackupInProgress.value
-								? formatMessage(messages.backupInProgress)
-								: undefined
-					"
-					class="!shadow-none"
-					:disabled="
-						!canManageBackups || backup.isBackingUp.value || backup.externalBackupInProgress.value
-					"
-					@click="startBackup"
-				>
-					<SpinnerIcon v-if="backup.isBackingUp.value" class="size-5 animate-spin" />
-					<PlusIcon v-else class="size-5" />
-					{{ formatMessage(backup.isBackingUp.value ? messages.backingUp : messages.createBackup) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				v-if="!backup.backupComplete.value && !backup.backupFailed.value"
+				v-tooltip="
+					!canManageBackups
+						? permissionDeniedMessage
+						: backup.externalBackupInProgress.value
+							? formatMessage(messages.backupInProgress)
+							: undefined
+				"
+				:disabled="
+					!canManageBackups || backup.isBackingUp.value || backup.externalBackupInProgress.value
+				"
+				@click="startBackup"
+			>
+				<SpinnerIcon v-if="backup.isBackingUp.value" class="size-5 animate-spin" />
+				<PlusIcon v-else class="size-5" />
+				{{ formatMessage(backup.isBackingUp.value ? messages.backingUp : messages.createBackup) }}
+			</Button>
 
 			<!-- Success -->
 			<div
@@ -61,7 +59,7 @@
 import { CheckCircleIcon, PlusIcon, SpinnerIcon, TriangleAlertIcon } from '@modrinth/assets'
 import { computed, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { hasServerPermission } from '#ui/composables/server-permissions'
 import { injectModrinthServerContext } from '#ui/providers'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
index f7107f9c53..cad04ab463 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
@@ -14,9 +14,9 @@ import { computed, nextTick, ref, watchSyncEffect } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
 import BulletDivider from '#ui/components/base/BulletDivider.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import type { OverflowMenuOption } from '#ui/components/base/buttons'
+import { ButtonLink } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
-import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -290,7 +290,8 @@ const tableItems = computed<ContentCardTableItem[]>(() =>
 			...(props.switchVersion
 				? [
 						{
-							id: formatMessage(commonMessages.switchVersionButton),
+							id: 'switch-version',
+							label: formatMessage(commonMessages.switchVersionButton),
 							icon: ArrowLeftRightIcon,
 							action: () => props.switchVersion!(item),
 						},
@@ -611,17 +612,18 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 								</span>
 							</template>
 							<template #itemButtonsRight="{ item }">
-								<ButtonStyled v-if="externalSlicerUrls[item.id]" circular type="transparent">
-									<a
-										v-tooltip="formatMessage(messages.openInSlicer)"
-										:aria-label="formatMessage(messages.openInSlicer)"
-										:href="externalSlicerUrls[item.id]"
-										target="_blank"
-										rel="noopener noreferrer"
-									>
-										<ExternalIcon class="size-4" />
-									</a>
-								</ButtonStyled>
+								<ButtonLink
+									v-if="externalSlicerUrls[item.id]"
+									v-tooltip="formatMessage(messages.openInSlicer)"
+									type="quiet"
+									:aria-label="formatMessage(messages.openInSlicer)"
+									:href="externalSlicerUrls[item.id]"
+									target="_blank"
+									rel="noopener noreferrer"
+									class="!w-9 !px-0 !rounded-full"
+								>
+									<ExternalIcon class="size-4" />
+								</ButtonLink>
 							</template>
 						</ContentCardTable>
 					</div>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
index f7002f6ea4..cee3fb48a2 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
@@ -95,25 +95,24 @@
 					class="absolute bottom-0 left-0 right-0 pointer-events-none flex flex-col items-center justify-end bg-gradient-to-b from-transparent to-bg-raised to-70% pb-3 h-24"
 				>
 					<div class="pointer-events-auto">
-						<ButtonStyled type="transparent" :circular="true">
-							<button
-								class="flex items-center gap-1.5"
-								:aria-label="
-									hideIncompatibleState
-										? formatMessage(messages.showIncompatible)
-										: formatMessage(messages.hideIncompatible)
-								"
-								@click="hideIncompatibleState = !hideIncompatibleState"
-							>
-								<EyeIcon v-if="hideIncompatibleState" class="h-6 w-6" />
-								<EyeOffIcon v-else class="h-6 w-6" />
-								<span class="font-medium">{{
-									hideIncompatibleState
-										? formatMessage(messages.showIncompatible)
-										: formatMessage(messages.hideIncompatible)
-								}}</span>
-							</button>
-						</ButtonStyled>
+						<Button
+							type="quiet"
+							class="flex items-center gap-1.5"
+							:aria-label="
+								hideIncompatibleState
+									? formatMessage(messages.showIncompatible)
+									: formatMessage(messages.hideIncompatible)
+							"
+							@click="hideIncompatibleState = !hideIncompatibleState"
+						>
+							<EyeIcon v-if="hideIncompatibleState" class="h-6 w-6" />
+							<EyeOffIcon v-else class="h-6 w-6" />
+							<span class="font-medium">{{
+								hideIncompatibleState
+									? formatMessage(messages.showIncompatible)
+									: formatMessage(messages.hideIncompatible)
+							}}</span>
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -214,43 +213,41 @@
 				}}</span>
 			</div>
 			<div class="flex flex-row gap-2 shrink-0 ml-auto">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled :color="incompatibilityWarningMode ? 'orange' : 'brand'">
-					<button
-						v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
-						:disabled="
-							actionLoading ||
-							props.actionDisabled ||
-							!selectedVersion ||
-							(!incompatibilityWarningMode && selectedVersion.id === currentVersionId)
-						"
-						@click="handleUpdate"
-					>
-						<SpinnerIcon v-if="actionLoading" class="size-5 animate-spin" />
-						<DownloadIcon v-else />
-						{{
-							actionLoading
-								? formatMessage(commonMessages.installingLabel)
-								: incompatibilityWarningMode
-									? formatMessage(messages.installAnywayButton)
-									: formatMessage(
-											isDowngrade
-												? messages.downgradeToVersion
-												: switchMode
-													? messages.switchToVersion
-													: messages.updateToVersion,
-											{
-												version: selectedVersion?.version_number ?? '...',
-											},
-										)
-						}}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="props.actionDisabled ? props.actionDisabledTooltip : undefined"
+					type="colored"
+					:color="incompatibilityWarningMode ? 'orange' : 'brand'"
+					:disabled="
+						actionLoading ||
+						props.actionDisabled ||
+						!selectedVersion ||
+						(!incompatibilityWarningMode && selectedVersion.id === currentVersionId)
+					"
+					@click="handleUpdate"
+				>
+					<SpinnerIcon v-if="actionLoading" class="size-5 animate-spin" />
+					<DownloadIcon v-else />
+					{{
+						actionLoading
+							? formatMessage(commonMessages.installingLabel)
+							: incompatibilityWarningMode
+								? formatMessage(messages.installAnywayButton)
+								: formatMessage(
+										isDowngrade
+											? messages.downgradeToVersion
+											: switchMode
+												? messages.switchToVersion
+												: messages.updateToVersion,
+										{
+											version: selectedVersion?.version_number ?? '...',
+										},
+									)
+					}}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -294,7 +291,7 @@ import { useTimeoutFn } from '@vueuse/core'
 import { computed, ref, toRef } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index bdee7c24a8..5e7366cd24 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -20,9 +20,8 @@ import {
 } from '@modrinth/assets'
 import { computed, nextTick, ref, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import EmptyState from '#ui/components/base/EmptyState.vue'
-import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -763,9 +762,9 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 				<div class="universal-card flex flex-col items-center gap-4 p-6">
 					<h2 class="m-0 text-xl font-bold">{{ formatMessage(messages.failedToLoad) }}</h2>
 					<p class="text-secondary">{{ ctx.error.value.message }}</p>
-					<ButtonStyled color="brand">
-						<button @click="handleRefresh">{{ formatMessage(commonMessages.retryButton) }}</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" @click="handleRefresh">{{
+						formatMessage(commonMessages.retryButton)
+					}}</Button>
 				</div>
 			</div>
 
@@ -818,34 +817,33 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 							/>
 
 							<div class="flex gap-2">
-								<ButtonStyled type="outlined">
-									<button
-										v-tooltip="
-											ctx.busyMessage?.value ??
-											(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
-										"
-										:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-										class="!h-10"
-										@click="ctx.uploadFiles"
-									>
-										<FolderOpenIcon class="size-5" />
-										{{ formatMessage(messages.uploadFiles) }}
-									</button>
-								</ButtonStyled>
-								<ButtonStyled color="brand">
-									<button
-										v-tooltip="
-											ctx.busyMessage?.value ??
-											(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
-										"
-										:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-										class="!h-10 flex items-center gap-2"
-										@click="ctx.browse"
-									>
-										<CompassIcon class="size-5" />
-										<span>{{ formatMessage(messages.browseContent) }}</span>
-									</button>
-								</ButtonStyled>
+								<Button
+									v-tooltip="
+										ctx.busyMessage?.value ??
+										(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
+									"
+									type="outlined"
+									size="lg"
+									:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
+									@click="ctx.uploadFiles"
+								>
+									<FolderOpenIcon class="size-5" />
+									{{ formatMessage(messages.uploadFiles) }}
+								</Button>
+								<Button
+									v-tooltip="
+										ctx.busyMessage?.value ??
+										(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
+									"
+									type="colored"
+									color="brand"
+									size="lg"
+									:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
+									@click="ctx.browse"
+								>
+									<CompassIcon class="size-5" />
+									<span>{{ formatMessage(messages.browseContent) }}</span>
+								</Button>
 							</div>
 						</div>
 
@@ -879,66 +877,58 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 									{{ option.label }}
 								</button>
 								<div class="hidden @[900px]:block">
-									<ButtonStyled type="transparent">
-										<button
-											:aria-label="
-												formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
-											"
-											@click="cycleSortMode"
-										>
-											<ArrowUpZAIcon v-if="sortMode === 'alphabetical-desc'" /><ClockArrowDownIcon
-												v-else-if="sortMode === 'date-added-newest'"
-											/><ClockArrowUpIcon
-												v-else-if="sortMode === 'date-added-oldest'"
-											/><ArrowDownAZIcon v-else />
-											{{ sortLabels[sortMode]() }}
-										</button>
-									</ButtonStyled>
+									<Button
+										type="quiet"
+										:aria-label="
+											formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
+										"
+										@click="cycleSortMode"
+									>
+										<ArrowUpZAIcon v-if="sortMode === 'alphabetical-desc'" /><ClockArrowDownIcon
+											v-else-if="sortMode === 'date-added-newest'"
+										/><ClockArrowUpIcon
+											v-else-if="sortMode === 'date-added-oldest'"
+										/><ArrowDownAZIcon v-else />
+										{{ sortLabels[sortMode]() }}
+									</Button>
 								</div>
 							</div>
 
 							<div class="flex items-center gap-2">
 								<div class="@[900px]:hidden">
-									<ButtonStyled type="transparent">
-										<button
-											:aria-label="
-												formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
-											"
-											@click="cycleSortMode"
-										>
-											<ArrowUpZAIcon v-if="sortMode === 'alphabetical-desc'" /><ClockArrowDownIcon
-												v-else-if="sortMode === 'date-added-newest'"
-											/><ClockArrowUpIcon
-												v-else-if="sortMode === 'date-added-oldest'"
-											/><ArrowDownAZIcon v-else />
-											{{ sortLabels[sortMode]() }}
-										</button>
-									</ButtonStyled>
+									<Button
+										type="quiet"
+										:aria-label="
+											formatMessage(messages.sortByLabel, { mode: sortLabels[sortMode]() })
+										"
+										@click="cycleSortMode"
+									>
+										<ArrowUpZAIcon v-if="sortMode === 'alphabetical-desc'" /><ClockArrowDownIcon
+											v-else-if="sortMode === 'date-added-newest'"
+										/><ClockArrowUpIcon
+											v-else-if="sortMode === 'date-added-oldest'"
+										/><ArrowDownAZIcon v-else />
+										{{ sortLabels[sortMode]() }}
+									</Button>
 								</div>
 
-								<ButtonStyled
+								<Button
 									v-if="hasBulkUpdateSupport && hasOutdatedProjects"
+									v-tooltip="formatMessage(messages.updateAll)"
+									type="quiet"
 									color="green"
-									type="transparent"
-									color-fill="text"
-									hover-color-fill="background"
+									:disabled="isBulkOperating"
+									class="hover:!bg-green focus-visible:!bg-green hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+									@click="promptUpdateAll"
 								>
-									<button
-										v-tooltip="formatMessage(messages.updateAll)"
-										:disabled="isBulkOperating"
-										@click="promptUpdateAll"
-									>
-										<DownloadIcon />
-										{{ formatMessage(messages.updateAll) }}
-									</button>
-								</ButtonStyled>
+									<DownloadIcon />
+									{{ formatMessage(messages.updateAll) }}
+								</Button>
 
-								<ButtonStyled type="transparent">
-									<button :disabled="refreshing" @click="handleRefresh">
-										<RefreshCwIcon :class="refreshing ? 'animate-spin' : ''" />
-										{{ formatMessage(commonMessages.refreshButton) }}
-									</button>
-								</ButtonStyled>
+								<Button type="quiet" :disabled="refreshing" @click="handleRefresh">
+									<RefreshCwIcon :class="refreshing ? 'animate-spin' : ''" />
+									{{ formatMessage(commonMessages.refreshButton) }}
+								</Button>
 							</div>
 						</div>
 
@@ -981,34 +971,33 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 						}}
 					</template>
 					<template #actions>
-						<ButtonStyled type="outlined">
-							<button
-								v-tooltip="
-									ctx.busyMessage?.value ??
-									(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
-								"
-								:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-								class="!h-10"
-								@click="ctx.uploadFiles"
-							>
-								<FolderOpenIcon class="size-5" />
-								{{ formatMessage(messages.uploadFiles) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button
-								v-tooltip="
-									ctx.busyMessage?.value ??
-									(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
-								"
-								:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-								class="!h-10 flex items-center gap-2"
-								@click="ctx.browse"
-							>
-								<CompassIcon class="size-5" />
-								<span>{{ formatMessage(messages.browseContent) }}</span>
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="
+								ctx.busyMessage?.value ??
+								(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
+							"
+							type="outlined"
+							size="lg"
+							:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
+							@click="ctx.uploadFiles"
+						>
+							<FolderOpenIcon class="size-5" />
+							{{ formatMessage(messages.uploadFiles) }}
+						</Button>
+						<Button
+							v-tooltip="
+								ctx.busyMessage?.value ??
+								(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
+							"
+							type="colored"
+							color="brand"
+							size="lg"
+							:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
+							@click="ctx.browse"
+						>
+							<CompassIcon class="size-5" />
+							<span>{{ formatMessage(messages.browseContent) }}</span>
+						</Button>
 					</template>
 				</EmptyState>
 			</template>
@@ -1034,84 +1023,82 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 			@disable="bulkDisable"
 		>
 			<template #actions>
-				<ButtonStyled
+				<Button
 					v-if="hasBulkUpdateSupport && selectedItems.some((m) => m.has_update)"
-					type="transparent"
+					v-tooltip="formatMessage(commonMessages.updateButton)"
+					type="quiet"
 					color="green"
-					color-fill="text"
-					hover-color-fill="background"
+					class="hover:!bg-green focus-visible:!bg-green hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+					@click="promptUpdateSelected"
 				>
-					<button
-						v-tooltip="formatMessage(commonMessages.updateButton)"
-						@click="promptUpdateSelected"
-					>
-						<DownloadIcon />
-						<span class="bar-label">{{ formatMessage(commonMessages.updateButton) }}</span>
-					</button>
-				</ButtonStyled>
+					<DownloadIcon />
+					<span class="bar-label">{{ formatMessage(commonMessages.updateButton) }}</span>
+				</Button>
 
-				<ButtonStyled v-if="ctx.shareItems" type="transparent">
-					<OverflowMenu
-						:options="[
-							{
-								id: 'share-names',
-								action: () => ctx.shareItems!(selectedItems, 'names'),
-							},
-							{
-								id: 'share-file-names',
-								action: () => ctx.shareItems!(selectedItems, 'file-names'),
-							},
-							{
-								id: 'share-urls',
-								action: () => ctx.shareItems!(selectedItems, 'urls'),
-							},
-							{
-								id: 'share-markdown',
-								action: () => ctx.shareItems!(selectedItems, 'markdown'),
-							},
-						]"
-					>
-						<ShareIcon />
-						<span class="bar-label">{{ formatMessage(messages.share) }}</span>
-						<DropdownIcon />
-						<template #share-names>
-							<TextCursorInputIcon />
-							{{ formatMessage(messages.shareProjectNames) }}
-						</template>
-						<template #share-file-names>
-							<FileIcon />
-							{{ formatMessage(messages.shareFileNames) }}
-						</template>
-						<template #share-urls>
-							<LinkIcon />
-							{{ formatMessage(messages.shareProjectLinks) }}
-						</template>
-						<template #share-markdown>
-							<CodeIcon />
-							{{ formatMessage(messages.shareMarkdownLinks) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+				<TeleportOverflowMenu
+					v-if="ctx.shareItems"
+					type="quiet"
+					:label="formatMessage(commonMessages.moreOptionsButton)"
+					:options="[
+						{
+							id: 'share-names',
+							label: formatMessage(messages.shareProjectNames),
+							action: () => ctx.shareItems!(selectedItems, 'names'),
+						},
+						{
+							id: 'share-file-names',
+							label: formatMessage(messages.shareFileNames),
+							action: () => ctx.shareItems!(selectedItems, 'file-names'),
+						},
+						{
+							id: 'share-urls',
+							label: formatMessage(messages.shareProjectLinks),
+							action: () => ctx.shareItems!(selectedItems, 'urls'),
+						},
+						{
+							id: 'share-markdown',
+							label: formatMessage(messages.shareMarkdownLinks),
+							action: () => ctx.shareItems!(selectedItems, 'markdown'),
+						},
+					]"
+					class="!w-auto !px-2.5 !rounded-xl"
+				>
+					<ShareIcon />
+					<span class="bar-label">{{ formatMessage(messages.share) }}</span>
+					<DropdownIcon />
+					<template #share-names>
+						<TextCursorInputIcon />
+						{{ formatMessage(messages.shareProjectNames) }}
+					</template>
+					<template #share-file-names>
+						<FileIcon />
+						{{ formatMessage(messages.shareFileNames) }}
+					</template>
+					<template #share-urls>
+						<LinkIcon />
+						{{ formatMessage(messages.shareProjectLinks) }}
+					</template>
+					<template #share-markdown>
+						<CodeIcon />
+						{{ formatMessage(messages.shareMarkdownLinks) }}
+					</template>
+				</TeleportOverflowMenu>
 			</template>
 
 			<template #actions-end>
 				<div v-if="deletableSelectedItems.length > 0" class="mx-1 h-6 w-px bg-surface-5" />
 
-				<ButtonStyled
+				<Button
 					v-if="deletableSelectedItems.length > 0"
-					type="transparent"
+					v-tooltip="formatMessage(commonMessages.deleteLabel)"
+					type="quiet"
 					color="red"
-					color-fill="text"
-					hover-color-fill="background"
+					class="hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+					@click="showBulkDeleteModal"
 				>
-					<button
-						v-tooltip="formatMessage(commonMessages.deleteLabel)"
-						@click="showBulkDeleteModal"
-					>
-						<TrashIcon />
-						<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
-					</button>
-				</ButtonStyled>
+					<TrashIcon />
+					<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+				</Button>
 			</template>
 		</ContentSelectionBar>
 
diff --git a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
index 8b8a88d24e..33224d73a5 100644
--- a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
+++ b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
-import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
+import type { OverflowMenuOption } from '#ui/components/base/buttons'
 import { createContext } from '#ui/providers/create-context'
 
 import type {
diff --git a/packages/ui/src/layouts/shared/content-tab/types.ts b/packages/ui/src/layouts/shared/content-tab/types.ts
index b643787f58..6a208ce4a3 100644
--- a/packages/ui/src/layouts/shared/content-tab/types.ts
+++ b/packages/ui/src/layouts/shared/content-tab/types.ts
@@ -1,7 +1,7 @@
 import type { Labrinth } from '@modrinth/api-client'
 import type { RouteLocationRaw } from 'vue-router'
 
-import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
+import type { OverflowMenuOption } from '#ui/components/base/buttons'
 
 export type ContentCardProject = Pick<
 	Labrinth.Projects.v2.Project,
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
index cd8843d32a..6bc8da0469 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
@@ -17,57 +17,58 @@
 				tabindex="-1"
 				@mousedown.stop
 			>
-				<ButtonStyled type="transparent">
-					<button
-						class="w-full !justify-start !whitespace-nowrap"
-						role="menuitem"
-						@click="handleCopyFilename"
-					>
-						<ClipboardCopyIcon class="size-5" />
-						{{ formatMessage(commonMessages.copyFilenameButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled type="transparent">
-					<button
-						class="w-full !justify-start !whitespace-nowrap"
-						role="menuitem"
-						@click="handleCopyPath"
-					>
-						<ClipboardCopyIcon class="size-5" />
-						{{ formatMessage(commonMessages.copyFullPathButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-if="ctx.openInFolder" type="transparent">
-					<button
-						class="w-full !justify-start !whitespace-nowrap"
-						role="menuitem"
-						@click="handleOpenInFolder"
-					>
-						<FolderOpenIcon class="size-5" />
-						{{ formatMessage(commonMessages.openInFolderButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="quiet"
+					class="w-full !justify-start !whitespace-nowrap"
+					role="menuitem"
+					@click="handleCopyFilename"
+				>
+					<ClipboardCopyIcon class="size-5" />
+					{{ formatMessage(commonMessages.copyFilenameButton) }}
+				</Button>
+				<Button
+					type="quiet"
+					class="w-full !justify-start !whitespace-nowrap"
+					role="menuitem"
+					@click="handleCopyPath"
+				>
+					<ClipboardCopyIcon class="size-5" />
+					{{ formatMessage(commonMessages.copyFullPathButton) }}
+				</Button>
+				<Button
+					v-if="ctx.openInFolder"
+					type="quiet"
+					class="w-full !justify-start !whitespace-nowrap"
+					role="menuitem"
+					@click="handleOpenInFolder"
+				>
+					<FolderOpenIcon class="size-5" />
+					{{ formatMessage(commonMessages.openInFolderButton) }}
+				</Button>
 				<div class="h-px w-full bg-surface-5" />
 				<template v-for="(option, index) in menuOptions" :key="index">
 					<div
 						v-if="'divider' in option && option.divider && option.shown !== false"
 						class="h-px w-full bg-surface-5"
 					/>
-					<ButtonStyled
+					<Button
 						v-else-if="'id' in option && option.shown !== false"
-						type="transparent"
-						:color="option.color"
+						v-tooltip="option.tooltip"
+						type="quiet"
+						:color="
+							option.color && option.color !== 'standard'
+								? option.color === 'medal-promo'
+									? 'medal_promotion'
+									: option.color
+								: undefined
+						"
+						:disabled="option.disabled"
+						class="w-full !justify-start !whitespace-nowrap"
+						role="menuitem"
+						@click="handleOptionClick(option)"
 					>
-						<button
-							v-tooltip="option.tooltip"
-							:disabled="option.disabled"
-							class="w-full !justify-start !whitespace-nowrap"
-							role="menuitem"
-							@click="handleOptionClick(option)"
-						>
-							<slot :name="option.id" />
-						</button>
-					</ButtonStyled>
+						<slot :name="option.id" />
+					</Button>
 				</template>
 			</div>
 		</Transition>
@@ -78,7 +79,7 @@
 import { ClipboardCopyIcon, FolderOpenIcon } from '@modrinth/assets'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import { useVIntl } from '#ui/composables/i18n'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileManagerError.vue b/packages/ui/src/layouts/shared/files-tab/components/FileManagerError.vue
index 361a3b0818..56772b206a 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileManagerError.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileManagerError.vue
@@ -7,18 +7,14 @@
 				{{ message }}
 			</p>
 			<div class="flex gap-2">
-				<ButtonStyled>
-					<button size="sm" @click="$emit('refetch')">
-						<RefreshCwIcon class="h-5 w-5" />
-						{{ formatMessage(messages.tryAgain) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button size="sm" @click="$emit('home')">
-						<HomeIcon class="h-5 w-5" />
-						{{ formatMessage(messages.goToHome) }}
-					</button>
-				</ButtonStyled>
+				<Button size="sm" @click="$emit('refetch')">
+					<RefreshCwIcon class="h-5 w-5" />
+					{{ formatMessage(messages.tryAgain) }}
+				</Button>
+				<Button size="sm" @click="$emit('home')">
+					<HomeIcon class="h-5 w-5" />
+					{{ formatMessage(messages.goToHome) }}
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -27,7 +23,7 @@
 <script setup lang="ts">
 import { FileIcon, HomeIcon, RefreshCwIcon } from '@modrinth/assets'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index 7f245fa7e3..42dde741c8 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -24,18 +24,17 @@
 			>
 				<ol class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
 					<li class="mr-4 flex-shrink-0">
-						<ButtonStyled circular>
-							<button
-								v-tooltip="formatMessage(messages.backToHome)"
-								type="button"
-								class="!size-10 bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
-								@click="$emit('navigateHome')"
-								@mouseenter="$emit('prefetchHome')"
-							>
-								<HomeIcon />
-								<span class="sr-only">{{ formatMessage(messages.home) }}</span>
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="formatMessage(messages.backToHome)"
+							:label="formatMessage(messages.backToHome)"
+							native-type="button"
+							class="bg-surface-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+							@click="$emit('navigateHome')"
+							@mouseenter="$emit('prefetchHome')"
+						>
+							<HomeIcon />
+							<span class="sr-only">{{ formatMessage(messages.home) }}</span>
+						</IconButton>
 					</li>
 					<li class="m-0 -ml-2 min-w-0 flex-shrink p-0">
 						<ol
@@ -64,20 +63,19 @@
 									class="relative flex shrink-0 items-center text-sm"
 								>
 									<div class="flex shrink-0 items-center">
-										<ButtonStyled type="transparent">
-											<button
-												class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
-												:aria-current="
-													!isEditing && index === breadcrumbs.length - 1 ? 'location' : undefined
-												"
-												:class="{
-													'!text-contrast': !isEditing && index === breadcrumbs.length - 1,
-												}"
-												@click="$emit('navigate', index)"
-											>
-												{{ segment || '' }}
-											</button>
-										</ButtonStyled>
+										<Button
+											type="quiet"
+											class="cursor-pointer whitespace-nowrap focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+											:aria-current="
+												!isEditing && index === breadcrumbs.length - 1 ? 'location' : undefined
+											"
+											:class="{
+												'!text-contrast': !isEditing && index === breadcrumbs.length - 1,
+											}"
+											@click="$emit('navigate', index)"
+										>
+											{{ segment || '' }}
+										</Button>
 										<ChevronRightIcon
 											v-if="index < breadcrumbs.length - 1 || isEditing"
 											class="size-4 flex-shrink-0 text-secondary"
@@ -111,98 +109,110 @@
 					@update:model-value="$emit('update:searchQuery', $event)"
 				/>
 
-				<ButtonStyled v-if="showRefreshButton" type="outlined">
-					<button
-						type="button"
-						class="flex !h-10 items-center gap-2"
-						:disabled="refreshing"
-						@click="handleRefresh"
-					>
-						<RefreshCwIcon
-							aria-hidden="true"
-							class="h-5 w-5 transition-transform"
-							:class="refreshing ? 'animate-spin' : ''"
-						/>
-						{{ formatMessage(commonMessages.refreshButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-if="showRefreshButton"
+					type="outlined"
+					native-type="button"
+					size="lg"
+					:disabled="refreshing"
+					@click="handleRefresh"
+				>
+					<RefreshCwIcon
+						aria-hidden="true"
+						class="h-5 w-5 transition-transform"
+						:class="refreshing ? 'animate-spin' : ''"
+					/>
+					{{ formatMessage(commonMessages.refreshButton) }}
+				</Button>
 
-				<ButtonStyled type="outlined">
-					<OverflowMenu
-						:dropdown-id="`create-new-${baseId}`"
-						position="bottom"
-						direction="left"
-						:aria-label="formatMessage(messages.createNew)"
-						:disabled="disabled"
-						:tooltip="disabled ? disabledTooltip : undefined"
-						class="!h-10 justify-center gap-2"
-						:options="[
-							{ id: 'file', action: () => $emit('create', 'file') },
-							{ id: 'directory', action: () => $emit('create', 'directory') },
-							{ id: 'upload', action: () => $emit('upload') },
-							{ divider: true, shown: showInstallFromUrl ?? false },
-							{ id: 'upload-zip', shown: false, action: () => $emit('uploadZip') },
-							{
-								id: 'install-from-url',
-								shown: showInstallFromUrl ?? false,
-								action: () => $emit('unzipFromUrl', false),
-							},
-							{
-								id: 'install-cf-pack',
-								shown: showInstallFromUrl ?? false,
-								action: () => $emit('unzipFromUrl', true),
-							},
-						]"
-					>
-						<PlusIcon aria-hidden="true" class="h-5 w-5" />
-						<DropdownIcon aria-hidden="true" class="h-5 w-5" />
-						<template #file>
-							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newFile) }}
-						</template>
-						<template #directory>
-							<FolderOpenIcon aria-hidden="true" /> {{ formatMessage(messages.newFolder) }}
-						</template>
-						<template #upload>
-							<UploadIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFile) }}
-						</template>
-						<template #upload-zip>
-							<FileArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZip) }}
-						</template>
-						<template #install-from-url>
-							<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZipUrl) }}
-						</template>
-						<template #install-cf-pack>
-							<CurseForgeIcon aria-hidden="true" />
-							{{ formatMessage(messages.installCurseForgePack) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+				<TeleportOverflowMenu
+					type="outlined"
+					:label="formatMessage(messages.createNew)"
+					:disabled="disabled"
+					:tooltip="disabled ? disabledTooltip : undefined"
+					size="lg"
+					class="justify-center gap-2 !w-auto !px-2.5 !rounded-xl"
+					:options="[
+						{
+							id: 'file',
+							label: formatMessage(messages.newFile),
+							action: () => $emit('create', 'file'),
+						},
+						{
+							id: 'directory',
+							label: formatMessage(messages.newFolder),
+							action: () => $emit('create', 'directory'),
+						},
+						{
+							id: 'upload',
+							label: formatMessage(messages.uploadFile),
+							action: () => $emit('upload'),
+						},
+						{ type: 'divider', shown: showInstallFromUrl ?? false },
+						{
+							id: 'upload-zip',
+							label: formatMessage(messages.uploadFromZip),
+							shown: false,
+							action: () => $emit('uploadZip'),
+						},
+						{
+							id: 'install-from-url',
+							label: formatMessage(messages.uploadFromZipUrl),
+							shown: showInstallFromUrl ?? false,
+							action: () => $emit('unzipFromUrl', false),
+						},
+						{
+							id: 'install-cf-pack',
+							label: formatMessage(messages.installCurseForgePack),
+							shown: showInstallFromUrl ?? false,
+							action: () => $emit('unzipFromUrl', true),
+						},
+					]"
+				>
+					<PlusIcon aria-hidden="true" class="h-5 w-5" />
+					<DropdownIcon aria-hidden="true" class="h-5 w-5" />
+					<template #file>
+						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newFile) }}
+					</template>
+					<template #directory>
+						<FolderOpenIcon aria-hidden="true" /> {{ formatMessage(messages.newFolder) }}
+					</template>
+					<template #upload>
+						<UploadIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFile) }}
+					</template>
+					<template #upload-zip>
+						<FileArchiveIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZip) }}
+					</template>
+					<template #install-from-url>
+						<LinkIcon aria-hidden="true" /> {{ formatMessage(messages.uploadFromZipUrl) }}
+					</template>
+					<template #install-cf-pack>
+						<CurseForgeIcon aria-hidden="true" />
+						{{ formatMessage(messages.installCurseForgePack) }}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 
 			<div v-else-if="!isEditingImage" class="flex gap-2">
-				<ButtonStyled v-if="isLogFile" type="transparent" circular>
-					<button
-						v-tooltip="formatMessage(messages.shareToMclogs)"
-						:aria-label="formatMessage(messages.shareToMclogs)"
-						@click="$emit('share')"
-					>
-						<ShareIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled
-					circular
-					:type="isEditorFindOpen ? 'standard' : 'transparent'"
-					:color="isEditorFindOpen ? 'brand' : 'standard'"
+				<IconButton
+					v-if="isLogFile"
+					v-tooltip="formatMessage(messages.shareToMclogs)"
+					type="quiet"
+					:label="formatMessage(messages.shareToMclogs)"
+					@click="$emit('share')"
 				>
-					<button
-						v-tooltip="formatMessage(messages.findInFile)"
-						:aria-label="formatMessage(messages.findInFile)"
-						:aria-pressed="isEditorFindOpen"
-						@click="$emit('find')"
-					>
-						<SearchIcon />
-					</button>
-				</ButtonStyled>
+					<ShareIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.findInFile)"
+					:type="isEditorFindOpen ? 'colored' : 'quiet'"
+					:color="isEditorFindOpen ? 'brand' : undefined"
+					:label="formatMessage(messages.findInFile)"
+					:aria-pressed="isEditorFindOpen"
+					@click="$emit('find')"
+				>
+					<SearchIcon />
+				</IconButton>
 			</div>
 		</div>
 	</header>
@@ -226,8 +236,7 @@ import {
 } from '@modrinth/assets'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
+import { Button, IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
index 05816710aa..983af761ad 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileTableRow.vue
@@ -49,41 +49,49 @@
 				>
 					{{ formatMessage(commonMessages.actionsLabel) }}
 				</span>
-				<div class="col-start-1 row-start-1 flex justify-end">
-					<ButtonStyled circular type="transparent">
-						<TeleportOverflowMenu :options="menuOptions">
-							<MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
-							<template #copy-filename
-								><ClipboardCopyIcon />
-								{{ formatMessage(commonMessages.copyFilenameButton) }}</template
-							>
-							<template #copy-full-path
-								><ClipboardCopyIcon />
-								{{ formatMessage(commonMessages.copyFullPathButton) }}</template
-							>
-							<template #open-in-folder
-								><FolderOpenIcon /> {{ formatMessage(commonMessages.openInFolderButton) }}</template
-							>
-							<template #extract
-								><PackageOpenIcon /> {{ formatMessage(commonMessages.extractButton) }}</template
-							>
-							<template #rename
-								><EditIcon /> {{ formatMessage(commonMessages.renameButton) }}</template
-							>
-							<template #move
-								><RightArrowIcon /> {{ formatMessage(commonMessages.moveButton) }}</template
-							>
-							<template #download
-								><DownloadIcon />
-								{{
-									ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton)
-								}}</template
-							>
-							<template #delete
-								><TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}</template
-							>
-						</TeleportOverflowMenu>
-					</ButtonStyled>
+				<div
+					class="col-start-1 row-start-1 flex justify-end"
+					@click.stop
+					@contextmenu.stop
+					@keydown.stop
+					@pointerdown.stop
+				>
+					<TeleportOverflowMenu
+						type="quiet"
+						:label="formatMessage(commonMessages.actionsLabel)"
+						:options="menuOptions"
+					>
+						<MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
+						<template #copy-filename
+							><ClipboardCopyIcon />
+							{{ formatMessage(commonMessages.copyFilenameButton) }}</template
+						>
+						<template #copy-full-path
+							><ClipboardCopyIcon />
+							{{ formatMessage(commonMessages.copyFullPathButton) }}</template
+						>
+						<template #open-in-folder
+							><FolderOpenIcon /> {{ formatMessage(commonMessages.openInFolderButton) }}</template
+						>
+						<template #extract
+							><PackageOpenIcon /> {{ formatMessage(commonMessages.extractButton) }}</template
+						>
+						<template #rename
+							><EditIcon /> {{ formatMessage(commonMessages.renameButton) }}</template
+						>
+						<template #move
+							><RightArrowIcon /> {{ formatMessage(commonMessages.moveButton) }}</template
+						>
+						<template #download
+							><DownloadIcon />
+							{{
+								ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton)
+							}}</template
+						>
+						<template #delete
+							><TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}</template
+						>
+					</TeleportOverflowMenu>
 				</div>
 			</div>
 		</div>
@@ -109,9 +117,8 @@ import {
 } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { TeleportOverflowMenu } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
-import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import { useFormatBytes } from '#ui/composables'
 import { useFormatDateTime } from '#ui/composables/format-date-time'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -211,6 +218,7 @@ const menuOptions = computed(() => {
 	return [
 		{
 			id: 'copy-filename',
+			label: formatMessage(commonMessages.copyFilenameButton),
 			icon: ClipboardCopyIcon,
 			action: () => {
 				navigator.clipboard.writeText(props.name)
@@ -222,6 +230,7 @@ const menuOptions = computed(() => {
 		},
 		{
 			id: 'copy-full-path',
+			label: formatMessage(commonMessages.copyFullPathButton),
 			icon: ClipboardCopyIcon,
 			action: () => {
 				navigator.clipboard.writeText(getFullPath())
@@ -230,45 +239,48 @@ const menuOptions = computed(() => {
 		},
 		{
 			id: 'open-in-folder',
+			label: formatMessage(commonMessages.openInFolderButton),
 			icon: FolderOpenIcon,
 			shown: !!ctx.openInFolder,
 			action: () => ctx.openInFolder?.(getFullPath()),
 		},
-		{ divider: true },
+		{ type: 'divider' },
 		{
 			id: 'extract',
+			label: formatMessage(commonMessages.extractButton),
 			shown: isZip.value,
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('extract', item),
 		},
-		{
-			divider: true,
-			shown: isZip.value,
-		},
+		{ type: 'divider', shown: isZip.value },
 		{
 			id: 'rename',
+			label: formatMessage(commonMessages.renameButton),
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('rename', item),
 		},
 		{
 			id: 'move',
+			label: formatMessage(commonMessages.moveButton),
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('move', item),
 		},
 		{
 			id: 'download',
+			label: ctx.downloadButtonLabel ?? formatMessage(commonMessages.downloadButton),
 			action: () => emit('download', item),
 			shown: props.type !== 'directory',
 		},
 		{
 			id: 'delete',
+			label: formatMessage(commonMessages.deleteLabel),
 			disabled: wd,
 			tooltip: wd ? wdTooltip : undefined,
 			action: () => emit('delete', item),
-			color: 'red' as const,
+			tone: 'red',
 		},
 	]
 })
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
index 1e28ffbbb7..47a19ca752 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
@@ -7,19 +7,18 @@
 		>
 			<!-- Find row -->
 			<div class="flex items-center gap-1">
-				<ButtonStyled type="transparent" circular>
-					<button
-						v-tooltip="formatMessage(messages.toggleReplace)"
-						:disabled="props.readonly"
-						:aria-label="formatMessage(messages.toggleReplace)"
-						@click="toggleReplace"
-					>
-						<ChevronRightIcon
-							class="transition-transform duration-150"
-							:class="{ 'rotate-90': isReplaceOpen }"
-						/>
-					</button>
-				</ButtonStyled>
+				<IconButton
+					v-tooltip="formatMessage(messages.toggleReplace)"
+					type="quiet"
+					:label="formatMessage(messages.toggleReplace)"
+					:disabled="props.readonly"
+					@click="toggleReplace"
+				>
+					<ChevronRightIcon
+						class="transition-transform duration-150"
+						:class="{ 'rotate-90': isReplaceOpen }"
+					/>
+				</IconButton>
 				<div
 					@keydown.enter.exact.prevent.stop="emit('findNext')"
 					@keydown.shift.enter.prevent.stop="emit('findPrevious')"
@@ -47,36 +46,33 @@
 								: ''
 					}}
 				</span>
-				<ButtonStyled type="transparent" circular>
-					<button
-						v-tooltip="formatMessage(messages.previousMatch)"
-						:disabled="findMatchCount === 0"
-						:aria-label="formatMessage(messages.previousMatch)"
-						@click="emit('findPrevious')"
-					>
-						<ChevronUpIcon />
-					</button>
-				</ButtonStyled>
-				<ButtonStyled type="transparent" circular>
-					<button
-						v-tooltip="formatMessage(messages.nextMatch)"
-						:disabled="findMatchCount === 0"
-						:aria-label="formatMessage(messages.nextMatch)"
-						@click="emit('findNext')"
-					>
-						<ChevronDownIcon />
-					</button>
-				</ButtonStyled>
+				<IconButton
+					v-tooltip="formatMessage(messages.previousMatch)"
+					type="quiet"
+					:label="formatMessage(messages.previousMatch)"
+					:disabled="findMatchCount === 0"
+					@click="emit('findPrevious')"
+				>
+					<ChevronUpIcon />
+				</IconButton>
+				<IconButton
+					v-tooltip="formatMessage(messages.nextMatch)"
+					type="quiet"
+					:label="formatMessage(messages.nextMatch)"
+					:disabled="findMatchCount === 0"
+					@click="emit('findNext')"
+				>
+					<ChevronDownIcon />
+				</IconButton>
 				<div class="mx-0.5 h-4 w-px bg-surface-5" />
-				<ButtonStyled type="transparent" circular>
-					<button
-						v-tooltip="formatMessage(messages.closeFind)"
-						:aria-label="formatMessage(messages.closeFind)"
-						@click="close"
-					>
-						<XIcon />
-					</button>
-				</ButtonStyled>
+				<IconButton
+					v-tooltip="formatMessage(messages.closeFind)"
+					type="quiet"
+					:label="formatMessage(messages.closeFind)"
+					@click="close"
+				>
+					<XIcon />
+				</IconButton>
 			</div>
 
 			<!-- Replace row -->
@@ -94,24 +90,22 @@
 						wrapper-class="w-44"
 					/>
 				</div>
-				<ButtonStyled type="outlined">
-					<button
-						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
-						:disabled="props.readonly || findMatchCount === 0"
-						@click="emit('replace', replaceQuery)"
-					>
-						{{ formatMessage(messages.replace) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled type="outlined">
-					<button
-						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
-						:disabled="props.readonly || findMatchCount === 0"
-						@click="emit('replaceAll', replaceQuery)"
-					>
-						{{ formatMessage(messages.replaceAll) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					type="outlined"
+					class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
+					:disabled="props.readonly || findMatchCount === 0"
+					@click="emit('replace', replaceQuery)"
+				>
+					{{ formatMessage(messages.replace) }}
+				</Button>
+				<Button
+					type="outlined"
+					class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
+					:disabled="props.readonly || findMatchCount === 0"
+					@click="emit('replaceAll', replaceQuery)"
+				>
+					{{ formatMessage(messages.replaceAll) }}
+				</Button>
 			</div>
 		</div>
 	</Transition>
@@ -121,7 +115,7 @@
 import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, XIcon } from '@modrinth/assets'
 import { nextTick, ref, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button, IconButton } from '#ui/components/base/buttons'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/FileImageViewer.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/FileImageViewer.vue
index 6bd8bfec48..9b58de141d 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/FileImageViewer.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/FileImageViewer.vue
@@ -24,22 +24,16 @@
 			v-if="isReady"
 			class="absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-2xl bg-surface-3/80 p-1.5 backdrop-blur-sm"
 		>
-			<ButtonStyled type="transparent">
-				<button v-tooltip="formatMessage(messages.zoomIn)" @click="zoomIn">
-					<ZoomInIcon />
-				</button>
-			</ButtonStyled>
-			<ButtonStyled type="transparent">
-				<button v-tooltip="formatMessage(messages.zoomOut)" @click="zoomOut">
-					<ZoomOutIcon />
-				</button>
-			</ButtonStyled>
+			<Button v-tooltip="formatMessage(messages.zoomIn)" type="quiet" @click="zoomIn">
+				<ZoomInIcon />
+			</Button>
+			<Button v-tooltip="formatMessage(messages.zoomOut)" type="quiet" @click="zoomOut">
+				<ZoomOutIcon />
+			</Button>
 			<div class="mx-1 h-6 w-px bg-surface-5" />
-			<ButtonStyled type="transparent">
-				<button v-tooltip="formatMessage(messages.resetZoom)" @click="resetZoom">
-					<span class="px-1 text-sm tabular-nums">{{ Math.round(scale * 100) }}%</span>
-				</button>
-			</ButtonStyled>
+			<Button v-tooltip="formatMessage(messages.resetZoom)" type="quiet" @click="resetZoom">
+				<span class="px-1 text-sm tabular-nums">{{ Math.round(scale * 100) }}%</span>
+			</Button>
 		</div>
 	</div>
 </template>
@@ -48,7 +42,7 @@
 import { TriangleAlertIcon, ZoomInIcon, ZoomOutIcon } from '@modrinth/assets'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
index deaf3828b0..584f74f64a 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
@@ -28,22 +28,18 @@
 		</form>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon class="h-5 w-5" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!!error && submitted" @click="handleSubmit">
-						<PlusIcon class="h-5 w-5" />
-						{{
-							formatMessage(messages.createButton, {
-								type: formatFileItemType(formatMessage, type),
-							})
-						}}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon class="h-5 w-5" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!!error && submitted" @click="handleSubmit">
+					<PlusIcon class="h-5 w-5" />
+					{{
+						formatMessage(messages.createButton, {
+							type: formatFileItemType(formatMessage, type),
+						})
+					}}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -53,7 +49,7 @@
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
index d66e0445b3..e39871c240 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
@@ -10,18 +10,14 @@
 		</Admonition>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon class="h-5 w-5" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="handleSubmit">
-						<TrashIcon class="h-5 w-5" />
-						{{ formatMessage(commonMessages.deleteLabel) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon class="h-5 w-5" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="handleSubmit">
+					<TrashIcon class="h-5 w-5" />
+					{{ formatMessage(commonMessages.deleteLabel) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -32,7 +28,7 @@ import { TrashIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
index 37a36e298c..805c200d31 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
@@ -29,18 +29,14 @@
 		</form>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon class="h-5 w-5" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button @click="handleSubmit">
-						<RightArrowIcon class="h-5 w-5" />
-						{{ formatMessage(commonMessages.moveButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon class="h-5 w-5" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" @click="handleSubmit">
+					<RightArrowIcon class="h-5 w-5" />
+					{{ formatMessage(commonMessages.moveButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -50,7 +46,7 @@
 import { RightArrowIcon, XIcon } from '@modrinth/assets'
 import { nextTick, ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
index 44cbdbe545..7609b1a733 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
@@ -13,18 +13,14 @@
 		</form>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon class="h-5 w-5" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!!error && submitted" @click="handleSubmit">
-						<EditIcon class="h-5 w-5" />
-						{{ formatMessage(commonMessages.renameButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon class="h-5 w-5" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!!error && submitted" @click="handleSubmit">
+					<EditIcon class="h-5 w-5" />
+					{{ formatMessage(commonMessages.renameButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -34,7 +30,7 @@
 import { EditIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
index 9a1bb53dcc..718a3f0d76 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
@@ -5,24 +5,18 @@
 		</p>
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="handleDiscard">
-						<TrashIcon />
-						{{ formatMessage(messages.discard) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="green">
-					<button @click="handleSave">
-						<SaveIcon />
-						{{ formatMessage(commonMessages.saveButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="red" @click="handleDiscard">
+					<TrashIcon />
+					{{ formatMessage(messages.discard) }}
+				</Button>
+				<Button type="colored" color="green" @click="handleSave">
+					<SaveIcon />
+					{{ formatMessage(commonMessages.saveButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -32,7 +26,7 @@
 import { SaveIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
index 61e7f43c94..07e3413efd 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
@@ -56,18 +56,14 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2 pt-4">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button @click="handleProceed">
-						<CheckIcon />
-						{{ formatMessage(messages.overwriteButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" @click="handleProceed">
+					<CheckIcon />
+					{{ formatMessage(messages.overwriteButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -78,7 +74,7 @@ import { CheckIcon, MinusIcon, XIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
index 423635d6e8..d63cc95c8e 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
@@ -63,32 +63,30 @@
 
 		<template #actions>
 			<div class="flex w-full items-center justify-end gap-2">
-				<ButtonStyled type="outlined">
-					<button type="button" @click="hide">
-						<XIcon />
-						{{
-							submitted
-								? formatMessage(commonMessages.closeButton)
-								: formatMessage(commonMessages.cancelButton)
-						}}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button
-						v-tooltip="submitTooltip"
-						:disabled="submitDisabled"
-						type="submit"
-						@click="handleSubmit"
-					>
-						<SpinnerIcon v-if="submitted" class="animate-spin" />
-						<DownloadIcon v-else />
-						{{
-							submitted
-								? formatMessage(commonMessages.installingLabel)
-								: formatMessage(messages.installButton)
-						}}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" native-type="button" @click="hide">
+					<XIcon />
+					{{
+						submitted
+							? formatMessage(commonMessages.closeButton)
+							: formatMessage(commonMessages.cancelButton)
+					}}
+				</Button>
+				<Button
+					v-tooltip="submitTooltip"
+					type="colored"
+					color="brand"
+					:disabled="submitDisabled"
+					native-type="submit"
+					@click="handleSubmit"
+				>
+					<SpinnerIcon v-if="submitted" class="animate-spin" />
+					<DownloadIcon v-else />
+					{{
+						submitted
+							? formatMessage(commonMessages.installingLabel)
+							: formatMessage(messages.installButton)
+					}}
+				</Button>
 			</div>
 		</template>
 	</NewModal>
@@ -105,7 +103,7 @@ import {
 } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDropdown.vue b/packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDropdown.vue
index a25cc3ebe1..315f9788a8 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDropdown.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/upload/FileUploadDropdown.vue
@@ -84,9 +84,9 @@
 												:style="{ width: item.progress + '%' }"
 											/>
 										</div>
-										<ButtonStyled color="red" type="transparent" @click="cancelUpload(item)">
-											<button>{{ formatMessage(commonMessages.cancelButton) }}</button>
-										</ButtonStyled>
+										<Button type="quiet" color="red" @click="cancelUpload(item)">{{
+											formatMessage(commonMessages.cancelButton)
+										}}</Button>
 									</template>
 									<template v-else-if="item.status === 'cancelled'">
 										<span class="text-red">{{ formatMessage(messages.cancelled) }}</span>
@@ -114,7 +114,7 @@
 import { CheckCircleIcon, FolderOpenIcon, SpinnerIcon, XCircleIcon } from '@modrinth/assets'
 import { computed, nextTick, ref, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import { useFormatBytes } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectModrinthClient } from '#ui/providers/api-client'
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 75847b76eb..a8744b0888 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -157,20 +157,18 @@
 				{{ formatMessage(messages.unsavedChanges) }}
 			</p>
 			<div class="ml-auto flex gap-2">
-				<ButtonStyled type="transparent">
-					<button @click="fileEditorRef?.revertChanges()">
-						<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button
-						v-tooltip="isBusy ? busyTooltip : undefined"
-						:disabled="isBusy"
-						@click="fileEditorRef?.saveFileContent(false)"
-					>
-						<SaveIcon /> {{ formatMessage(commonMessages.saveButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" @click="fileEditorRef?.revertChanges()">
+					<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
+				</Button>
+				<Button
+					v-tooltip="isBusy ? busyTooltip : undefined"
+					type="colored"
+					color="brand"
+					:disabled="isBusy"
+					@click="fileEditorRef?.saveFileContent(false)"
+				>
+					<SaveIcon /> {{ formatMessage(commonMessages.saveButton) }}
+				</Button>
 			</div>
 		</FloatingActionBar>
 		<FloatingActionBar :shown="selectedItems.size > 0">
@@ -179,25 +177,23 @@
 					{{ formatMessage(messages.selectedCount, { count: selectedItems.size }) }}
 				</span>
 				<div class="mx-1 h-6 w-px bg-surface-5" />
-				<ButtonStyled type="transparent">
-					<button class="!text-primary" @click="deselectAll">
-						<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
-					</button>
-				</ButtonStyled>
+				<Button type="quiet" class="!text-primary" @click="deselectAll">
+					<span class="bar-label">{{ formatMessage(commonMessages.clearButton) }}</span>
+				</Button>
 			</div>
 			<div class="ml-auto flex items-center gap-0.5">
 				<div class="mx-1 h-6 w-px bg-surface-5" />
-				<ButtonStyled
-					type="transparent"
+				<Button
+					v-tooltip="busyTooltip"
+					type="quiet"
 					color="red"
-					color-fill="text"
-					hover-color-fill="background"
+					:disabled="isBusy"
+					class="hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+					@click="showBulkDeleteModal"
 				>
-					<button v-tooltip="busyTooltip" :disabled="isBusy" @click="showBulkDeleteModal">
-						<TrashIcon />
-						<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
-					</button>
-				</ButtonStyled>
+					<TrashIcon />
+					<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+				</Button>
 			</div>
 		</FloatingActionBar>
 	</div>
@@ -217,7 +213,7 @@ import {
 import type { Component } from 'vue'
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useStickyObserver } from '#ui/composables/sticky-observer'
diff --git a/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue b/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
index e13df17036..78e4e6b5b3 100644
--- a/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
@@ -138,25 +138,29 @@
 				<p class="m-0 text-primary">{{ formatMessage(messages.reviewedFiles) }}</p>
 				<div class="flex justify-between gap-2">
 					<div>
-						<ButtonStyled v-if="showReportButton" color="red" type="transparent">
-							<button @click="emit('report', $event)">
-								<ReportIcon />
-								{{ formatMessage(commonMessages.reportButton) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-if="showReportButton"
+							type="quiet"
+							color="red"
+							@click="emit('report', $event)"
+						>
+							<ReportIcon />
+							{{ formatMessage(commonMessages.reportButton) }}
+						</Button>
 					</div>
 					<div class="flex gap-2">
-						<ButtonStyled type="transparent" color="orange">
-							<button :disabled="buttonsDisabled || confirmDisabled" @click="handleConfirm">
-								{{ formatMessage(messages.installAnyway) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="brand">
-							<button @click="handleCancel">
-								<BanIcon />
-								{{ formatMessage(messages.dontInstall) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							type="quiet"
+							color="orange"
+							:disabled="buttonsDisabled || confirmDisabled"
+							@click="handleConfirm"
+						>
+							{{ formatMessage(messages.installAnyway) }}
+						</Button>
+						<Button type="colored" color="brand" @click="handleCancel">
+							<BanIcon />
+							{{ formatMessage(messages.dontInstall) }}
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -166,26 +170,25 @@
 				:class="{ 'pt-4': !$slots['additional-content'] }"
 			>
 				<div>
-					<ButtonStyled v-if="showReportButton" color="red" type="transparent">
-						<button @click="emit('report', $event)">
-							<ReportIcon />
-							{{ formatMessage(commonMessages.reportButton) }}
-						</button>
-					</ButtonStyled>
+					<Button v-if="showReportButton" type="quiet" color="red" @click="emit('report', $event)">
+						<ReportIcon />
+						{{ formatMessage(commonMessages.reportButton) }}
+					</Button>
 				</div>
 				<div class="flex gap-2">
-					<ButtonStyled type="outlined">
-						<button class="!border" @click="handleCancel">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="buttonsDisabled || confirmDisabled" @click="handleConfirm">
-							<component :is="confirmIcon" v-if="confirmIcon" />
-							{{ confirmLabel || formatMessage(commonMessages.confirmButton) }}
-						</button>
-					</ButtonStyled>
+					<Button type="outlined" class="!border" @click="handleCancel">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						:disabled="buttonsDisabled || confirmDisabled"
+						@click="handleConfirm"
+					>
+						<component :is="confirmIcon" v-if="confirmIcon" />
+						{{ confirmLabel || formatMessage(commonMessages.confirmButton) }}
+					</Button>
 				</div>
 			</div>
 		</template>
@@ -205,7 +208,7 @@ import {
 import { type Component, computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue b/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
index ea9e03e114..36f09a0195 100644
--- a/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
@@ -18,12 +18,10 @@
 						}}
 					</span>
 					<div v-if="variant === 'loader-change'">
-						<ButtonStyled color="red">
-							<button :disabled="loading" @click="handleResetServer">
-								<TrashIcon class="size-5" />
-								{{ formatMessage(commonMessages.resetServerButton) }}
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="red" :disabled="loading" @click="handleResetServer">
+							<TrashIcon class="size-5" />
+							{{ formatMessage(commonMessages.resetServerButton) }}
+						</Button>
 					</div>
 				</div>
 			</Admonition>
@@ -40,42 +38,44 @@
 
 		<template #actions>
 			<div class="flex justify-end gap-2">
-				<ButtonStyled>
-					<button :disabled="loading" @click="handleCancel">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
+				<Button :disabled="loading" @click="handleCancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
 				<template v-if="variant === 'game-version-change'">
-					<ButtonStyled>
-						<button :disabled="buttonsDisabled || loading" @click="handleDisableConflicts">
-							<SpinnerIcon
-								v-if="loading && loadingAction === 'disable-conflicts'"
-								class="size-5 animate-spin"
-							/>
-							<PowerOffIcon v-else class="size-5" />
-							{{ formatMessage(messages.disableConflictsButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="orange">
-						<button :disabled="buttonsDisabled || loading" @click="handleAutoFix">
-							<SpinnerIcon
-								v-if="loading && loadingAction === 'auto-fix'"
-								class="size-5 animate-spin"
-							/>
-							<HammerIcon v-else class="size-5" />
-							{{ formatMessage(messages.autoFixButton) }}
-						</button>
-					</ButtonStyled>
+					<Button :disabled="buttonsDisabled || loading" @click="handleDisableConflicts">
+						<SpinnerIcon
+							v-if="loading && loadingAction === 'disable-conflicts'"
+							class="size-5 animate-spin"
+						/>
+						<PowerOffIcon v-else class="size-5" />
+						{{ formatMessage(messages.disableConflictsButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="orange"
+						:disabled="buttonsDisabled || loading"
+						@click="handleAutoFix"
+					>
+						<SpinnerIcon
+							v-if="loading && loadingAction === 'auto-fix'"
+							class="size-5 animate-spin"
+						/>
+						<HammerIcon v-else class="size-5" />
+						{{ formatMessage(messages.autoFixButton) }}
+					</Button>
 				</template>
 				<template v-else>
-					<ButtonStyled color="red">
-						<button :disabled="buttonsDisabled || loading" @click="handleConfirmLoaderChange">
-							<SpinnerIcon v-if="loading" class="size-5 animate-spin" />
-							<CircleAlertIcon v-else class="size-5" />
-							{{ formatMessage(messages.changeLoaderButton) }}
-						</button>
-					</ButtonStyled>
+					<Button
+						type="colored"
+						color="red"
+						:disabled="buttonsDisabled || loading"
+						@click="handleConfirmLoaderChange"
+					>
+						<SpinnerIcon v-if="loading" class="size-5 animate-spin" />
+						<CircleAlertIcon v-else class="size-5" />
+						{{ formatMessage(messages.changeLoaderButton) }}
+					</Button>
 				</template>
 			</div>
 		</template>
@@ -94,7 +94,7 @@ import {
 import { ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/installation-settings/layout.vue b/packages/ui/src/layouts/shared/installation-settings/layout.vue
index 9d0f404150..5bf5ad7bf8 100644
--- a/packages/ui/src/layouts/shared/installation-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/layout.vue
@@ -19,7 +19,7 @@ import { onBeforeRouteLeave } from 'vue-router'
 import Admonition from '#ui/components/base/Admonition.vue'
 import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import Chips from '#ui/components/base/Chips.vue'
 import Combobox from '#ui/components/base/Combobox.vue'
 import PaperChannelBadge from '#ui/components/base/PaperChannelBadge.vue'
@@ -667,17 +667,15 @@ const messages = defineMessages({
 						</div>
 					</div>
 					<div class="flex flex-wrap gap-2">
-						<ButtonStyled v-if="showModpackVersionActions || isLocalFile">
-							<button
-								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
-								class="!shadow-none"
-								:disabled="ctx.isBusy.value"
-								@click="handleModpackPrimaryAction"
-							>
-								<ArrowLeftRightIcon class="size-5" />
-								{{ formatMessage(commonMessages.changeVersionButton) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-if="showModpackVersionActions || isLocalFile"
+							v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
+							:disabled="ctx.isBusy.value"
+							@click="handleModpackPrimaryAction"
+						>
+							<ArrowLeftRightIcon class="size-5" />
+							{{ formatMessage(commonMessages.changeVersionButton) }}
+						</Button>
 					</div>
 					<Admonition
 						v-if="isManagedModpack && (showModpackVersionActions || isLocalFile)"
@@ -700,21 +698,20 @@ const messages = defineMessages({
 						}}
 					</span>
 					<div>
-						<ButtonStyled color="orange">
-							<button
-								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
-								class="!shadow-none"
-								:disabled="ctx.isBusy.value"
-								@click="handleShowUnlinkModal"
-							>
-								<UnlinkIcon class="size-5" />
-								{{
-									formatMessage(
-										isLinkedModpack ? commonMessages.unlinkModpackButton : messages.unlinkButton,
-									)
-								}}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
+							type="colored"
+							color="orange"
+							:disabled="ctx.isBusy.value"
+							@click="handleShowUnlinkModal"
+						>
+							<UnlinkIcon class="size-5" />
+							{{
+								formatMessage(
+									isLinkedModpack ? commonMessages.unlinkModpackButton : messages.unlinkButton,
+								)
+							}}
+						</Button>
 					</div>
 					<span class="text-primary">
 						{{
@@ -734,22 +731,21 @@ const messages = defineMessages({
 						{{ formatMessage(messages.reinstallModpackTitle) }}
 					</span>
 					<div>
-						<ButtonStyled color="red">
-							<button
-								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
-								class="!shadow-none"
-								:disabled="ctx.isBusy.value"
-								@click="handleShowReinstallModal"
-							>
-								<SpinnerIcon v-if="ctx.reinstalling?.value" class="animate-spin" />
-								<DownloadIcon v-else class="size-5" />
-								{{
-									ctx.reinstalling?.value
-										? formatMessage(messages.reinstallingModpackButton)
-										: formatMessage(commonMessages.reinstallModpackButton)
-								}}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
+							type="colored"
+							color="red"
+							:disabled="ctx.isBusy.value"
+							@click="handleShowReinstallModal"
+						>
+							<SpinnerIcon v-if="ctx.reinstalling?.value" class="animate-spin" />
+							<DownloadIcon v-else class="size-5" />
+							{{
+								ctx.reinstalling?.value
+									? formatMessage(messages.reinstallingModpackButton)
+									: formatMessage(commonMessages.reinstallModpackButton)
+							}}
+						</Button>
 					</div>
 					<span class="text-primary">
 						{{
@@ -772,22 +768,19 @@ const messages = defineMessages({
 						}}
 					</span>
 					<div>
-						<ButtonStyled>
-							<button
-								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
-								class="!shadow-none"
-								:disabled="ctx.isBusy.value"
-								@click="handleShowRepairModal"
-							>
-								<SpinnerIcon v-if="ctx.repairing?.value" class="animate-spin" />
-								<HammerIcon v-else class="size-5" />
-								{{
-									ctx.repairing?.value
-										? formatMessage(commonMessages.repairingButton)
-										: formatMessage(commonMessages.repairButton)
-								}}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
+							:disabled="ctx.isBusy.value"
+							@click="handleShowRepairModal"
+						>
+							<SpinnerIcon v-if="ctx.repairing?.value" class="animate-spin" />
+							<HammerIcon v-else class="size-5" />
+							{{
+								ctx.repairing?.value
+									? formatMessage(commonMessages.repairingButton)
+									: formatMessage(commonMessages.repairButton)
+							}}
+						</Button>
 					</div>
 					<span class="text-primary">
 						{{
@@ -926,35 +919,32 @@ const messages = defineMessages({
 						</div>
 
 						<div class="flex flex-wrap gap-2">
-							<ButtonStyled color="brand">
-								<button
-									v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
-									class="!shadow-none"
-									:disabled="
-										!form.isValid.value ||
-										!form.hasChanges.value ||
-										form.isSaving.value ||
-										ctx.isBusy.value
-									"
-									@click="handleSave"
-								>
-									<SpinnerIcon v-if="form.isSaving.value" class="animate-spin" />
-									<SaveIcon v-else />
-									{{
-										form.isVerifying.value
-											? formatMessage(messages.verifyingLabel)
-											: form.isSaving.value
-												? formatMessage(messages.savingLabel)
-												: formatMessage(commonMessages.saveButton)
-									}}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled type="outlined">
-								<button @click="handleCancelEditing">
-									<XIcon />
-									{{ formatMessage(commonMessages.cancelButton) }}
-								</button>
-							</ButtonStyled>
+							<Button
+								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
+								type="colored"
+								color="brand"
+								:disabled="
+									!form.isValid.value ||
+									!form.hasChanges.value ||
+									form.isSaving.value ||
+									ctx.isBusy.value
+								"
+								@click="handleSave"
+							>
+								<SpinnerIcon v-if="form.isSaving.value" class="animate-spin" />
+								<SaveIcon v-else />
+								{{
+									form.isVerifying.value
+										? formatMessage(messages.verifyingLabel)
+										: form.isSaving.value
+											? formatMessage(messages.savingLabel)
+											: formatMessage(commonMessages.saveButton)
+								}}
+							</Button>
+							<Button type="outlined" @click="handleCancelEditing">
+								<XIcon />
+								{{ formatMessage(commonMessages.cancelButton) }}
+							</Button>
 						</div>
 					</div>
 				</div>
@@ -975,17 +965,16 @@ const messages = defineMessages({
 						</div>
 					</div>
 					<div class="flex flex-wrap gap-2">
-						<ButtonStyled color="orange">
-							<button
-								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
-								class="!shadow-none"
-								:disabled="ctx.isBusy.value"
-								@click="handleStartEditing"
-							>
-								<PencilIcon class="size-5" />
-								{{ formatMessage(commonMessages.editButton) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
+							type="colored"
+							color="orange"
+							:disabled="ctx.isBusy.value"
+							@click="handleStartEditing"
+						>
+							<PencilIcon class="size-5" />
+							{{ formatMessage(commonMessages.editButton) }}
+						</Button>
 						<slot name="unlinked-extra-buttons" />
 					</div>
 					<div class="flex items-start gap-2">
@@ -1010,22 +999,19 @@ const messages = defineMessages({
 						}}
 					</span>
 					<div>
-						<ButtonStyled>
-							<button
-								v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
-								class="!shadow-none"
-								:disabled="ctx.isBusy.value"
-								@click="handleShowRepairModal"
-							>
-								<SpinnerIcon v-if="ctx.repairing?.value" class="animate-spin" />
-								<HammerIcon v-else class="size-5" />
-								{{
-									ctx.repairing?.value
-										? formatMessage(commonMessages.repairingButton)
-										: formatMessage(commonMessages.repairButton)
-								}}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="ctx.isBusy.value ? ctx.busyMessage?.value : undefined"
+							:disabled="ctx.isBusy.value"
+							@click="handleShowRepairModal"
+						>
+							<SpinnerIcon v-if="ctx.repairing?.value" class="animate-spin" />
+							<HammerIcon v-else class="size-5" />
+							{{
+								ctx.repairing?.value
+									? formatMessage(commonMessages.repairingButton)
+									: formatMessage(commonMessages.repairButton)
+							}}
+						</Button>
 					</div>
 					<span class="text-primary">
 						{{
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
index 133342ce11..c56d47c942 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -6,95 +6,82 @@
 				<div class="flex flex-col gap-2">
 					<div class="flex flex-col items-center justify-between gap-0.5 sm:flex-row">
 						<span class="text-lg font-semibold text-contrast">SFTP</span>
-						<ButtonStyled>
-							<a
-								v-tooltip="sftpActionTooltip"
-								class="!w-full sm:!w-auto"
-								:class="{ 'opacity-60': !canWriteFiles }"
-								:href="canWriteFiles ? sftpUrl : undefined"
-								:aria-disabled="!canWriteFiles"
-								target="_blank"
-								@click="handleSftpLaunchClick"
-							>
-								<ExternalIcon class="h-5 w-5" />
-								Launch SFTP
-							</a>
-						</ButtonStyled>
+						<ButtonLink
+							v-tooltip="sftpActionTooltip"
+							class="!w-full sm:!w-auto"
+							:class="{ 'opacity-60': !canWriteFiles }"
+							:href="canWriteFiles ? sftpUrl : undefined"
+							:aria-disabled="!canWriteFiles"
+							target="_blank"
+							@click="handleSftpLaunchClick"
+						>
+							<ExternalIcon class="h-5 w-5" />
+							Launch SFTP
+						</ButtonLink>
 					</div>
 
 					<div class="flex flex-col gap-2.5 rounded-2xl bg-surface-2 p-4">
 						<span class="text-lg font-semibold text-contrast">Server Address</span>
-						<div
+						<Button
 							v-tooltip="sftpCopyTooltip('Copy SFTP server address')"
-							class="copy-field hover:bg-button-bg-hover"
-							:class="{ 'opacity-60': !canWriteFiles }"
+							native-type="button"
+							size="lg"
+							class="w-full !justify-between text-left"
+							:disabled="!canWriteFiles"
 							@click="copyToClipboard('Server address', server?.sftp_host)"
 						>
-							<span class="cursor-pointer font-semibold text-primary">
+							<span class="min-w-0 truncate text-base font-semibold text-primary">
 								{{ server?.sftp_host }}
 							</span>
-							<div class="grid h-10 w-10 place-content-center">
-								<CopyIcon class="h-5 w-5" />
-							</div>
-						</div>
+							<ClipboardCopyIcon class="size-5 shrink-0 text-secondary" aria-hidden="true" />
+						</Button>
 						<div class="flex flex-col gap-2 sm:mt-0 sm:flex-row">
 							<div class="flex w-full flex-col justify-center gap-2">
 								<span class="text-lg font-semibold text-contrast">Username</span>
-								<div
+								<Button
 									v-tooltip="sftpCopyTooltip('Copy SFTP username')"
-									class="copy-field hover:bg-button-bg-hover"
-									:class="{ 'opacity-60': !canWriteFiles }"
+									native-type="button"
+									size="lg"
+									class="w-full !justify-between text-left"
+									:disabled="!canWriteFiles"
 									@click="copyToClipboard('Username', server?.sftp_username)"
 								>
-									<div class="truncate font-semibold">
+									<span class="min-w-0 truncate text-base font-semibold text-primary">
 										{{ server?.sftp_username }}
-									</div>
-									<div class="grid h-10 w-9 place-content-center">
-										<CopyIcon class="h-5 w-5" />
-									</div>
-								</div>
+									</span>
+									<ClipboardCopyIcon class="size-5 shrink-0 text-secondary" aria-hidden="true" />
+								</Button>
 							</div>
 							<div class="flex w-full flex-col justify-center gap-2">
 								<span class="text-lg font-semibold text-contrast">Password</span>
-								<div
-									class="copy-field-has-button [&:hover:not(:has(button:hover))]:bg-button-bg-hover"
-									:class="{ 'opacity-60': !canWriteFiles }"
-									@click="copyToClipboard('Password', server?.sftp_password)"
-								>
-									<div class="flex items-center gap-1.5 h-full w-full">
-										<div
-											v-tooltip="sftpCopyTooltip('Copy SFTP Password')"
-											class="h-full flex justify-between grow items-center"
-										>
-											<div class="truncate font-semibold">
-												{{
-													showPassword
-														? server?.sftp_password
-														: '*'.repeat(server?.sftp_password?.length ?? 0)
-												}}
-											</div>
-											<CopyIcon class="h-5 w-5" />
-										</div>
-
-										<ButtonStyled type="transparent" circular>
-											<button
-												v-tooltip="
-													canWriteFiles
-														? showPassword
-															? 'Hide password'
-															: 'Show password'
-														: permissionDeniedMessage
-												"
-												class="hover:bg-button-bg-hover grid h-10 w-10 place-content-center rounded-lg"
-												:disabled="!canWriteFiles"
-												@click.stop="togglePasswordVisibility"
-											>
-												<!-- look into doing stop propagation here -->
-												<EyeIcon v-if="showPassword" class="h-5 w-5" />
-												<EyeOffIcon v-else class="h-5 w-5" />
-											</button>
-										</ButtonStyled>
-									</div>
+								<div class="flex items-center gap-1.5">
+									<Button
+										v-tooltip="sftpCopyTooltip('Copy SFTP password')"
+										native-type="button"
+										size="lg"
+										class="min-w-0 grow !justify-between text-left"
+										:disabled="!canWriteFiles"
+										@click="copyToClipboard('Password', server?.sftp_password)"
+									>
+										<span class="min-w-0 truncate text-base font-semibold text-primary">
+											{{
+												showPassword
+													? server?.sftp_password
+													: '*'.repeat(server?.sftp_password?.length ?? 0)
+											}}
+										</span>
+										<ClipboardCopyIcon class="size-5 shrink-0 text-secondary" aria-hidden="true" />
+									</Button>
+									<IconButton
+										v-tooltip="passwordVisibilityTooltip"
+										:label="passwordVisibilityTooltip"
+										size="lg"
+										:disabled="!canWriteFiles"
+										@click="togglePasswordVisibility"
+									>
+										<EyeIcon v-if="showPassword" />
+										<EyeOffIcon v-else />
+									</IconButton>
 								</div>
 							</div>
 						</div>
@@ -107,21 +94,21 @@
 						<label for="startup-command-field" class="mb-0.5 flex flex-col gap-2">
 							<span class="text-lg font-semibold text-contrast">Startup command</span>
 						</label>
-						<ButtonStyled v-if="startupCommand !== defaultStartupCommand" type="transparent">
-							<button
-								v-tooltip="advancedActionTooltip"
-								:disabled="
-									isStartupLoading ||
-									startupCommand === defaultStartupCommand ||
-									!canUseAdvancedSettings
-								"
-								class="relative !w-full sm:!w-auto"
-								@click="resetToDefault"
-							>
-								<UpdatedIcon class="h-5 w-5" />
-								Default
-							</button>
-						</ButtonStyled>
+						<Button
+							v-if="startupCommand !== defaultStartupCommand"
+							v-tooltip="advancedActionTooltip"
+							type="quiet"
+							:disabled="
+								isStartupLoading ||
+								startupCommand === defaultStartupCommand ||
+								!canUseAdvancedSettings
+							"
+							class="relative !w-full sm:!w-auto"
+							@click="resetToDefault"
+						>
+							<UpdatedIcon class="h-5 w-5" />
+							Default
+						</Button>
 					</div>
 					<div class="relative">
 						<StyledInput
@@ -157,6 +144,7 @@
 							:options="displayedJavaVersions"
 							:display-value="javaVersionLabel ?? 'Java Version'"
 							:disabled="isStartupLoading || !canUseAdvancedSettings"
+							trigger-type="base"
 						>
 							<template #dropdown-footer>
 								<button
@@ -194,6 +182,7 @@
 							:options="JRE_VENDORS"
 							:display-value="jreVendorLabel ?? 'Runtime'"
 							:disabled="isStartupLoading || !canUseAdvancedSettings"
+							trigger-type="base"
 						/>
 						<div
 							v-if="isStartupLoading"
@@ -219,7 +208,7 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import {
-	CopyIcon,
+	ClipboardCopyIcon,
 	ExternalIcon,
 	EyeIcon,
 	EyeOffIcon,
@@ -229,7 +218,8 @@ import {
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import { ButtonStyled, Combobox, StyledInput } from '#ui/components'
+import { Combobox, StyledInput } from '#ui/components'
+import { Button, ButtonLink, IconButton } from '#ui/components/base/buttons'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
@@ -244,7 +234,6 @@ const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const { canUseAdvancedSettings, canWriteFiles, permissionDeniedMessage } = useServerPermissions()
 
-// SFTP state
 const showPassword = ref(false)
 const sftpUrl = computed(() => `sftp://${server.value?.sftp_username}@${server.value?.sftp_host}`)
 const advancedActionTooltip = computed(() =>
@@ -257,6 +246,13 @@ const sftpActionTooltip = computed(() =>
 )
 const sftpCopyTooltip = (label: string) =>
 	canWriteFiles.value ? label : permissionDeniedMessage.value
+const passwordVisibilityTooltip = computed(() =>
+	canWriteFiles.value
+		? showPassword.value
+			? 'Hide password'
+			: 'Show password'
+		: permissionDeniedMessage.value,
+)
 
 function handleSftpLaunchClick(event: MouseEvent) {
 	if (canWriteFiles.value) return
@@ -272,6 +268,11 @@ const copyToClipboard = (name: string, textToCopy?: string) => {
 	})
 }
 
+function togglePasswordVisibility() {
+	if (!canWriteFiles.value) return
+	showPassword.value = !showPassword.value
+}
+
 // Startup state
 const startupQueryKey = computed(() => ['servers', 'startup', 'v1', serverId, worldId.value])
 
@@ -281,11 +282,6 @@ const { data: startupData, isLoading: isStartupLoading } = useQuery({
 	enabled: computed(() => worldId.value !== null),
 })
 
-function togglePasswordVisibility() {
-	if (!canWriteFiles.value) return
-	showPassword.value = !showPassword.value
-}
-
 const JAVA_VERSIONS = [
 	{ value: 8, label: 'Java 8' },
 	{ value: 11, label: 'Java 11' },
@@ -427,15 +423,3 @@ function resetToDefault() {
 	startupCommand.value = defaultStartupCommand.value
 }
 </script>
-
-<style scoped>
-.copy-field {
-	@apply flex h-10 cursor-pointer items-center justify-between gap-2 rounded-lg bg-button-bg px-3 pr-1.5 transition-all;
-	@apply hover:brightness-125 active:scale-95;
-}
-
-.copy-field-has-button {
-	@apply flex h-10 cursor-pointer items-center justify-between gap-2 rounded-lg bg-button-bg px-3 pr-1.5 transition-all;
-	@apply [&:hover:not(:has(button:hover))]:brightness-125 [&:active:not(:has(button:active))]:scale-95;
-}
-</style>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
index 3d943bd823..21275870a7 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -22,17 +22,16 @@
 						formatMessage(messages.resetServerTitle)
 					}}</span>
 					<div>
-						<ButtonStyled color="red">
-							<button
-								v-tooltip="resetServerDisabledTooltip"
-								class="!shadow-none"
-								:disabled="resetServerDisabled"
-								@click="showResetServerModal"
-							>
-								<RotateCounterClockwiseIcon class="size-5" />
-								{{ formatMessage(commonMessages.resetServerButton) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="resetServerDisabledTooltip"
+							type="colored"
+							color="red"
+							:disabled="resetServerDisabled"
+							@click="showResetServerModal"
+						>
+							<RotateCounterClockwiseIcon class="size-5" />
+							{{ formatMessage(commonMessages.resetServerButton) }}
+						</Button>
 					</div>
 					<span class="text-primary">
 						{{ formatMessage(messages.resetServerDescription) }}
@@ -59,17 +58,16 @@
 				{{ formatMessage(messages.supportOptionsTitle) }}
 			</span>
 			<div>
-				<ButtonStyled color="red">
-					<button
-						v-tooltip="supportResetToOnboardingTooltip"
-						class="!shadow-none"
-						:disabled="supportResetToOnboardingDisabled"
-						@click="showResetToOnboardingModal"
-					>
-						<RotateCounterClockwiseIcon class="size-5" />
-						{{ formatMessage(messages.resetToOnboardingButton) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="supportResetToOnboardingTooltip"
+					type="colored"
+					color="red"
+					:disabled="supportResetToOnboardingDisabled"
+					@click="showResetToOnboardingModal"
+				>
+					<RotateCounterClockwiseIcon class="size-5" />
+					{{ formatMessage(messages.resetToOnboardingButton) }}
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -79,7 +77,6 @@
 import type { Archon } from '@modrinth/api-client'
 import { RotateCounterClockwiseIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	commonMessages,
 	ConfirmModal,
 	defineMessages,
@@ -103,6 +100,7 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
 import { injectFilePicker } from '#ui/providers/file-picker'
 
 const debug = useDebugLogger('LoaderPage')
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index dd8091b289..9a91d08000 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -16,18 +16,16 @@
 							placeholder="e.g. Secondary allocation"
 						/>
 						<div class="mb-1 mt-4 flex justify-end gap-2.5">
-							<ButtonStyled>
-								<button @click="editAllocationModal?.hide()">Cancel</button>
-							</ButtonStyled>
-							<ButtonStyled color="brand">
-								<button
-									v-tooltip="advancedActionTooltip"
-									:disabled="!editAllocationName || creatingAllocation || !canUseAdvancedSettings"
-									type="submit"
-								>
-									<SaveIcon /> Update allocation
-								</button>
-							</ButtonStyled>
+							<Button @click="editAllocationModal?.hide()">Cancel</Button>
+							<Button
+								v-tooltip="advancedActionTooltip"
+								type="colored"
+								color="brand"
+								:disabled="!editAllocationName || creatingAllocation || !canUseAdvancedSettings"
+								native-type="submit"
+							>
+								<SaveIcon /> Update allocation
+							</Button>
 						</div>
 					</form>
 				</NewModal>
@@ -61,9 +59,14 @@
 								allocationsError?.message ?? 'Unknown error'
 							}}</span>
 						</p>
-						<ButtonStyled size="large" color="brand" @click="() => refetchAllocations()">
-							<button class="mt-6 !w-full">Retry</button>
-						</ButtonStyled>
+						<Button
+							type="colored"
+							color="brand"
+							size="xl"
+							class="mt-6 !w-full"
+							@click="() => refetchAllocations()"
+							>Retry</Button
+						>
 					</div>
 				</div>
 			</div>
@@ -83,16 +86,16 @@
 								placeholder="e.g. Secondary allocation"
 							/>
 
-							<ButtonStyled color="brand">
-								<button
-									v-tooltip="createAllocationTooltip"
-									:disabled="!createAllocationName || creatingAllocation || !canUseAdvancedSettings"
-									@click="addNewAllocation"
-								>
-									<PlusIcon />
-									<span>Create allocation</span>
-								</button>
-							</ButtonStyled>
+							<Button
+								v-tooltip="createAllocationTooltip"
+								type="colored"
+								color="brand"
+								:disabled="!createAllocationName || creatingAllocation || !canUseAdvancedSettings"
+								@click="addNewAllocation"
+							>
+								<PlusIcon />
+								<span>Create allocation</span>
+							</Button>
 						</div>
 
 						<Table :columns="allocationColumns" :data="allocationRows" row-key="port">
@@ -105,30 +108,33 @@
 							</template>
 							<template #cell-actions="{ row }">
 								<div class="flex items-center justify-end gap-2">
-									<ButtonStyled type="transparent" circular>
-										<button @click="copyText(`${serverIP}:${row.port}`)">
-											<CopyIcon />
-										</button>
-									</ButtonStyled>
+									<IconButton
+										type="quiet"
+										label="Copy"
+										@click="copyText(`${serverIP}:${row.port}`)"
+									>
+										<CopyIcon />
+									</IconButton>
 									<template v-if="!row.primary">
-										<ButtonStyled type="transparent" circular>
-											<button
-												v-tooltip="advancedActionTooltip"
-												:disabled="!canUseAdvancedSettings"
-												@click="showEditAllocationModal(row.port)"
-											>
-												<PencilIcon />
-											</button>
-										</ButtonStyled>
-										<ButtonStyled type="outlined" circular color="red">
-											<button
-												v-tooltip="advancedActionTooltip"
-												:disabled="!canUseAdvancedSettings"
-												@click="showConfirmDeleteModal(row.port)"
-											>
-												<TrashIcon />
-											</button>
-										</ButtonStyled>
+										<IconButton
+											v-tooltip="advancedActionTooltip"
+											type="quiet"
+											:label="advancedActionTooltip"
+											:disabled="!canUseAdvancedSettings"
+											@click="showEditAllocationModal(row.port)"
+										>
+											<PencilIcon />
+										</IconButton>
+										<IconButton
+											v-tooltip="advancedActionTooltip"
+											type="outlined"
+											:label="advancedActionTooltip"
+											:disabled="!canUseAdvancedSettings"
+											class="!text-red [&>svg]:!text-red !shadow-[inset_0_0_0_1px_var(--color-red)]"
+											@click="showConfirmDeleteModal(row.port)"
+										>
+											<TrashIcon />
+										</IconButton>
 									</template>
 								</div>
 							</template>
@@ -153,16 +159,14 @@
 								:placeholder="exampleDomain"
 							/>
 
-							<ButtonStyled>
-								<button
-									class="!w-full sm:!w-auto"
-									:disabled="userDomain == ''"
-									@click="exportDnsRecords"
-								>
-									<UploadIcon />
-									<span>Export</span>
-								</button>
-							</ButtonStyled>
+							<Button
+								class="!w-full sm:!w-auto"
+								:disabled="userDomain == ''"
+								@click="exportDnsRecords"
+							>
+								<UploadIcon />
+								<span>Export</span>
+							</Button>
 						</div>
 
 						<Table :columns="dnsColumns" :data="dnsRecords">
@@ -223,8 +227,9 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
-import { ButtonStyled, ConfirmModal, NewModal, StyledInput, Table, TagItem } from '#ui/components'
+import { ConfirmModal, NewModal, StyledInput, Table, TagItem } from '#ui/components'
 import type { TableColumn } from '#ui/components/base'
+import { Button, IconButton } from '#ui/components/base/buttons'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
 	injectModrinthClient,
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index 9c3b008a6b..608994520e 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -13,19 +13,26 @@
 
 			<template #actions>
 				<div class="flex justify-end gap-2">
-					<ButtonStyled type="outlined">
-						<button type="button" :disabled="isBlockingUser" @click="blockUserModal?.hide()">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="red">
-						<button type="button" :disabled="isBlockingUser" @click="confirmBlockUser">
-							<SpinnerIcon v-if="isBlockingUser" class="animate-spin" />
-							<BanIcon v-else />
-							{{ formatMessage(messages.blockButton) }}
-						</button>
-					</ButtonStyled>
+					<Button
+						type="outlined"
+						native-type="button"
+						:disabled="isBlockingUser"
+						@click="blockUserModal?.hide()"
+					>
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="red"
+						native-type="button"
+						:disabled="isBlockingUser"
+						@click="confirmBlockUser"
+					>
+						<SpinnerIcon v-if="isBlockingUser" class="animate-spin" />
+						<BanIcon v-else />
+						{{ formatMessage(messages.blockButton) }}
+					</Button>
 				</div>
 			</template>
 		</NewModal>
@@ -42,28 +49,26 @@
 					:placeholder="formatMessage(messages.selectRolePlaceholder)"
 				/>
 				<div class="flex justify-end gap-2">
-					<ButtonStyled>
-						<button type="button" @click="cancelRoleEdit">
-							<XIcon />
-							{{ formatMessage(commonMessages.cancelButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button
-							type="button"
-							:disabled="!selectedRole || selectedRole === user.role || isSavingRole"
-							@click="saveRoleEdit"
-						>
-							<template v-if="isSavingRole">
-								<SpinnerIcon class="animate-spin" />
-								{{ formatMessage(messages.savingLabel) }}
-							</template>
-							<template v-else>
-								<SaveIcon />
-								{{ formatMessage(commonMessages.saveChangesButton) }}
-							</template>
-						</button>
-					</ButtonStyled>
+					<Button native-type="button" @click="cancelRoleEdit">
+						<XIcon />
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						native-type="button"
+						:disabled="!selectedRole || selectedRole === user.role || isSavingRole"
+						@click="saveRoleEdit"
+					>
+						<template v-if="isSavingRole">
+							<SpinnerIcon class="animate-spin" />
+							{{ formatMessage(messages.savingLabel) }}
+						</template>
+						<template v-else>
+							<SaveIcon />
+							{{ formatMessage(commonMessages.saveChangesButton) }}
+						</template>
+					</Button>
 				</div>
 			</div>
 		</NewModal>
@@ -192,7 +197,7 @@
 			</div>
 		</NewModal>
 
-		<NormalPage :sidebar="sidebarPosition">
+		<NormalPage :sidebar="sidebarPosition" :full-width="variant === 'app'">
 			<template #header>
 				<UserPageHeader
 					:user="user"
@@ -284,7 +289,11 @@
 							}"
 							:layout="displayMode === 'list' ? 'list' : 'grid'"
 							:status="project.status"
-						/>
+						>
+							<template v-if="$slots['project-actions']" #actions>
+								<slot name="project-actions" :project="project" />
+							</template>
+						</ProjectCard>
 					</ProjectCardList>
 
 					<EmptyState
@@ -296,11 +305,9 @@
 						"
 					>
 						<template v-if="isSelf" #actions>
-							<ButtonStyled color="brand">
-								<button type="button" @click="createProject">
-									{{ formatMessage(messages.createProjectButton) }}
-								</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" native-type="button" @click="createProject">
+								{{ formatMessage(messages.createProjectButton) }}
+							</Button>
 						</template>
 					</EmptyState>
 
@@ -380,11 +387,9 @@
 						"
 					>
 						<template v-if="isSelf" #actions>
-							<ButtonStyled color="brand">
-								<button type="button" @click="createCollection">
-									{{ formatMessage(messages.createCollectionButton) }}
-								</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" native-type="button" @click="createCollection">
+								{{ formatMessage(messages.createCollectionButton) }}
+							</Button>
 						</template>
 					</EmptyState>
 				</div>
@@ -437,11 +442,9 @@
 			:description="formatMessage(messages.userLoadErrorDescription)"
 		>
 			<template #actions>
-				<ButtonStyled color="brand">
-					<button type="button" @click="retryQueries">
-						{{ formatMessage(commonMessages.retryButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" native-type="button" @click="retryQueries">
+					{{ formatMessage(commonMessages.retryButton) }}
+				</Button>
 			</template>
 		</EmptyState>
 	</div>
@@ -473,7 +476,7 @@ import { useRoute, useRouter } from 'vue-router'
 import Admonition from '#ui/components/base/Admonition.vue'
 import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import Combobox from '#ui/components/base/Combobox.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
diff --git a/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue b/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
index 1cd295cdcc..f38537a444 100644
--- a/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
+++ b/packages/ui/src/layouts/wrapped/AccountProfileSettings.vue
@@ -15,12 +15,10 @@
 			</div>
 		</template>
 		<template #actions>
-			<ButtonStyled color="brand" size="large">
-				<button type="button" @click="requestSignIn">
-					<LogInIcon aria-hidden="true" />
-					{{ formatMessage(commonMessages.signInButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" size="xl" native-type="button" @click="requestSignIn">
+				<LogInIcon aria-hidden="true" />
+				{{ formatMessage(commonMessages.signInButton) }}
+			</Button>
 		</template>
 	</EmptyState>
 
@@ -56,30 +54,33 @@
 				<div class="flex items-center gap-4">
 					<Avatar :src="displayedAvatarUrl" size="md" circle :alt="auth.user.value.username" />
 					<div class="flex flex-col gap-2">
-						<ButtonStyled>
-							<FileInput
-								:max-size="262144"
-								:show-icon="true"
-								class="button-like !shadow-none"
-								:prompt="formatMessage(commonMessages.uploadImageButton)"
-								accept="image/png,image/jpeg,image/gif,image/webp"
-								@change="showPreviewImage"
-							>
-								<UploadIcon aria-hidden="true" />
-							</FileInput>
-						</ButtonStyled>
-						<ButtonStyled v-if="avatarUrl && !pendingAvatarDeletion">
-							<button type="button" class="!shadow-none" @click="removePreviewImage">
-								<TrashIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.removeImageButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-if="avatarFile || pendingAvatarDeletion">
-							<button type="button" class="!shadow-none" @click="resetAvatar">
-								<UndoIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.resetButton) }}
-							</button>
-						</ButtonStyled>
+						<FileButton
+							:max-size="262144"
+							:prompt="formatMessage(commonMessages.uploadImageButton)"
+							accept="image/png,image/jpeg,image/gif,image/webp"
+							size="md"
+							@change="showPreviewImage"
+						>
+							<UploadIcon aria-hidden="true" />
+						</FileButton>
+						<Button
+							v-if="avatarUrl && !pendingAvatarDeletion"
+							native-type="button"
+							size="md"
+							@click="removePreviewImage"
+						>
+							<TrashIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.removeImageButton) }}
+						</Button>
+						<Button
+							v-if="avatarFile || pendingAvatarDeletion"
+							native-type="button"
+							size="md"
+							@click="resetAvatar"
+						>
+							<UndoIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.resetButton) }}
+						</Button>
 					</div>
 				</div>
 			</div>
@@ -135,9 +136,8 @@ import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button, FileButton } from '#ui/components/base/buttons'
 import EmptyState from '#ui/components/base/EmptyState.vue'
-import FileInput from '#ui/components/base/FileInput.vue'
 import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import { defineMessages, useVIntl } from '#ui/composables'
diff --git a/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue b/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
index 6d2f4f5d8c..240744fa31 100644
--- a/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
+++ b/packages/ui/src/layouts/wrapped/AccountSocialSettings.vue
@@ -15,12 +15,10 @@
 			</div>
 		</template>
 		<template #actions>
-			<ButtonStyled color="brand" size="large">
-				<button type="button" @click="requestSignIn">
-					<LogInIcon aria-hidden="true" />
-					{{ formatMessage(commonMessages.signInButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" size="xl" native-type="button" @click="requestSignIn">
+				<LogInIcon aria-hidden="true" />
+				{{ formatMessage(commonMessages.signInButton) }}
+			</Button>
 		</template>
 	</EmptyState>
 
@@ -112,11 +110,9 @@
 								</div>
 								<div v-else-if="loadError" class="flex flex-col items-center gap-3">
 									<span>{{ formatMessage(messages.loadError) }}</span>
-									<ButtonStyled type="outlined">
-										<button type="button" @click="retry">
-											{{ formatMessage(commonMessages.retryButton) }}
-										</button>
-									</ButtonStyled>
+									<Button type="outlined" native-type="button" @click="retry">
+										{{ formatMessage(commonMessages.retryButton) }}
+									</Button>
 								</div>
 								<span v-else>{{ formatMessage(messages.noBlockedUsers) }}</span>
 							</div>
@@ -145,25 +141,24 @@
 
 						<template #cell-actions="{ row }">
 							<div class="flex justify-end">
-								<ButtonStyled type="outlined">
-									<button
-										type="button"
-										:disabled="unblockingUserId !== null"
-										:aria-label="
-											formatMessage(messages.unblockUserAriaLabel, {
-												username: row.username,
-											})
-										"
-										@click="unblock(row)"
-									>
-										<SpinnerIcon
-											v-if="unblockingUserId === row.id"
-											class="animate-spin"
-											aria-hidden="true"
-										/>
-										{{ formatMessage(messages.unblockButton) }}
-									</button>
-								</ButtonStyled>
+								<Button
+									type="outlined"
+									native-type="button"
+									:disabled="unblockingUserId !== null"
+									:aria-label="
+										formatMessage(messages.unblockUserAriaLabel, {
+											username: row.username,
+										})
+									"
+									@click="unblock(row)"
+								>
+									<SpinnerIcon
+										v-if="unblockingUserId === row.id"
+										class="animate-spin"
+										aria-hidden="true"
+									/>
+									{{ formatMessage(messages.unblockButton) }}
+								</Button>
 							</div>
 						</template>
 					</Table>
@@ -195,7 +190,7 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import Chips from '#ui/components/base/Chips.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import Table, { type TableColumn } from '#ui/components/base/Table.vue'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
index 96cc63944a..b85f8d8fe3 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
@@ -14,23 +14,25 @@
 					v-model="roleFilter"
 					:options="roleFilterOptions"
 					:display-value="selectedRoleFilterLabel"
-					trigger-class="min-w-[225px] !h-10 !min-h-10 !py-0"
+					trigger-size="lg"
+					trigger-class="min-w-[225px]"
 				>
 					<template #prefix>
 						<FilterIcon class="size-5 text-secondary" aria-hidden="true" />
 					</template>
 				</Combobox>
-				<ButtonStyled color="brand">
-					<button
-						v-tooltip="manageUsersActionTooltip"
-						class="!h-10 w-full md:w-fit"
-						:disabled="!canManageUsers"
-						@click="grantAccessModal?.show($event)"
-					>
-						<UserPlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.inviteFriends) }}
-					</button>
-				</ButtonStyled>
+				<Button
+					v-tooltip="manageUsersActionTooltip"
+					type="colored"
+					color="brand"
+					size="lg"
+					class="w-full md:w-fit"
+					:disabled="!canManageUsers"
+					@click="grantAccessModal?.show($event)"
+				>
+					<UserPlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.inviteFriends) }}
+				</Button>
 			</div>
 		</div>
 
@@ -113,7 +115,7 @@ import { FilterIcon, SearchIcon, UserPlusIcon } from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import DropdownFilterBar from '#ui/components/base/DropdownFilterBar.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
index bcdebf6392..f231ba7956 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
@@ -42,22 +42,22 @@
 		</div>
 
 		<div class="w-full">
-			<ButtonStyled v-if="uploading" size="large">
-				<button class="ml-auto" disabled>
-					<SpinnerIcon class="animate-spin" />
-					{{ formatMessage(messages.uploadingProgress, { percent: uploadPercent }) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled v-else color="brand" size="large">
-				<button
-					v-tooltip="!canSetup ? permissionDeniedMessage : undefined"
-					class="ml-auto"
-					:disabled="!canSetup"
-					@click="openModal"
-				>
-					{{ formatMessage(messages.setupServerButton) }} <RightArrowIcon />
-				</button>
-			</ButtonStyled>
+			<Button v-if="uploading" size="xl" class="ml-auto" disabled>
+				<SpinnerIcon class="animate-spin" />
+				{{ formatMessage(messages.uploadingProgress, { percent: uploadPercent }) }}
+			</Button>
+			<Button
+				v-else
+				v-tooltip="!canSetup ? permissionDeniedMessage : undefined"
+				type="colored"
+				color="brand"
+				size="xl"
+				class="ml-auto"
+				:disabled="!canSetup"
+				@click="openModal"
+			>
+				{{ formatMessage(messages.setupServerButton) }} <RightArrowIcon />
+			</Button>
 		</div>
 
 		<CreationFlowModal
@@ -80,7 +80,6 @@
 import type { Archon } from '@modrinth/api-client'
 import { GlobeIcon, PackageIcon, RightArrowIcon, SpinnerIcon, UsersIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
@@ -93,6 +92,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import type { CreationFlowContextValue } from '#ui/components'
 import { CreationFlowModal } from '#ui/components'
+import { Button } from '#ui/components/base/buttons'
 import { injectModrinthServerContext } from '#ui/providers'
 
 const client = injectModrinthClient()
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
index b6e8da3f92..2e313a3877 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -19,9 +19,9 @@
 					<p>
 						<span class="break-all font-mono">{{ error.message }}</span>
 					</p>
-					<ButtonStyled size="large" color="brand" @click="refetch">
-						<button class="mt-6 !w-full">Retry</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" size="xl" class="mt-6 !w-full" @click="refetch"
+						>Retry</Button
+					>
 				</div>
 			</div>
 		</div>
@@ -71,16 +71,16 @@
 							<template #all>{{ formatMessage(commonMessages.allProjectType) }}</template>
 						</FilterPills>
 					</div>
-					<ButtonStyled color="brand">
-						<button
-							v-tooltip="backupCreationDisabled"
-							:disabled="!!backupCreationDisabled"
-							@click="showCreateModel"
-						>
-							<PlusIcon class="size-5" />
-							{{ formatMessage(messages.createBackup) }}
-						</button>
-					</ButtonStyled>
+					<Button
+						v-tooltip="backupCreationDisabled"
+						type="colored"
+						color="brand"
+						:disabled="!!backupCreationDisabled"
+						@click="showCreateModel"
+					>
+						<PlusIcon class="size-5" />
+						{{ formatMessage(messages.createBackup) }}
+					</Button>
 				</div>
 
 				<div class="flex w-full flex-col gap-1.5">
@@ -95,17 +95,17 @@
 							:description="formatMessage(messages.emptyDescription)"
 						>
 							<template #actions>
-								<ButtonStyled color="brand">
-									<button
-										v-tooltip="backupCreationDisabled"
-										:disabled="!!backupCreationDisabled"
-										class="mx-auto w-min"
-										@click="showCreateModel"
-									>
-										<PlusIcon class="size-5" />
-										{{ formatMessage(messages.createBackup) }}
-									</button>
-								</ButtonStyled>
+								<Button
+									v-tooltip="backupCreationDisabled"
+									type="colored"
+									color="brand"
+									:disabled="!!backupCreationDisabled"
+									class="mx-auto w-min"
+									@click="showCreateModel"
+								>
+									<PlusIcon class="size-5" />
+									{{ formatMessage(messages.createBackup) }}
+								</Button>
 							</template>
 						</EmptyState>
 						<EmptyState
@@ -115,11 +115,9 @@
 							:description="formatMessage(messages.filteredEmptyDescription)"
 						>
 							<template #actions>
-								<ButtonStyled type="outlined">
-									<button @click="clearBackupFilters">
-										{{ formatMessage(messages.clearFilters) }}
-									</button>
-								</ButtonStyled>
+								<Button type="outlined" @click="clearBackupFilters">
+									{{ formatMessage(messages.clearFilters) }}
+								</Button>
 							</template>
 						</EmptyState>
 					</div>
@@ -198,30 +196,30 @@
 							}}
 						</span>
 						<div class="mx-1 h-6 w-px bg-surface-5" />
-						<ButtonStyled type="transparent">
-							<button
-								type="button"
-								:disabled="isBulkOperating"
-								:class="{ 'pointer-events-none opacity-60': isBulkOperating }"
-								@click="deselectAll"
-							>
-								{{ formatMessage(commonMessages.clearButton) }}
-							</button>
-						</ButtonStyled>
+						<Button
+							type="quiet"
+							native-type="button"
+							:disabled="isBulkOperating"
+							:class="{ 'pointer-events-none opacity-60': isBulkOperating }"
+							@click="deselectAll"
+						>
+							{{ formatMessage(commonMessages.clearButton) }}
+						</Button>
 					</div>
 
 					<div v-if="!isBulkOperating" class="ml-auto flex items-center gap-0.5">
-						<ButtonStyled type="transparent" color="red" hover-color-fill="background">
-							<button
-								v-tooltip="!canManageBackups ? permissionDeniedMessage : undefined"
-								type="button"
-								:disabled="!canManageBackups"
-								@click="confirmBulkDelete"
-							>
-								<TrashIcon />
-								<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
-							</button>
-						</ButtonStyled>
+						<Button
+							v-tooltip="!canManageBackups ? permissionDeniedMessage : undefined"
+							type="quiet"
+							color="red"
+							native-type="button"
+							:disabled="!canManageBackups"
+							class="hover:!bg-red focus-visible:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!text-[var(--color-accent-contrast)]"
+							@click="confirmBulkDelete"
+						>
+							<TrashIcon />
+							<span class="bar-label">{{ formatMessage(commonMessages.deleteLabel) }}</span>
+						</Button>
 					</div>
 
 					<div v-else class="ml-auto flex items-center" aria-live="polite">
@@ -273,7 +271,7 @@ import type { Component } from 'vue'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import FilterPills, { type FilterPillOption } from '#ui/components/base/FilterPills.vue'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index d22ac2dac4..f85d23337c 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -75,14 +75,17 @@
 						</li>
 					</ul>
 				</div>
-				<ButtonStyled size="large" type="standard" color="brand">
-					<AutoLink class="mt-6 !w-full" to="https://support.modrinth.com">{{
-						formatMessage(messages.contactSupportButton)
-					}}</AutoLink>
-				</ButtonStyled>
-				<ButtonStyled size="large" @click="() => router.go(0)">
-					<button class="mt-3 !w-full">{{ formatMessage(messages.reloadButton) }}</button>
-				</ButtonStyled>
+				<ButtonLink
+					type="colored"
+					color="brand"
+					size="xl"
+					class="mt-6 !w-full"
+					to="https://support.modrinth.com"
+					>{{ formatMessage(messages.contactSupportButton) }}</ButtonLink
+				>
+				<Button size="xl" class="mt-3 !w-full" @click="() => router.go(0)">{{
+					formatMessage(messages.reloadButton)
+				}}</Button>
 			</div>
 		</div>
 
@@ -106,12 +109,10 @@
 						:placeholder="formatMessage(messages.searchPlaceholder, { count: filteredData.length })"
 						wrapper-class="w-full md:w-72"
 					/>
-					<ButtonStyled type="standard" color="brand">
-						<button @click="openPurchaseModal">
-							<PlusIcon />
-							{{ formatMessage(messages.newServerButton) }}
-						</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand" @click="openPurchaseModal">
+						<PlusIcon />
+						{{ formatMessage(messages.newServerButton) }}
+					</Button>
 				</div>
 			</div>
 
@@ -231,8 +232,6 @@
 import type { Archon, Labrinth } from '@modrinth/api-client'
 import { HammerIcon, LoaderCircleIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
 import {
-	AutoLink,
-	ButtonStyled,
 	CopyCode,
 	defineMessages,
 	injectAuth,
@@ -255,6 +254,7 @@ import type Stripe from 'stripe'
 import { type ComponentPublicInstance, computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { Button, ButtonLink } from '#ui/components/base/buttons'
 import ServersUpgradeModalWrapper from '#ui/components/billing/ServersUpgradeModalWrapper.vue'
 import type { ServerListingOwner } from '#ui/components/servers/access'
 import MedalServerListing from '#ui/components/servers/marketing/MedalServerListing.vue'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index c781570242..dbf56d1b69 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -181,31 +181,30 @@
 								:auto-hide="false"
 								placement="bottom-end"
 							>
-								<ButtonStyled circular size="large">
-									<button
-										v-tooltip="showSettingsHint ? undefined : 'Server settings'"
-										type="button"
-										aria-label="Server settings"
-										@click="handleOpenServerSettings"
-									>
-										<SettingsIcon />
-									</button>
-								</ButtonStyled>
+								<IconButton
+									v-tooltip="showSettingsHint ? undefined : 'Server settings'"
+									size="xl"
+									label="Server settings"
+									native-type="button"
+									@click="handleOpenServerSettings"
+								>
+									<SettingsIcon />
+								</IconButton>
 								<template #popper>
 									<div class="grid grid-cols-[min-content] gap-1">
 										<div class="flex min-w-48 items-center justify-between gap-8">
 											<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 												{{ formatMessage(settingsHintMessages.title) }}
 											</h3>
-											<ButtonStyled size="small" circular>
-												<button
-													type="button"
-													:aria-label="formatMessage(settingsHintMessages.dismiss)"
-													@click="dismissSettingsHint"
-												>
-													<XIcon aria-hidden="true" />
-												</button>
-											</ButtonStyled>
+											<IconButton
+												class="!size-6"
+												size="xs"
+												:label="formatMessage(settingsHintMessages.dismiss)"
+												native-type="button"
+												@click="dismissSettingsHint"
+											>
+												<XIcon aria-hidden="true" />
+											</IconButton>
 										</div>
 										<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
 											{{ formatMessage(settingsHintMessages.description) }}
@@ -213,15 +212,15 @@
 									</div>
 								</template>
 							</Tooltip>
-							<ButtonStyled circular type="transparent" size="large">
-								<TeleportOverflowMenu
-									:options="serverMenuOptions"
-									:disabled="!!installError"
-									aria-label="More server options"
-								>
-									<MoreVerticalIcon aria-hidden="true" />
-								</TeleportOverflowMenu>
-							</ButtonStyled>
+							<TeleportOverflowMenu
+								type="quiet"
+								size="xl"
+								label="More server options"
+								:options="serverMenuOptions"
+								:disabled="!!installError"
+							>
+								<MoreVerticalIcon aria-hidden="true" />
+							</TeleportOverflowMenu>
 						</PageHeaderActions>
 					</template>
 				</PageHeader>
@@ -284,13 +283,11 @@
 												If you're stuck, please contact Modrinth Support with the information below:
 											</li>
 										</ul>
-										<ButtonStyled>
-											<button class="mt-2" @click="copyServerDebugInfo">
-												<CopyIcon v-if="!copied" />
-												<CheckIcon v-else />
-												Copy Debug Info
-											</button>
-										</ButtonStyled>
+										<Button class="mt-2" @click="copyServerDebugInfo">
+											<CopyIcon v-if="!copied" />
+											<CheckIcon v-else />
+											Copy Debug Info
+										</Button>
 									</div>
 									<div v-if="errorMessage.toLocaleLowerCase() === 'internal error'">
 										An internal error occurred while installing your server. Don't fret — try
@@ -310,25 +307,23 @@
 										v-if="errorTitle === 'Installation error'"
 										class="mt-2 flex flex-col gap-4 sm:flex-row"
 									>
-										<ButtonStyled v-if="errorLog">
-											<button @click="openInstallLog"><FileIcon />Open Installation Log</button>
-										</ButtonStyled>
-										<ButtonStyled>
-											<button @click="copyServerDebugInfo">
-												<CopyIcon v-if="!copied" />
-												<CheckIcon v-else />
-												Copy Debug Info
-											</button>
-										</ButtonStyled>
-										<ButtonStyled color="red" type="standard">
-											<button
-												class="whitespace-pre"
-												@click="openServerSettingsModal('installation')"
-											>
-												<RightArrowIcon />
-												Change Loader
-											</button>
-										</ButtonStyled>
+										<Button v-if="errorLog" @click="openInstallLog"
+											><FileIcon />Open Installation Log</Button
+										>
+										<Button @click="copyServerDebugInfo">
+											<CopyIcon v-if="!copied" />
+											<CheckIcon v-else />
+											Copy Debug Info
+										</Button>
+										<Button
+											type="colored"
+											color="red"
+											class="whitespace-pre"
+											@click="openServerSettingsModal('installation')"
+										>
+											<RightArrowIcon />
+											Change Loader
+										</Button>
 									</div>
 								</div>
 							</div>
@@ -430,7 +425,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button, IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
 import PageHeader from '#ui/components/base/page-header/index.vue'
@@ -438,7 +433,6 @@ import PageHeaderMetadata from '#ui/components/base/page-header/metadata/index.v
 import PageHeaderMetadataItem from '#ui/components/base/page-header/metadata/page-header-metadata-item.vue'
 import PageHeaderActions from '#ui/components/base/page-header/page-header-actions.vue'
 import ServerNotice from '#ui/components/base/ServerNotice.vue'
-import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
 import ServerPanelAdmonitions from '#ui/components/servers/admonitions/ServerPanelAdmonitions.vue'
 import LoaderIcon from '#ui/components/servers/icons/LoaderIcon.vue'
diff --git a/packages/ui/src/stories/add-stories.md b/packages/ui/src/stories/add-stories.md
index 19f83c3ba9..2132d4f14c 100644
--- a/packages/ui/src/stories/add-stories.md
+++ b/packages/ui/src/stories/add-stories.md
@@ -153,16 +153,14 @@ For components that need user interaction to show:
 ```typescript
 export const Default: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Button, NewModal },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			return { modalRef }
 		},
 		template: /* html */ `
             <div>
-                <ButtonStyled @click="modalRef?.show()">
-                    <button>Open Modal</button>
-                </ButtonStyled>
+				<Button @click="modalRef?.show()">Open Modal</Button>
                 <NewModal ref="modalRef" header="Example Modal">
                     <p>Modal content</p>
                 </NewModal>
@@ -199,10 +197,10 @@ Components should use relative imports, not the package alias:
 
 ```typescript
 // ❌ BAD - Causes circular dependency in Storybook
-import { ButtonStyled } from '@modrinth/ui'
+import { Button } from '@modrinth/ui'
 
 // ✅ GOOD - Use relative imports
-import ButtonStyled from '../base/ButtonStyled.vue'
+import Button from '../components/base/buttons/Button.vue'
 ```
 
 ### 2. Object/Array Prop Defaults Must Be Factory Functions
diff --git a/packages/ui/src/stories/base/Admonition.stories.ts b/packages/ui/src/stories/base/Admonition.stories.ts
index 413e2a1b6d..bcd6894084 100644
--- a/packages/ui/src/stories/base/Admonition.stories.ts
+++ b/packages/ui/src/stories/base/Admonition.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
 import Admonition from '../../components/base/Admonition.vue'
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 
 const meta = {
 	title: 'Base/Admonition',
@@ -78,7 +78,7 @@ export const HeaderWithTimestamp: Story = {
 
 export const WithTopRightActions: Story = {
 	render: () => ({
-		components: { Admonition, ButtonStyled },
+		components: { Admonition, Button },
 		template: /*html*/ `
 			<div style="display: flex; flex-direction: column; gap: 1rem;">
 				<Admonition
@@ -88,9 +88,7 @@ export const WithTopRightActions: Story = {
 				>
 					Uploading server files...
 					<template #top-right-actions>
-						<ButtonStyled type="outlined" color="blue">
-							<button class="!border" type="button">Cancel</button>
-						</ButtonStyled>
+						<Button type="outlined" class="!border !text-blue [&>svg]:!text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)]" native-type="button">Cancel</Button>
 					</template>
 				</Admonition>
 				<Admonition
@@ -100,9 +98,7 @@ export const WithTopRightActions: Story = {
 				>
 					Something went wrong while extracting the archive.
 					<template #top-right-actions>
-						<ButtonStyled color="red">
-							<button type="button">Retry</button>
-						</ButtonStyled>
+						<Button type="colored" color="red" native-type="button">Retry</Button>
 					</template>
 				</Admonition>
 				<Admonition type="success" header="Extraction complete" :dismissible="true">
@@ -115,7 +111,7 @@ export const WithTopRightActions: Story = {
 
 export const WithProgressBar: Story = {
 	render: () => ({
-		components: { Admonition, ButtonStyled },
+		components: { Admonition, Button },
 		template: /*html*/ `
 			<div style="display: flex; flex-direction: column; gap: 1rem;">
 				<Admonition
@@ -127,9 +123,7 @@ export const WithProgressBar: Story = {
 				>
 					128 KB / 1.2 MB (45%)
 					<template #top-right-actions>
-						<ButtonStyled type="outlined" color="blue">
-							<button class="!border" type="button">Cancel</button>
-						</ButtonStyled>
+						<Button type="outlined" class="!border !text-blue [&>svg]:!text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)]" native-type="button">Cancel</Button>
 					</template>
 				</Admonition>
 				<Admonition
@@ -141,9 +135,7 @@ export const WithProgressBar: Story = {
 				>
 					24 MB extracted — config/settings.yml
 					<template #top-right-actions>
-						<ButtonStyled type="outlined" color="blue">
-							<button class="!border" type="button">Cancel</button>
-						</ButtonStyled>
+						<Button type="outlined" class="!border !text-blue [&>svg]:!text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)]" native-type="button">Cancel</Button>
 					</template>
 				</Admonition>
 				<Admonition
diff --git a/packages/ui/src/stories/base/Button.stories.ts b/packages/ui/src/stories/base/Button.stories.ts
deleted file mode 100644
index 8c58271e03..0000000000
--- a/packages/ui/src/stories/base/Button.stories.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import Button from '../../components/base/Button.vue'
-
-const meta = {
-	title: 'Base/Button',
-	component: Button,
-	render: (args) => ({
-		components: { Button },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
-			<Button v-bind="args">Click me</Button>
-		`,
-	}),
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const Primary: Story = {
-	args: {
-		color: 'primary',
-	},
-}
-
-export const Danger: Story = {
-	args: {
-		color: 'danger',
-	},
-}
-
-export const AllColors: Story = {
-	render: () => ({
-		components: { Button },
-		template: /*html*/ `
-			<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-				<Button color="default">Default</Button>
-				<Button color="primary">Primary</Button>
-				<Button color="danger">Danger</Button>
-				<Button color="red">Red</Button>
-				<Button color="orange">Orange</Button>
-				<Button color="green">Green</Button>
-				<Button color="blue">Blue</Button>
-				<Button color="purple">Purple</Button>
-			</div>
-		`,
-	}),
-}
-
-export const Large: Story = {
-	args: {
-		large: true,
-	},
-}
-
-export const Outline: Story = {
-	args: {
-		outline: true,
-	},
-}
-
-export const Transparent: Story = {
-	args: {
-		transparent: true,
-	},
-}
-
-export const Disabled: Story = {
-	args: {
-		disabled: true,
-	},
-}
-
-export const AsLink: Story = {
-	args: {
-		link: 'https://modrinth.com',
-		external: true,
-	},
-}
diff --git a/packages/ui/src/stories/base/ButtonStyled.stories.ts b/packages/ui/src/stories/base/ButtonStyled.stories.ts
deleted file mode 100644
index 852ceab118..0000000000
--- a/packages/ui/src/stories/base/ButtonStyled.stories.ts
+++ /dev/null
@@ -1,226 +0,0 @@
-import { DownloadIcon, HeartIcon, SettingsIcon } from '@modrinth/assets'
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
-
-const colors = ['standard', 'brand', 'red', 'orange', 'green', 'blue', 'purple'] as const
-const types = [
-	'standard',
-	'outlined',
-	'transparent',
-	'highlight',
-	'highlight-colored-text',
-	'chip',
-] as const
-const sizes = ['small', 'standard', 'large'] as const
-
-const meta = {
-	title: 'Base/ButtonStyled',
-	component: ButtonStyled,
-	argTypes: {
-		color: {
-			control: 'select',
-			options: [...colors, 'medal-promo'],
-		},
-		size: {
-			control: 'select',
-			options: [...sizes],
-		},
-		type: {
-			control: 'select',
-			options: [...types],
-		},
-		circular: { control: 'boolean' },
-		colorFill: {
-			control: 'select',
-			options: ['auto', 'background', 'text', 'none'],
-		},
-		hoverColorFill: {
-			control: 'select',
-			options: ['auto', 'background', 'text', 'none'],
-		},
-		highlighted: { control: 'boolean' },
-		highlightedStyle: {
-			control: 'select',
-			options: ['main-nav-primary', 'main-nav-secondary'],
-		},
-	},
-	args: {
-		color: 'standard',
-		size: 'standard',
-		type: 'standard',
-		circular: false,
-		colorFill: 'auto',
-		hoverColorFill: 'auto',
-		highlighted: false,
-		highlightedStyle: 'main-nav-primary',
-	},
-	render: (args) => ({
-		components: { ButtonStyled, DownloadIcon },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
-			<ButtonStyled v-bind="args">
-				<button><DownloadIcon /> Button</button>
-			</ButtonStyled>
-		`,
-	}),
-} satisfies Meta<typeof ButtonStyled>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-	args: {
-		type: 'standard',
-	},
-}
-
-export const AllVariants: Story = {
-	render: () => ({
-		components: { ButtonStyled },
-		setup() {
-			return { colors, types }
-		},
-		template: /*html*/ `
-			<div style="overflow-x: auto;">
-				<table style="border-collapse: collapse; width: 100%;">
-					<thead>
-						<tr>
-							<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Color / Type</th>
-							<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="color in colors" :key="color" style="border-top: 1px solid var(--color-surface-5);">
-							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ color }}</td>
-							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
-								<ButtonStyled :color="color" :type="type">
-									<button>Button</button>
-								</ButtonStyled>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		`,
-	}),
-}
-
-export const AllVariantsHighlighted: Story = {
-	render: () => ({
-		components: { ButtonStyled },
-		setup() {
-			return { colors, types }
-		},
-		template: /*html*/ `
-			<div style="overflow-x: auto;">
-				<table style="border-collapse: collapse; width: 100%;">
-					<thead>
-						<tr>
-							<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Color / Type</th>
-							<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="color in colors" :key="color" style="border-top: 1px solid var(--color-surface-5);">
-							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ color }}</td>
-							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
-								<ButtonStyled :color="color" :type="type" highlighted>
-									<button>Button</button>
-								</ButtonStyled>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		`,
-	}),
-}
-
-export const Sizes: Story = {
-	render: () => ({
-		components: { ButtonStyled },
-		setup() {
-			return { sizes, types }
-		},
-		template: /*html*/ `
-			<div style="overflow-x: auto;">
-				<table style="border-collapse: collapse; width: 100%;">
-					<thead>
-						<tr>
-							<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Size / Type</th>
-							<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="size in sizes" :key="size" style="border-top: 1px solid var(--color-surface-5);">
-							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">{{ size }}</td>
-							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
-								<ButtonStyled :size="size" :type="type" color="brand">
-									<button>Button</button>
-								</ButtonStyled>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		`,
-	}),
-}
-
-export const WithIcons: Story = {
-	render: () => ({
-		components: { ButtonStyled, DownloadIcon, HeartIcon, SettingsIcon },
-		setup() {
-			return { types }
-		},
-		template: /*html*/ `
-			<div style="overflow-x: auto;">
-				<table style="border-collapse: collapse; width: 100%;">
-					<thead>
-						<tr>
-							<th style="padding: 0.5rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">Variant</th>
-							<th v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary);">{{ type }}</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr style="border-top: 1px solid var(--color-surface-5);">
-							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">Icon + text</td>
-							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
-								<ButtonStyled :type="type" color="brand">
-									<button><DownloadIcon /> Download</button>
-								</ButtonStyled>
-							</td>
-						</tr>
-						<tr style="border-top: 1px solid var(--color-surface-5);">
-							<td style="padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem;">Icon only</td>
-							<td v-for="type in types" :key="type" style="padding: 0.5rem 1rem; text-align: center;">
-								<ButtonStyled :type="type" color="brand" circular>
-									<button><HeartIcon /></button>
-								</ButtonStyled>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		`,
-	}),
-}
-
-export const Disabled: Story = {
-	render: () => ({
-		components: { ButtonStyled },
-		setup() {
-			return { types }
-		},
-		template: /*html*/ `
-			<div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
-				<ButtonStyled v-for="type in types" :key="type" :type="type" color="brand">
-					<button disabled>{{ type }}</button>
-				</ButtonStyled>
-			</div>
-		`,
-	}),
-}
diff --git a/packages/ui/src/stories/base/EmptyState.stories.ts b/packages/ui/src/stories/base/EmptyState.stories.ts
index f698148b9b..8fa5be7f23 100644
--- a/packages/ui/src/stories/base/EmptyState.stories.ts
+++ b/packages/ui/src/stories/base/EmptyState.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import EmptyState from '../../components/base/EmptyState.vue'
 
 const meta = {
@@ -42,7 +42,7 @@ export const Default: Story = {
 
 export const WithActions: StoryObj = {
 	render: () => ({
-		components: { EmptyState, ButtonStyled },
+		components: { EmptyState, Button },
 		template: /*html*/ `
 			<EmptyState
 				type="empty-inbox"
@@ -50,9 +50,7 @@ export const WithActions: StoryObj = {
 				description="Create your first backup"
 			>
 				<template #actions>
-					<ButtonStyled color="brand">
-						<button>Create backup</button>
-					</ButtonStyled>
+					<Button type="colored" color="brand">Create backup</Button>
 				</template>
 			</EmptyState>
 		`,
diff --git a/packages/ui/src/stories/base/JoinedButtons.stories.ts b/packages/ui/src/stories/base/JoinedButtons.stories.ts
deleted file mode 100644
index c007e3631d..0000000000
--- a/packages/ui/src/stories/base/JoinedButtons.stories.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { PlayIcon, SlashIcon, StopCircleIcon, UpdatedIcon } from '@modrinth/assets'
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import JoinedButtons from '../../components/base/JoinedButtons.vue'
-
-const meta = {
-	title: 'Base/JoinedButtons',
-	component: JoinedButtons,
-	argTypes: {
-		color: {
-			control: 'select',
-			options: ['standard', 'brand', 'red', 'orange', 'green', 'blue', 'purple'],
-		},
-		size: {
-			control: 'select',
-			options: ['small', 'standard', 'large'],
-		},
-		disabled: { control: 'boolean' },
-		primaryDisabled: { control: 'boolean' },
-		dropdownDisabled: { control: 'boolean' },
-		primaryMuted: { control: 'boolean' },
-	},
-} satisfies Meta<typeof JoinedButtons>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Start: Story = {
-	args: {
-		color: 'brand',
-		size: 'large',
-		actions: [
-			{
-				id: 'start',
-				label: 'Start',
-				icon: PlayIcon,
-				action: () => console.log('Start'),
-			},
-		],
-	},
-}
-
-export const StopWithKill: Story = {
-	args: {
-		color: 'red',
-		size: 'large',
-		actions: [
-			{
-				id: 'stop',
-				label: 'Stop',
-				icon: StopCircleIcon,
-				action: () => console.log('Stop'),
-			},
-			{
-				id: 'kill_server',
-				label: 'Kill server',
-				icon: SlashIcon,
-				action: () => console.log('Kill'),
-			},
-		],
-	},
-}
-
-export const Stopping: Story = {
-	args: {
-		color: 'red',
-		size: 'large',
-		primaryDisabled: true,
-		primaryMuted: true,
-		actions: [
-			{
-				id: 'stop',
-				label: 'Stopping',
-				icon: StopCircleIcon,
-				action: () => console.log('Stop'),
-			},
-			{
-				id: 'kill_server',
-				label: 'Kill server',
-				icon: SlashIcon,
-				action: () => console.log('Kill'),
-			},
-		],
-	},
-}
-
-export const Restart: Story = {
-	args: {
-		color: 'orange',
-		size: 'large',
-		actions: [
-			{
-				id: 'restart',
-				label: 'Restart',
-				icon: UpdatedIcon,
-				action: () => console.log('Restart'),
-			},
-		],
-	},
-}
-
-export const Disabled: Story = {
-	args: {
-		color: 'red',
-		size: 'large',
-		disabled: true,
-		actions: [
-			{
-				id: 'stop',
-				label: 'Stop',
-				icon: StopCircleIcon,
-				action: () => console.log('Stop'),
-			},
-			{
-				id: 'kill_server',
-				label: 'Kill server',
-				icon: SlashIcon,
-				action: () => console.log('Kill'),
-			},
-		],
-	},
-}
diff --git a/packages/ui/src/stories/base/OverflowMenu.stories.ts b/packages/ui/src/stories/base/OverflowMenu.stories.ts
deleted file mode 100644
index 0adec75cf2..0000000000
--- a/packages/ui/src/stories/base/OverflowMenu.stories.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { MoreHorizontalIcon } from '@modrinth/assets'
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
-import OverflowMenu from '../../components/base/OverflowMenu.vue'
-
-const meta = {
-	title: 'Base/OverflowMenu',
-	component: OverflowMenu,
-	render: (args) => ({
-		components: { OverflowMenu, MoreHorizontalIcon, ButtonStyled },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
-			<ButtonStyled circular type="transparent">
-				<OverflowMenu v-bind="args">
-					<MoreHorizontalIcon class="h-5 w-5" />
-					<template #edit>Edit</template>
-					<template #delete>Delete</template>
-					<template #share>Share</template>
-				</OverflowMenu>
-			</ButtonStyled>
-		`,
-	}),
-} satisfies Meta<typeof OverflowMenu>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-	args: {
-		options: [
-			{ id: 'edit', action: () => console.log('Edit clicked') },
-			{ id: 'share', action: () => console.log('Share clicked') },
-			{ divider: true },
-			{ id: 'delete', action: () => console.log('Delete clicked'), color: 'danger' },
-		],
-	},
-}
-
-export const WithDifferentPlacements: StoryObj = {
-	render: () => ({
-		components: { OverflowMenu, MoreHorizontalIcon, ButtonStyled },
-		template: /*html*/ `
-			<div class="flex gap-8 items-start">
-				<div class="flex flex-col items-center gap-2">
-					<span class="text-sm text-secondary">bottom-end (default)</span>
-					<ButtonStyled circular type="transparent">
-						<OverflowMenu
-							:options="[
-								{ id: 'edit', action: () => {} },
-								{ id: 'delete', action: () => {}, color: 'danger' },
-							]"
-						>
-							<MoreHorizontalIcon class="h-5 w-5" />
-							<template #edit>Edit</template>
-							<template #delete>Delete</template>
-						</OverflowMenu>
-					</ButtonStyled>
-				</div>
-				<div class="flex flex-col items-center gap-2">
-					<span class="text-sm text-secondary">bottom-start</span>
-					<ButtonStyled circular type="transparent">
-						<OverflowMenu
-							direction="left"
-							:options="[
-								{ id: 'edit', action: () => {} },
-								{ id: 'delete', action: () => {}, color: 'danger' },
-							]"
-						>
-							<MoreHorizontalIcon class="h-5 w-5" />
-							<template #edit>Edit</template>
-							<template #delete>Delete</template>
-						</OverflowMenu>
-					</ButtonStyled>
-				</div>
-			</div>
-		`,
-	}),
-}
diff --git a/packages/ui/src/stories/base/PageHeader.stories.ts b/packages/ui/src/stories/base/PageHeader.stories.ts
index 73ad628820..d2e569ae6b 100644
--- a/packages/ui/src/stories/base/PageHeader.stories.ts
+++ b/packages/ui/src/stories/base/PageHeader.stories.ts
@@ -20,9 +20,13 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import AutoLink from '../../components/base/AutoLink.vue'
 import Avatar from '../../components/base/Avatar.vue'
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import {
+	Button,
+	IconButton,
+	SplitButton,
+	TeleportOverflowMenu,
+} from '../../components/base/buttons'
 import FormattedTag from '../../components/base/FormattedTag.vue'
-import JoinedButtons from '../../components/base/JoinedButtons.vue'
 import PageHeader from '../../components/base/page-header/index.vue'
 import PageHeaderMetadata from '../../components/base/page-header/metadata/index.vue'
 import PageHeaderMetadataItem from '../../components/base/page-header/metadata/page-header-metadata-item.vue'
@@ -32,7 +36,6 @@ import PageHeaderMetadataTimeItem from '../../components/base/page-header/metada
 import PageHeaderActions from '../../components/base/page-header/page-header-actions.vue'
 import PageHeaderBadgeItem from '../../components/base/page-header/page-header-badge-item.vue'
 import TagItem from '../../components/base/TagItem.vue'
-import TeleportOverflowMenu from '../../components/base/TeleportOverflowMenu.vue'
 import LoaderIcon from '../../components/servers/icons/LoaderIcon.vue'
 import ServerIcon from '../../components/servers/icons/ServerIcon.vue'
 
@@ -87,9 +90,10 @@ const pageHeaderIcons = {
 const pageHeaderComponents = {
 	AutoLink,
 	Avatar,
-	ButtonStyled,
+	Button,
 	FormattedTag,
-	JoinedButtons,
+	IconButton,
+	SplitButton,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
@@ -111,7 +115,7 @@ const meta = {
 	},
 	decorators: [
 		(story) => ({
-			components: { story },
+			components: { story, TeleportOverflowMenu },
 			template: '<div class="w-full"><story /></div>',
 		}),
 	],
@@ -157,17 +161,13 @@ export const ProjectHeader: Story = {
 
 				<template #actions>
 					<PageHeaderActions>
-						<ButtonStyled color="brand" size="large">
-							<button type="button" @click="noop">
-								<DownloadIcon />
-								Download
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular size="large" type="transparent">
-							<TeleportOverflowMenu :options="menuActions" aria-label="More actions">
-								<MoreVerticalIcon />
-							</TeleportOverflowMenu>
-						</ButtonStyled>
+						<Button type="colored" color="brand" size="xl" native-type="button" @click="noop">
+							<DownloadIcon />
+							Download
+						</Button>
+						<TeleportOverflowMenu type="quiet" size="xl" label="More actions" :options="menuActions">
+							<MoreVerticalIcon />
+						</TeleportOverflowMenu>
 					</PageHeaderActions>
 				</template>
 			</PageHeader>
@@ -207,12 +207,10 @@ export const CreatorHeader: Story = {
 
 				<template #actions>
 					<PageHeaderActions>
-						<ButtonStyled color="brand" size="large">
-							<button type="button" @click="noop">
-								<HeartIcon />
-								Follow
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" size="xl" native-type="button" @click="noop">
+							<HeartIcon />
+							Follow
+						</Button>
 					</PageHeaderActions>
 				</template>
 			</PageHeader>
@@ -222,10 +220,7 @@ export const CreatorHeader: Story = {
 
 export const AppInstanceHeader: Story = {
 	render: () => ({
-		components: {
-			...pageHeaderComponents,
-			LoaderIcon,
-		},
+		components: { ...pageHeaderComponents, LoaderIcon, TeleportOverflowMenu },
 		setup() {
 			return {
 				...pageHeaderIcons,
@@ -252,22 +247,16 @@ export const AppInstanceHeader: Story = {
 
 				<template #actions>
 					<PageHeaderActions>
-						<ButtonStyled color="brand" size="large">
-							<button type="button" @click="noop">
-								<PlayIcon />
-								Play
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular size="large">
-							<button type="button" aria-label="Instance settings" @click="noop">
-								<SettingsIcon />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular size="large" type="transparent">
-							<TeleportOverflowMenu :options="menuActions" aria-label="More actions">
-								<MoreVerticalIcon />
-							</TeleportOverflowMenu>
-						</ButtonStyled>
+						<Button type="colored" color="brand" size="xl" native-type="button" @click="noop">
+							<PlayIcon />
+							Play
+						</Button>
+						<IconButton size="xl" label="Instance settings" native-type="button" @click="noop">
+							<SettingsIcon />
+						</IconButton>
+						<TeleportOverflowMenu type="quiet" size="xl" label="More actions" :options="menuActions">
+							<MoreVerticalIcon />
+						</TeleportOverflowMenu>
 					</PageHeaderActions>
 				</template>
 			</PageHeader>
@@ -277,10 +266,7 @@ export const AppInstanceHeader: Story = {
 
 export const BrowseHeader: Story = {
 	render: () => ({
-		components: {
-			...pageHeaderComponents,
-			LoaderIcon,
-		},
+		components: { ...pageHeaderComponents, LoaderIcon, TeleportOverflowMenu },
 		setup() {
 			return {
 				...pageHeaderIcons,
@@ -291,11 +277,9 @@ export const BrowseHeader: Story = {
 		template: `
 			<PageHeader title="Survival SMP" :divider="false" :bottom-padding="false" main-class="items-center" title-class="leading-8" truncate-title>
 				<template #leading>
-					<ButtonStyled circular size="large">
-						<button type="button" aria-label="Back to instance" @click="noop">
-							<LeftArrowIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton size="xl" label="Back to instance" native-type="button" @click="noop">
+						<LeftArrowIcon />
+					</IconButton>
 					<Avatar src="" alt="Survival SMP" size="48px" tint-by="survival-smp" />
 				</template>
 
@@ -317,10 +301,7 @@ export const BrowseHeader: Story = {
 
 export const ServerPanelRootHeader: Story = {
 	render: () => ({
-		components: {
-			...pageHeaderComponents,
-			ServerIcon,
-		},
+		components: { ...pageHeaderComponents, ServerIcon, TeleportOverflowMenu },
 		setup() {
 			return {
 				...pageHeaderIcons,
@@ -346,17 +327,13 @@ export const ServerPanelRootHeader: Story = {
 
 				<template #actions>
 					<PageHeaderActions>
-						<ButtonStyled color="brand" size="large">
-							<button type="button" @click="noop">
-								<PlayIcon />
-								Start server
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular size="large">
-							<button type="button" aria-label="Server settings" @click="noop">
-								<SettingsIcon />
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" size="xl" native-type="button" @click="noop">
+							<PlayIcon />
+							Start server
+						</Button>
+						<IconButton size="xl" label="Server settings" native-type="button" @click="noop">
+							<SettingsIcon />
+						</IconButton>
 					</PageHeaderActions>
 				</template>
 			</PageHeader>
@@ -366,10 +343,7 @@ export const ServerPanelRootHeader: Story = {
 
 export const ServerPanelInstanceHeader: Story = {
 	render: () => ({
-		components: {
-			...pageHeaderComponents,
-			LoaderIcon,
-		},
+		components: { ...pageHeaderComponents, LoaderIcon, TeleportOverflowMenu },
 		setup() {
 			return {
 				...pageHeaderIcons,
@@ -381,11 +355,9 @@ export const ServerPanelInstanceHeader: Story = {
 		template: `
 			<PageHeader title="My World">
 				<template #leading>
-					<ButtonStyled circular size="large">
-						<button type="button" aria-label="All instances" @click="noop">
-							<LeftArrowIcon />
-						</button>
-					</ButtonStyled>
+					<IconButton size="xl" label="All instances" native-type="button" @click="noop">
+						<LeftArrowIcon />
+					</IconButton>
 				</template>
 
 				<template #metadata>
@@ -400,18 +372,24 @@ export const ServerPanelInstanceHeader: Story = {
 
 				<template #actions>
 					<PageHeaderActions>
-						<ButtonStyled color="brand" size="large">
-							<button type="button" @click="noop">
-								<PlayIcon />
-								Start instance
-							</button>
-						</ButtonStyled>
-						<JoinedButtons :actions="joinedActions" color="red" size="large" />
-						<ButtonStyled circular size="large">
-							<button type="button" aria-label="Instance settings" @click="noop">
-								<SettingsIcon />
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" size="xl" native-type="button" @click="noop">
+							<PlayIcon />
+							Start instance
+						</Button>
+						<SplitButton
+							type="colored"
+							color="red"
+							size="xl"
+							:options="joinedActions.slice(1)"
+							menu-label="Force stop options"
+							@click="noop"
+						>
+							<StopCircleIcon />
+							Stop
+						</SplitButton>
+						<IconButton size="xl" label="Instance settings" native-type="button" @click="noop">
+							<SettingsIcon />
+						</IconButton>
 					</PageHeaderActions>
 				</template>
 			</PageHeader>
diff --git a/packages/ui/src/stories/base/PopoutMenu.stories.ts b/packages/ui/src/stories/base/PopoutMenu.stories.ts
deleted file mode 100644
index 7e3d02a512..0000000000
--- a/packages/ui/src/stories/base/PopoutMenu.stories.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { SettingsIcon } from '@modrinth/assets'
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import Button from '../../components/base/Button.vue'
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
-import PopoutMenu from '../../components/base/PopoutMenu.vue'
-
-const meta = {
-	title: 'Base/PopoutMenu',
-	component: PopoutMenu,
-	render: (args) => ({
-		components: { PopoutMenu, Button, ButtonStyled, SettingsIcon },
-		setup() {
-			return { args }
-		},
-		template: /*html*/ `
-			<ButtonStyled circular type="transparent">
-				<PopoutMenu v-bind="args">
-					<SettingsIcon class="h-5 w-5" />
-					<template #menu>
-						<div class="flex flex-col gap-1 p-1">
-							<Button transparent>Option 1</Button>
-							<Button transparent>Option 2</Button>
-							<Button transparent>Option 3</Button>
-						</div>
-					</template>
-				</PopoutMenu>
-			</ButtonStyled>
-		`,
-	}),
-} satisfies Meta<typeof PopoutMenu>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const WithTooltip: Story = {
-	args: {
-		tooltip: 'Click for more options',
-	},
-}
-
-export const DifferentPlacements: StoryObj = {
-	render: () => ({
-		components: { PopoutMenu, Button, ButtonStyled, SettingsIcon },
-		template: /*html*/ `
-			<div class="flex gap-8 items-start p-8">
-				<div class="flex flex-col items-center gap-2">
-					<span class="text-sm text-secondary">bottom-end (default)</span>
-					<ButtonStyled circular type="transparent">
-						<PopoutMenu placement="bottom-end">
-							<SettingsIcon class="h-5 w-5" />
-							<template #menu>
-								<div class="flex flex-col gap-1 p-1">
-									<Button transparent>Option 1</Button>
-									<Button transparent>Option 2</Button>
-								</div>
-							</template>
-						</PopoutMenu>
-					</ButtonStyled>
-				</div>
-				<div class="flex flex-col items-center gap-2">
-					<span class="text-sm text-secondary">bottom-start</span>
-					<ButtonStyled circular type="transparent">
-						<PopoutMenu placement="bottom-start">
-							<SettingsIcon class="h-5 w-5" />
-							<template #menu>
-								<div class="flex flex-col gap-1 p-1">
-									<Button transparent>Option 1</Button>
-									<Button transparent>Option 2</Button>
-								</div>
-							</template>
-						</PopoutMenu>
-					</ButtonStyled>
-				</div>
-				<div class="flex flex-col items-center gap-2">
-					<span class="text-sm text-secondary">top-end</span>
-					<ButtonStyled circular type="transparent">
-						<PopoutMenu placement="top-end">
-							<SettingsIcon class="h-5 w-5" />
-							<template #menu>
-								<div class="flex flex-col gap-1 p-1">
-									<Button transparent>Option 1</Button>
-									<Button transparent>Option 2</Button>
-								</div>
-							</template>
-						</PopoutMenu>
-					</ButtonStyled>
-				</div>
-			</div>
-		`,
-	}),
-}
diff --git a/packages/ui/src/stories/base/StackedAdmonitions.stories.ts b/packages/ui/src/stories/base/StackedAdmonitions.stories.ts
index c0683ad7df..fbef68fb42 100644
--- a/packages/ui/src/stories/base/StackedAdmonitions.stories.ts
+++ b/packages/ui/src/stories/base/StackedAdmonitions.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
 import Admonition from '../../components/base/Admonition.vue'
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import StackedAdmonitionsRaw, {
 	type StackedAdmonitionItem,
 } from '../../components/base/StackedAdmonitions.vue'
@@ -383,7 +383,7 @@ interface RichItem extends StackedAdmonitionItem {
 
 export const RichContent: Story = {
 	render: () => ({
-		components: { StackedAdmonitions, Admonition, ButtonStyled },
+		components: { StackedAdmonitions, Admonition, Button },
 		setup() {
 			const items = ref<RichItem[]>([
 				{
@@ -429,12 +429,8 @@ export const RichContent: Story = {
 					>
 						{{ item.body }}
 						<template #top-right-actions>
-							<ButtonStyled v-if="item.canCancel" type="outlined" color="blue">
-								<button class="!border" type="button" @click="dismiss(item.id)">Cancel</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="item.canRetry" color="red">
-								<button type="button" @click="dismiss(item.id)">Retry</button>
-							</ButtonStyled>
+							<Button type="outlined" v-if="item.canCancel" class="!border !text-blue [&>svg]:!text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)]" native-type="button" @click="dismiss(item.id)">Cancel</Button>
+							<Button type="colored" color="red" v-if="item.canRetry" native-type="button" @click="dismiss(item.id)">Retry</Button>
 						</template>
 					</Admonition>
 				</template>
diff --git a/packages/ui/src/stories/base/Table.stories.ts b/packages/ui/src/stories/base/Table.stories.ts
index 157c1ffbcb..6448cbe7bd 100644
--- a/packages/ui/src/stories/base/Table.stories.ts
+++ b/packages/ui/src/stories/base/Table.stories.ts
@@ -3,8 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { computed, ref } from 'vue'
 
 import Badge from '../../components/base/Badge.vue'
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
-import OverflowMenu from '../../components/base/OverflowMenu.vue'
+import { Button, TeleportOverflowMenu } from '../../components/base/buttons'
 import Table from '../../components/base/Table.vue'
 
 interface User {
@@ -54,7 +53,7 @@ export default meta
 export const Default: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -74,7 +73,7 @@ export const Default: StoryObj = {
 export const HorizontalOverflow: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -103,7 +102,7 @@ export const HorizontalOverflow: StoryObj = {
 export const CustomClasses: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name', cellClass: '!overflow-visible py-3' },
@@ -129,7 +128,7 @@ export const CustomClasses: StoryObj = {
 export const WithSelection: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -160,7 +159,7 @@ export const WithSelection: StoryObj = {
 export const WithSelectionData: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -193,7 +192,7 @@ export const WithSelectionData: StoryObj = {
 export const WithSelectionIds: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -233,7 +232,7 @@ export const WithSorting: StoryObj = {
 		},
 	},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name', enableSorting: true },
@@ -269,7 +268,7 @@ export const WithSorting: StoryObj = {
 export const WithColumnAlignment: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name', align: 'left' as const },
@@ -289,7 +288,7 @@ export const WithColumnAlignment: StoryObj = {
 export const WithCustomCellSlots: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table, Badge },
+		components: { Table, Badge, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -335,7 +334,7 @@ export const WithCustomCellSlots: StoryObj = {
 export const WithCustomHeaderSlots: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -365,7 +364,7 @@ export const WithCustomHeaderSlots: StoryObj = {
 export const WithHeaderSlot: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table, ButtonStyled },
+		components: { Table, Button, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -383,9 +382,7 @@ export const WithHeaderSlot: StoryObj = {
 					<div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
 						<div class="text-lg font-semibold text-contrast">Team Members</div>
 						<div class="flex items-center gap-2">
-							<ButtonStyled color="brand">
-								<button type="button">Invite member</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" native-type="button">Invite member</Button>
 						</div>
 					</div>
 				</template>
@@ -397,7 +394,7 @@ export const WithHeaderSlot: StoryObj = {
 export const WithActionsColumn: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table, ButtonStyled, EditIcon, TrashIcon },
+		components: { Table, EditIcon, TrashIcon, Button, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -421,18 +418,14 @@ export const WithActionsColumn: StoryObj = {
 			<Table :columns="columns" :data="data">
 				<template #cell-actions="{ row }">
 					<div class="flex items-center justify-end gap-2">
-						<ButtonStyled color="brand" type="transparent" @click="handleEdit(row)">
-							<button class="flex items-center gap-1">
-								<EditIcon class="size-4" />
-								Edit
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="red" type="transparent" @click="handleDelete(row)">
-							<button class="flex items-center gap-1">
-								<TrashIcon class="size-4" />
-								Delete
-							</button>
-						</ButtonStyled>
+						<Button type="quiet" color="brand" @click="handleEdit(row)" class="flex items-center gap-1">
+							<EditIcon class="size-4" />
+							Edit
+						</Button>
+						<Button type="quiet" color="red" @click="handleDelete(row)" class="flex items-center gap-1">
+							<TrashIcon class="size-4" />
+							Delete
+						</Button>
 					</div>
 				</template>
 			</Table>
@@ -443,7 +436,7 @@ export const WithActionsColumn: StoryObj = {
 export const WithLocalizedActionsColumn: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table, ButtonStyled, EditIcon, TrashIcon },
+		components: { Table, EditIcon, TrashIcon, Button, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Nombre' },
@@ -467,18 +460,14 @@ export const WithLocalizedActionsColumn: StoryObj = {
 			<Table :columns="columns" :data="data">
 				<template #cell-actions="{ row }">
 					<div class="flex items-center justify-end gap-2">
-						<ButtonStyled color="brand" type="transparent" @click="handleEdit(row)">
-							<button class="flex items-center gap-1">
-								<EditIcon class="size-4" />
-								Editar
-							</button>
-						</ButtonStyled>
-						<ButtonStyled color="red" type="transparent" @click="handleDelete(row)">
-							<button class="flex items-center gap-1">
-								<TrashIcon class="size-4" />
-								Eliminar
-							</button>
-						</ButtonStyled>
+						<Button type="quiet" color="brand" @click="handleEdit(row)" class="flex items-center gap-1">
+							<EditIcon class="size-4" />
+							Editar
+						</Button>
+						<Button type="quiet" color="red" @click="handleDelete(row)" class="flex items-center gap-1">
+							<TrashIcon class="size-4" />
+							Eliminar
+						</Button>
 					</div>
 				</template>
 			</Table>
@@ -489,7 +478,7 @@ export const WithLocalizedActionsColumn: StoryObj = {
 export const FullFeatured: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table, Badge, ButtonStyled, EditIcon, TrashIcon },
+		components: { Table, Badge, EditIcon, TrashIcon, Button, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name', enableSorting: true },
@@ -565,18 +554,14 @@ export const FullFeatured: StoryObj = {
 					</template>
 					<template #cell-actions="{ row }">
 						<div class="flex items-center justify-end gap-2">
-							<ButtonStyled color="brand" type="transparent" @click="handleEdit(row)">
-								<button class="flex items-center gap-1">
-									<EditIcon class="size-4" />
-									Edit
-								</button>
-							</ButtonStyled>
-							<ButtonStyled color="red" type="transparent" @click="handleDelete(row)">
-								<button class="flex items-center gap-1">
-									<TrashIcon class="size-4" />
-									Delete
-								</button>
-							</ButtonStyled>
+							<Button type="quiet" color="brand" @click="handleEdit(row)" class="flex items-center gap-1">
+								<EditIcon class="size-4" />
+								Edit
+							</Button>
+							<Button type="quiet" color="red" @click="handleDelete(row)" class="flex items-center gap-1">
+								<TrashIcon class="size-4" />
+								Delete
+							</Button>
 						</div>
 					</template>
 				</Table>
@@ -592,7 +577,7 @@ export const FullFeatured: StoryObj = {
 export const VirtualizedLargeData: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table, Badge },
+		components: { Table, Badge, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name', enableSorting: true },
@@ -710,7 +695,15 @@ export const VirtualizedLargeData: StoryObj = {
 export const WithOverflowMenu: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table, Badge, ButtonStyled, OverflowMenu, MoreVerticalIcon, EditIcon, TrashIcon },
+		components: {
+			Table,
+			Badge,
+			MoreVerticalIcon,
+			EditIcon,
+			TrashIcon,
+			Button,
+			TeleportOverflowMenu,
+		},
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
@@ -737,17 +730,19 @@ export const WithOverflowMenu: StoryObj = {
 			const getMenuOptions = (row: User) => [
 				{
 					id: 'edit',
+					label: 'Edit',
 					action: () => alert(`Edit user: ${row.name}`),
 				},
 				{
 					id: 'duplicate',
+					label: 'Duplicate',
 					action: () => alert(`Duplicate user: ${row.name}`),
 				},
-				{ divider: true },
+				{ type: 'divider' },
 				{
 					id: 'delete',
-					color: 'red' as const,
-					hoverFilled: true,
+					label: 'Delete',
+					tone: 'red',
 					action: () => alert(`Delete user: ${row.name}`),
 				},
 			]
@@ -766,26 +761,23 @@ export const WithOverflowMenu: StoryObj = {
 				</template>
 				<template #cell-actions="{ row }">
 					<div class="flex justify-end">
-						<ButtonStyled circular type="transparent">
-							<OverflowMenu
+						<TeleportOverflowMenu type="quiet" label="More options"
 								:options="getMenuOptions(row)"
-								aria-label="More options"
 							>
-								<MoreVerticalIcon aria-hidden="true" />
-								<template #edit>
-									<EditIcon class="size-4" aria-hidden="true" />
-									Edit
-								</template>
-								<template #duplicate>
-									<EditIcon class="size-4" aria-hidden="true" />
-									Duplicate
-								</template>
-								<template #delete>
-									<TrashIcon class="size-4" aria-hidden="true" />
-									Delete
-								</template>
-							</OverflowMenu>
-						</ButtonStyled>
+							<MoreVerticalIcon aria-hidden="true" />
+							<template #edit>
+								<EditIcon class="size-4" aria-hidden="true" />
+								Edit
+							</template>
+							<template #duplicate>
+								<EditIcon class="size-4" aria-hidden="true" />
+								Duplicate
+							</template>
+							<template #delete>
+								<TrashIcon class="size-4" aria-hidden="true" />
+								Delete
+							</template>
+						</TeleportOverflowMenu>
 					</div>
 				</template>
 			</Table>
@@ -796,7 +788,7 @@ export const WithOverflowMenu: StoryObj = {
 export const EmptyState: StoryObj = {
 	args: {},
 	render: () => ({
-		components: { Table },
+		components: { Table, TeleportOverflowMenu },
 		setup() {
 			const columns = [
 				{ key: 'name', label: 'Name' },
diff --git a/packages/ui/src/stories/buttons/Button.stories.ts b/packages/ui/src/stories/buttons/Button.stories.ts
new file mode 100644
index 0000000000..85bfe95332
--- /dev/null
+++ b/packages/ui/src/stories/buttons/Button.stories.ts
@@ -0,0 +1,213 @@
+import { DownloadIcon, ExternalIcon, HeartIcon, SettingsIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Button from '../../components/base/buttons/Button.vue'
+import ButtonLink from '../../components/base/buttons/ButtonLink.vue'
+import IconButton from '../../components/base/buttons/IconButton.vue'
+
+const types = ['base', 'colored', 'outlined', 'quiet'] as const
+const sizes = ['sm', 'md', 'lg', 'xl'] as const
+const colors = ['brand', 'red', 'orange', 'green', 'blue', 'purple', 'medal_promotion'] as const
+const sizeColumns = [
+	{ value: 'sm', label: 'Small' },
+	{ value: 'md', label: 'Medium' },
+	{ value: 'lg', label: 'Large' },
+	{ value: 'xl', label: 'Extra large' },
+] as const
+const typeRows = [
+	{ label: 'Base', type: 'base' },
+	{ label: 'Outlined', type: 'outlined' },
+	{ label: 'Quiet', type: 'quiet' },
+	...colors.map((color) => ({
+		label: `Colored / ${color.charAt(0).toUpperCase()}${color.slice(1)}`,
+		type: 'colored' as const,
+		color,
+	})),
+	...colors.map((color) => ({
+		label: `Outlined / ${color.charAt(0).toUpperCase()}${color.slice(1)}`,
+		type: 'outlined' as const,
+		color,
+	})),
+	...colors.map((color) => ({
+		label: `Quiet / ${color.charAt(0).toUpperCase()}${color.slice(1)}`,
+		type: 'quiet' as const,
+		color,
+	})),
+]
+
+const meta = {
+	title: 'Buttons/Button',
+	component: Button,
+	argTypes: {
+		type: {
+			control: 'select',
+			options: types,
+		},
+		size: {
+			control: 'select',
+			options: sizes,
+		},
+		color: {
+			control: 'select',
+			options: colors,
+		},
+		nativeType: {
+			control: 'select',
+			options: ['button', 'submit', 'reset'],
+		},
+		disabled: { control: 'boolean' },
+		loading: { control: 'boolean' },
+	},
+	args: {
+		type: 'base',
+		size: 'md',
+		color: 'brand',
+		nativeType: 'button',
+		disabled: false,
+		loading: false,
+	},
+	render: (args) => ({
+		components: { Button, DownloadIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<Button v-bind="args">
+				<DownloadIcon />
+				Download
+			</Button>
+		`,
+	}),
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const AllTypes: Story = {
+	render: () => ({
+		components: { Button, DownloadIcon },
+		setup() {
+			return { sizeColumns, typeRows }
+		},
+		template: /*html*/ `
+			<div class="grid grid-cols-[max-content_repeat(4,max-content)] items-center gap-4 overflow-x-auto p-1">
+				<div />
+				<div v-for="size in sizeColumns" :key="size.value" class="font-semibold text-contrast">
+					{{ size.label }}
+				</div>
+
+				<template v-for="row in typeRows" :key="row.label">
+					<div class="whitespace-nowrap font-semibold text-secondary">{{ row.label }}</div>
+					<Button
+						v-for="size in sizeColumns"
+						:key="size.value"
+						:type="row.type"
+						:color="row.color"
+						:size="size.value"
+					>
+						<DownloadIcon />Button
+					</Button>
+				</template>
+			</div>
+		`,
+	}),
+}
+
+export const Quiet: Story = {
+	render: () => ({
+		components: { Button, DownloadIcon, IconButton, SettingsIcon },
+		template: /*html*/ `
+			<div class="flex flex-wrap items-center gap-4">
+				<Button type="quiet"><DownloadIcon />Quiet</Button>
+				<Button type="quiet" color="red"><DownloadIcon />Quiet destructive</Button>
+				<IconButton label="Settings" type="quiet"><SettingsIcon /></IconButton>
+			</div>
+		`,
+	}),
+}
+
+export const Sizes: Story = {
+	render: () => ({
+		components: { Button, DownloadIcon, IconButton },
+		setup() {
+			return { sizes }
+		},
+		template: /*html*/ `
+			<div class="flex flex-wrap items-center gap-4">
+				<template v-for="size in sizes" :key="size">
+					<Button :size="size"><DownloadIcon />{{ size }}</Button>
+					<IconButton :label="size" :size="size"><DownloadIcon /></IconButton>
+				</template>
+			</div>
+		`,
+	}),
+}
+
+export const Colors: Story = {
+	render: () => ({
+		components: { Button },
+		setup() {
+			return { colors }
+		},
+		template: /*html*/ `
+			<div class="flex flex-wrap items-center gap-4">
+				<Button v-for="color in colors" :key="color" type="colored" :color="color">
+					{{ color }}
+				</Button>
+			</div>
+		`,
+	}),
+}
+
+export const Content: Story = {
+	render: () => ({
+		components: { Button, DownloadIcon, SettingsIcon },
+		template: /*html*/ `
+			<div class="flex max-w-2xl flex-col items-start gap-4">
+				<Button>Text only</Button>
+				<Button><DownloadIcon />Leading icon</Button>
+				<Button>Trailing icon<SettingsIcon /></Button>
+				<Button class="w-full">Full width</Button>
+				<Button>Continue with a deliberately long translated action label</Button>
+			</div>
+		`,
+	}),
+}
+
+export const InteractionStates: Story = {
+	render: () => ({
+		components: { Button },
+		template: /*html*/ `
+			<div class="flex flex-wrap items-center gap-4">
+				<Button>Enabled</Button>
+				<Button disabled>Disabled</Button>
+				<Button loading>Loading</Button>
+				<Button type="colored">Colored</Button>
+				<Button type="colored" disabled>Colored disabled</Button>
+				<Button type="outlined">Outlined</Button>
+				<Button type="quiet">Quiet</Button>
+			</div>
+		`,
+	}),
+}
+
+export const LinksAndIconButton: Story = {
+	render: () => ({
+		components: { ButtonLink, ExternalIcon, HeartIcon, IconButton },
+		template: /*html*/ `
+			<div class="flex flex-wrap items-center gap-4">
+				<ButtonLink to="/library">Internal link</ButtonLink>
+				<ButtonLink href="https://modrinth.com" target="_blank" type="outlined">
+					Modrinth<ExternalIcon />
+				</ButtonLink>
+				<ButtonLink href="https://modrinth.com" disabled>Disabled link</ButtonLink>
+				<IconButton label="Favorite"><HeartIcon /></IconButton>
+				<IconButton label="Favorite" type="colored"><HeartIcon /></IconButton>
+				<IconButton label="Favorite" type="outlined"><HeartIcon /></IconButton>
+				<IconButton label="Favorite" type="quiet"><HeartIcon /></IconButton>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/buttons/ButtonGroup.stories.ts b/packages/ui/src/stories/buttons/ButtonGroup.stories.ts
new file mode 100644
index 0000000000..3f234148c4
--- /dev/null
+++ b/packages/ui/src/stories/buttons/ButtonGroup.stories.ts
@@ -0,0 +1,82 @@
+import { PlayIcon, SettingsIcon, StopCircleIcon, TrashIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Button from '../../components/base/buttons/Button.vue'
+import ButtonGroup from '../../components/base/buttons/ButtonGroup.vue'
+import SplitButton from '../../components/base/buttons/SplitButton.vue'
+import type { OverflowMenuOption } from '../../components/base/buttons/types'
+
+const splitOptions: OverflowMenuOption[] = [
+	{
+		id: 'settings',
+		label: 'Server settings',
+		icon: SettingsIcon,
+		action: () => undefined,
+	},
+	{ type: 'divider' },
+	{
+		id: 'delete',
+		label: 'Delete server',
+		icon: TrashIcon,
+		tone: 'red',
+		action: () => undefined,
+	},
+]
+
+const meta = {
+	title: 'Buttons/Button Group',
+	component: ButtonGroup,
+} satisfies Meta<typeof ButtonGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Joined: Story = {
+	render: () => ({
+		components: { Button, ButtonGroup },
+		template: /*html*/ `
+			<ButtonGroup label="Pagination">
+				<Button type="outlined">Previous</Button>
+				<Button type="outlined">Next</Button>
+			</ButtonGroup>
+		`,
+	}),
+}
+
+export const Split: Story = {
+	render: () => ({
+		components: { PlayIcon, SplitButton },
+		setup() {
+			return { splitOptions }
+		},
+		template: /*html*/ `
+			<SplitButton
+				menu-label="More server actions"
+				group-label="Server actions"
+				type="colored"
+				:options="splitOptions"
+			>
+				<PlayIcon />Start server
+			</SplitButton>
+		`,
+	}),
+}
+
+export const IndependentDisabledStates: Story = {
+	render: () => ({
+		components: { SplitButton, StopCircleIcon },
+		setup() {
+			return { splitOptions }
+		},
+		template: /*html*/ `
+			<div class="flex flex-wrap gap-4">
+				<SplitButton menu-label="More actions" :options="splitOptions" primary-disabled>
+					<StopCircleIcon />Primary disabled
+				</SplitButton>
+				<SplitButton menu-label="More actions" :options="splitOptions" menu-disabled>
+					<StopCircleIcon />Menu disabled
+				</SplitButton>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/buttons/FileButton.stories.ts b/packages/ui/src/stories/buttons/FileButton.stories.ts
new file mode 100644
index 0000000000..2f07b27acc
--- /dev/null
+++ b/packages/ui/src/stories/buttons/FileButton.stories.ts
@@ -0,0 +1,61 @@
+import { UploadIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import FileButton from '../../components/base/buttons/FileButton.vue'
+
+const meta = {
+	title: 'Buttons/File Button',
+	component: FileButton,
+	argTypes: {
+		type: {
+			control: 'select',
+			options: ['base', 'colored', 'outlined', 'quiet'],
+		},
+		size: {
+			control: 'select',
+			options: ['sm', 'md', 'lg', 'xl'],
+		},
+		color: {
+			control: 'select',
+			options: ['brand', 'red', 'orange', 'green', 'blue', 'purple', 'medal_promotion'],
+		},
+	},
+	args: {
+		prompt: 'Select file',
+		type: 'base',
+		size: 'md',
+		multiple: false,
+		disabled: false,
+	},
+	render: (args) => ({
+		components: { FileButton, UploadIcon },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<FileButton v-bind="args">
+				<UploadIcon />
+			</FileButton>
+		`,
+	}),
+} satisfies Meta<typeof FileButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const MultipleImages: Story = {
+	args: {
+		prompt: 'Select images',
+		accept: 'image/*',
+		multiple: true,
+		type: 'colored',
+	},
+}
+
+export const Disabled: Story = {
+	args: {
+		disabled: true,
+	},
+}
diff --git a/packages/ui/src/stories/buttons/TeleportOverflowMenu.stories.ts b/packages/ui/src/stories/buttons/TeleportOverflowMenu.stories.ts
new file mode 100644
index 0000000000..5ed21392f1
--- /dev/null
+++ b/packages/ui/src/stories/buttons/TeleportOverflowMenu.stories.ts
@@ -0,0 +1,104 @@
+import {
+	DownloadIcon,
+	ExternalIcon,
+	MoreVerticalIcon,
+	SettingsIcon,
+	TrashIcon,
+} from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import TeleportOverflowMenu from '../../components/base/buttons/TeleportOverflowMenu.vue'
+import type { OverflowMenuOption } from '../../components/base/buttons/types'
+
+const options: OverflowMenuOption[] = [
+	{
+		id: 'download',
+		label: 'Download',
+		icon: DownloadIcon,
+		action: () => undefined,
+	},
+	{
+		id: 'settings',
+		label: 'Project settings',
+		icon: SettingsIcon,
+		type: 'link',
+		to: '/settings',
+	},
+	{
+		id: 'website',
+		label: 'Open website',
+		icon: ExternalIcon,
+		type: 'link',
+		href: 'https://modrinth.com',
+		target: '_blank',
+	},
+	{
+		id: 'unavailable',
+		label: 'Unavailable action',
+		disabled: true,
+		tooltip: 'This action is currently unavailable',
+		action: () => undefined,
+	},
+	{ type: 'divider' },
+	{
+		id: 'delete',
+		label: 'Delete project',
+		icon: TrashIcon,
+		tone: 'red',
+		action: () => undefined,
+	},
+]
+
+const meta = {
+	title: 'Buttons/Teleport Overflow Menu',
+	component: TeleportOverflowMenu,
+	args: {
+		label: 'More actions',
+		options,
+		type: 'base',
+		size: 'md',
+		placement: 'bottom-end',
+		disabled: false,
+		hoverable: false,
+	},
+	render: (args) => ({
+		components: { MoreVerticalIcon, TeleportOverflowMenu },
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<TeleportOverflowMenu v-bind="args">
+				<MoreVerticalIcon />
+			</TeleportOverflowMenu>
+		`,
+	}),
+} satisfies Meta<typeof TeleportOverflowMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const ColoredTrigger: Story = {
+	args: {
+		type: 'colored',
+	},
+}
+
+export const OutlinedTrigger: Story = {
+	args: {
+		type: 'outlined',
+	},
+}
+
+export const QuietTrigger: Story = {
+	args: {
+		type: 'quiet',
+	},
+}
+
+export const Hoverable: Story = {
+	args: {
+		hoverable: true,
+	},
+}
diff --git a/packages/ui/src/stories/buttons/TeleportPopoutMenu.stories.ts b/packages/ui/src/stories/buttons/TeleportPopoutMenu.stories.ts
new file mode 100644
index 0000000000..d6b183197c
--- /dev/null
+++ b/packages/ui/src/stories/buttons/TeleportPopoutMenu.stories.ts
@@ -0,0 +1,50 @@
+import { SettingsIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Button from '../../components/base/buttons/Button.vue'
+import TeleportPopoutMenu from '../../components/base/buttons/TeleportPopoutMenu.vue'
+
+const meta = {
+	title: 'Buttons/Teleport Popout Menu',
+	component: TeleportPopoutMenu,
+} satisfies Meta<typeof TeleportPopoutMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ArbitraryContent: Story = {
+	render: () => ({
+		components: { Button, SettingsIcon, TeleportPopoutMenu },
+		template: /*html*/ `
+			<TeleportPopoutMenu label="Configure versions" placement="bottom-start">
+				<template #trigger>
+					<SettingsIcon />Configure
+				</template>
+
+				<template #panel="{ close }">
+					<div class="flex w-72 flex-col gap-4">
+						<label class="flex flex-col gap-2 font-semibold text-contrast">
+							Version name
+							<input class="rounded-lg bg-surface-4 px-3 py-2 text-primary ring-1 ring-surface-5" value="1.21.8" />
+						</label>
+						<Button type="colored" @click="close()">Apply</Button>
+					</div>
+				</template>
+			</TeleportPopoutMenu>
+		`,
+	}),
+}
+
+export const IconTrigger: Story = {
+	render: () => ({
+		components: { SettingsIcon, TeleportPopoutMenu },
+		template: /*html*/ `
+			<TeleportPopoutMenu label="Open settings" type="quiet" icon-only>
+				<template #trigger><SettingsIcon /></template>
+				<template #panel>
+					<p class="m-0 w-64">Arbitrary teleported content can live here.</p>
+				</template>
+			</TeleportPopoutMenu>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/instances/ContentCardTable.stories.ts b/packages/ui/src/stories/instances/ContentCardTable.stories.ts
index 486a4c909e..e7a90ebbea 100644
--- a/packages/ui/src/stories/instances/ContentCardTable.stories.ts
+++ b/packages/ui/src/stories/instances/ContentCardTable.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { fn } from 'storybook/test'
 import { onMounted, onUnmounted, ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button, IconButton } from '../../components/base/buttons'
 import ContentCardTable from '../../layouts/shared/content-tab/components/ContentCardTable.vue'
 import type { ContentCardTableItem } from '../../layouts/shared/content-tab/types'
 
@@ -539,7 +539,7 @@ export const InteractiveActions: Story = {
 
 export const WithCustomItemButtons: Story = {
 	render: () => ({
-		components: { ContentCardTable, ButtonStyled, EyeIcon, FolderOpenIcon, DownloadIcon },
+		components: { ContentCardTable, EyeIcon, FolderOpenIcon, DownloadIcon, Button, IconButton },
 		setup() {
 			return { items: sampleItems }
 		},
@@ -551,23 +551,17 @@ export const WithCustomItemButtons: Story = {
 				@delete="(id) => console.log('Delete', id)"
 			>
 				<template #itemButtonsLeft="{ item }">
-					<ButtonStyled v-tooltip="'Download'" circular type="transparent" color="green" color-fill="text">
-						<button @click="console.log('Download', item.id)">
-							<DownloadIcon class="size-5" />
-						</button>
-					</ButtonStyled>
+					<IconButton type="quiet" color="green" label="Download" v-tooltip="'Download'" @click="console.log('Download', item.id)" class="!text-green [&>svg]:!text-green">
+						<DownloadIcon class="size-5" />
+					</IconButton>
 				</template>
 				<template #itemButtonsRight="{ item }">
-					<ButtonStyled v-tooltip="'View on Modrinth'" circular type="transparent">
-						<button @click="console.log('View', item.id)">
-							<EyeIcon class="size-5 text-secondary" />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled v-tooltip="'Open folder'" circular type="transparent">
-						<button @click="console.log('Open folder', item.id)">
-							<FolderOpenIcon class="size-5 text-secondary" />
-						</button>
-					</ButtonStyled>
+					<IconButton type="quiet" label="View on Modrinth" v-tooltip="'View on Modrinth'" @click="console.log('View', item.id)">
+						<EyeIcon class="size-5 text-secondary" />
+					</IconButton>
+					<IconButton type="quiet" label="Open folder" v-tooltip="'Open folder'" @click="console.log('Open folder', item.id)">
+						<FolderOpenIcon class="size-5 text-secondary" />
+					</IconButton>
 				</template>
 			</ContentCardTable>
 		`,
@@ -582,15 +576,13 @@ export const WithEmptyState: Story = {
 
 export const WithCustomEmptyState: Story = {
 	render: () => ({
-		components: { ContentCardTable, ButtonStyled },
+		components: { ContentCardTable, Button, IconButton },
 		template: /*html*/ `
 			<ContentCardTable :items="[]">
 				<template #empty>
 					<div class="flex flex-col items-center gap-4 py-8">
 						<span class="text-lg text-secondary">No mods installed</span>
-						<ButtonStyled color="green">
-							<button>Browse mods</button>
-						</ButtonStyled>
+						<Button type="colored" color="green">Browse mods</Button>
 					</div>
 				</template>
 			</ContentCardTable>
@@ -781,7 +773,7 @@ export const WithOverflowMenu: Story = {
 
 export const BulkActionsDemo: Story = {
 	render: () => ({
-		components: { ContentCardTable, ButtonStyled },
+		components: { ContentCardTable, Button, IconButton },
 		setup() {
 			const items = ref<ContentCardTableItem[]>([
 				{ ...sodiumItem, enabled: true },
@@ -825,15 +817,9 @@ export const BulkActionsDemo: Story = {
 				<div class="flex items-center gap-2">
 					<span class="text-sm text-secondary">{{ selectedIds.length }} selected</span>
 					<template v-if="selectedIds.length > 0">
-						<ButtonStyled size="small" color="green">
-							<button @click="enableSelected">Enable</button>
-						</ButtonStyled>
-						<ButtonStyled size="small" type="transparent">
-							<button @click="disableSelected">Disable</button>
-						</ButtonStyled>
-						<ButtonStyled size="small" color="red">
-							<button @click="deleteSelected">Delete</button>
-						</ButtonStyled>
+						<Button type="colored" color="green" size="xs" @click="enableSelected" class="!h-6">Enable</Button>
+						<Button type="quiet" size="xs" @click="disableSelected" class="!h-6">Disable</Button>
+						<Button type="colored" color="red" size="xs" @click="deleteSelected" class="!h-6">Delete</Button>
 					</template>
 				</div>
 				<ContentCardTable
diff --git a/packages/ui/src/stories/instances/ContentDependencyWarningModal.stories.ts b/packages/ui/src/stories/instances/ContentDependencyWarningModal.stories.ts
index fcb644d625..fbc0b35350 100644
--- a/packages/ui/src/stories/instances/ContentDependencyWarningModal.stories.ts
+++ b/packages/ui/src/stories/instances/ContentDependencyWarningModal.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import ContentDependencyWarningModal from '../../layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue'
 import type { ContentCardTableItem } from '../../layouts/shared/content-tab/types'
 
@@ -165,7 +165,7 @@ type Story = StoryObj<typeof meta>
 
 export const InstanceDependency: Story = {
 	render: () => ({
-		components: { ButtonStyled, ContentDependencyWarningModal },
+		components: { ContentDependencyWarningModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ContentDependencyWarningModal> | null>(null)
 			const deleted = ref(false)
@@ -186,9 +186,7 @@ export const InstanceDependency: Story = {
 		},
 		template: /* html */ `
 			<div class="flex flex-col items-center gap-4">
-				<ButtonStyled color="orange">
-					<button @click="modalRef?.show()">Delete dependency</button>
-				</ButtonStyled>
+				<Button type="colored" color="orange" @click="modalRef?.show()">Delete dependency</Button>
 				<p v-if="deleted" class="m-0 text-sm text-secondary">Dependency deletion confirmed</p>
 				<ContentDependencyWarningModal
 					ref="modalRef"
@@ -210,7 +208,7 @@ export const InstanceDependency: Story = {
 
 export const ServerDependency: Story = {
 	render: () => ({
-		components: { ButtonStyled, ContentDependencyWarningModal },
+		components: { ContentDependencyWarningModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ContentDependencyWarningModal> | null>(null)
 			const deleted = ref(false)
@@ -227,9 +225,7 @@ export const ServerDependency: Story = {
 		},
 		template: /* html */ `
 			<div class="flex flex-col items-center gap-4">
-				<ButtonStyled color="orange">
-					<button @click="modalRef?.show()">Delete server dependency</button>
-				</ButtonStyled>
+				<Button type="colored" color="orange" @click="modalRef?.show()">Delete server dependency</Button>
 				<p v-if="deleted" class="m-0 text-sm text-secondary">Server dependency deletion confirmed</p>
 				<ContentDependencyWarningModal
 					ref="modalRef"
@@ -246,7 +242,7 @@ export const ServerDependency: Story = {
 
 export const BulkDependencies: Story = {
 	render: () => ({
-		components: { ButtonStyled, ContentDependencyWarningModal },
+		components: { ContentDependencyWarningModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ContentDependencyWarningModal> | null>(null)
 			const deleted = ref(false)
@@ -267,9 +263,7 @@ export const BulkDependencies: Story = {
 		},
 		template: /* html */ `
 			<div class="flex flex-col items-center gap-4">
-				<ButtonStyled color="orange">
-					<button @click="modalRef?.show()">Delete selected dependencies</button>
-				</ButtonStyled>
+				<Button type="colored" color="orange" @click="modalRef?.show()">Delete selected dependencies</Button>
 				<p v-if="deleted" class="m-0 text-sm text-secondary">Bulk dependency deletion confirmed</p>
 				<ContentDependencyWarningModal
 					ref="modalRef"
diff --git a/packages/ui/src/stories/instances/ContentUpdaterModal.stories.ts b/packages/ui/src/stories/instances/ContentUpdaterModal.stories.ts
index 909463c837..129f602d60 100644
--- a/packages/ui/src/stories/instances/ContentUpdaterModal.stories.ts
+++ b/packages/ui/src/stories/instances/ContentUpdaterModal.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { fn } from 'storybook/test'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import ContentUpdaterModal from '../../layouts/shared/content-tab/components/modals/content-updater-modal/index.vue'
 
 // Real version data from Modrinth API - Sodium (mod)
@@ -265,7 +265,7 @@ type Story = StoryObj<typeof meta>
 
 export const ModExample: Story = {
 	render: (args) => ({
-		components: { ContentUpdaterModal, ButtonStyled },
+		components: { ContentUpdaterModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ContentUpdaterModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -277,9 +277,7 @@ export const ModExample: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Update Sodium</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Update Sodium</Button>
 				<ContentUpdaterModal
 					ref="modalRef"
 					v-bind="args"
@@ -306,7 +304,7 @@ export const ModExample: Story = {
 
 export const ModpackExample: Story = {
 	render: (args) => ({
-		components: { ContentUpdaterModal, ButtonStyled },
+		components: { ContentUpdaterModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ContentUpdaterModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -318,9 +316,7 @@ export const ModpackExample: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Update Cobblemon Modpack</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Update Cobblemon Modpack</Button>
 				<ContentUpdaterModal
 					ref="modalRef"
 					v-bind="args"
@@ -347,7 +343,7 @@ export const ModpackExample: Story = {
 
 export const WithIncompatibleVersions: Story = {
 	render: (args) => ({
-		components: { ContentUpdaterModal, ButtonStyled },
+		components: { ContentUpdaterModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ContentUpdaterModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -355,9 +351,7 @@ export const WithIncompatibleVersions: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Update (Shows Incompatible)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Update (Shows Incompatible)</Button>
 				<ContentUpdaterModal
 					ref="modalRef"
 					v-bind="args"
@@ -381,7 +375,7 @@ export const WithIncompatibleVersions: Story = {
 
 export const AllVersionTypes: Story = {
 	render: (args) => ({
-		components: { ContentUpdaterModal, ButtonStyled },
+		components: { ContentUpdaterModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ContentUpdaterModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -389,9 +383,7 @@ export const AllVersionTypes: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">View All Version Types</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">View All Version Types</Button>
 				<ContentUpdaterModal
 					ref="modalRef"
 					v-bind="args"
diff --git a/packages/ui/src/stories/instances/ModpackContentModal.stories.ts b/packages/ui/src/stories/instances/ModpackContentModal.stories.ts
index d86dafbe05..fdccdaba75 100644
--- a/packages/ui/src/stories/instances/ModpackContentModal.stories.ts
+++ b/packages/ui/src/stories/instances/ModpackContentModal.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import ModpackContentModal from '../../layouts/shared/content-tab/components/modals/ModpackContentModal.vue'
 import type { ContentItem } from '../../layouts/shared/content-tab/types'
 
@@ -409,7 +409,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	render: () => ({
-		components: { ModpackContentModal, ButtonStyled },
+		components: { ModpackContentModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ModpackContentModal> | null>(null)
 			const openModal = () => modalRef.value?.show(mixedModpackContent)
@@ -417,9 +417,7 @@ export const Default: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">View Modpack Content (Mixed)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">View Modpack Content (Mixed)</Button>
 				<ModpackContentModal
 					ref="modalRef"
 					modpack-name="Cobblemon Official Modpack"
@@ -432,7 +430,7 @@ export const Default: Story = {
 
 export const ModsOnly: Story = {
 	render: () => ({
-		components: { ModpackContentModal, ButtonStyled },
+		components: { ModpackContentModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ModpackContentModal> | null>(null)
 			const openModal = () => modalRef.value?.show(modsOnlyContent)
@@ -440,9 +438,7 @@ export const ModsOnly: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">View Modpack Content (Mods Only)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">View Modpack Content (Mods Only)</Button>
 				<ModpackContentModal ref="modalRef" />
 			</div>
 		`,
@@ -455,7 +451,7 @@ export const ModsOnly: Story = {
 
 export const LoadingState: Story = {
 	render: () => ({
-		components: { ModpackContentModal, ButtonStyled },
+		components: { ModpackContentModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ModpackContentModal> | null>(null)
 			const openModal = () => {
@@ -469,9 +465,7 @@ export const LoadingState: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">View Content (With Loading)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">View Content (With Loading)</Button>
 				<ModpackContentModal
 					ref="modalRef"
 					modpack-name="Fabulously Optimized"
@@ -488,7 +482,7 @@ export const LoadingState: Story = {
 
 export const EmptyContent: Story = {
 	render: () => ({
-		components: { ModpackContentModal, ButtonStyled },
+		components: { ModpackContentModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ModpackContentModal> | null>(null)
 			const openModal = () => modalRef.value?.show([])
@@ -496,9 +490,7 @@ export const EmptyContent: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">View Empty Modpack</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">View Empty Modpack</Button>
 				<ModpackContentModal ref="modalRef" />
 			</div>
 		`,
@@ -511,7 +503,7 @@ export const EmptyContent: Story = {
 
 export const LargeModpack: Story = {
 	render: () => ({
-		components: { ModpackContentModal, ButtonStyled },
+		components: { ModpackContentModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ModpackContentModal> | null>(null)
 			const openModal = () => modalRef.value?.show(largeModpackContent)
@@ -519,9 +511,7 @@ export const LargeModpack: Story = {
 		},
 		template: /*html*/ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">View Large Modpack (47 items)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">View Large Modpack (47 items)</Button>
 				<ModpackContentModal
 					ref="modalRef"
 					modpack-name="All the Mods 10"
@@ -538,7 +528,7 @@ export const LargeModpack: Story = {
 
 export const SearchDemo: Story = {
 	render: () => ({
-		components: { ModpackContentModal, ButtonStyled },
+		components: { ModpackContentModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ModpackContentModal> | null>(null)
 			const openModal = () => modalRef.value?.show(mixedModpackContent)
@@ -549,9 +539,7 @@ export const SearchDemo: Story = {
 				<p class="text-sm text-secondary max-w-md text-center">
 					Click the button and try searching for "sodium", "shader", or "faithful" to test the search functionality.
 				</p>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Test Search</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Test Search</Button>
 				<ModpackContentModal ref="modalRef" />
 			</div>
 		`,
@@ -564,7 +552,7 @@ export const SearchDemo: Story = {
 
 export const FilterDemo: Story = {
 	render: () => ({
-		components: { ModpackContentModal, ButtonStyled },
+		components: { ModpackContentModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ModpackContentModal> | null>(null)
 			const openModal = () => modalRef.value?.show(mixedModpackContent)
@@ -575,9 +563,7 @@ export const FilterDemo: Story = {
 				<p class="text-sm text-secondary max-w-md text-center">
 					Click the button and try the filter chips (Mods, Shaders, Resource Packs) to filter content by type.
 				</p>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Test Filters</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Test Filters</Button>
 				<ModpackContentModal ref="modalRef" />
 			</div>
 		`,
@@ -590,7 +576,7 @@ export const FilterDemo: Story = {
 
 export const MixedOwnerTypes: Story = {
 	render: () => ({
-		components: { ModpackContentModal, ButtonStyled },
+		components: { ModpackContentModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ModpackContentModal> | null>(null)
 			// Mix of user and organization owners
@@ -608,9 +594,7 @@ export const MixedOwnerTypes: Story = {
 				<p class="text-sm text-secondary max-w-md text-center">
 					Shows content with different owner types: users (circular avatar) and organizations (rounded + icon).
 				</p>
-				<ButtonStyled color="brand">
-					<button @click="openModal">View Mixed Owners</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">View Mixed Owners</Button>
 				<ModpackContentModal ref="modalRef" />
 			</div>
 		`,
diff --git a/packages/ui/src/stories/modal/ConfirmLeaveModal.stories.ts b/packages/ui/src/stories/modal/ConfirmLeaveModal.stories.ts
index 9509d27ac1..ac33eb8886 100644
--- a/packages/ui/src/stories/modal/ConfirmLeaveModal.stories.ts
+++ b/packages/ui/src/stories/modal/ConfirmLeaveModal.stories.ts
@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import ConfirmLeaveModal from '../../components/modal/ConfirmLeaveModal.vue'
 
 const meta = {
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof ConfirmLeaveModal>
 
 export const Default: Story = {
 	render: () => ({
-		components: { ConfirmLeaveModal, ButtonStyled },
+		components: { ConfirmLeaveModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
 			const result = ref<string>('')
@@ -27,9 +27,7 @@ export const Default: Story = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="red">
-					<button @click="openModal">Trigger Leave Confirmation</button>
-				</ButtonStyled>
+				<Button type="colored" color="red" @click="openModal">Trigger Leave Confirmation</Button>
 				<p v-if="result" class="mt-4 text-secondary">{{ result }}</p>
 				<ConfirmLeaveModal ref="modalRef" />
 			</div>
@@ -39,7 +37,7 @@ export const Default: Story = {
 
 export const CustomMessages: Story = {
 	render: () => ({
-		components: { ConfirmLeaveModal, ButtonStyled },
+		components: { ConfirmLeaveModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
 			const openModal = () => modalRef.value?.prompt()
@@ -47,9 +45,7 @@ export const CustomMessages: Story = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="red">
-					<button @click="openModal">Discard Draft?</button>
-				</ButtonStyled>
+				<Button type="colored" color="red" @click="openModal">Discard Draft?</Button>
 				<ConfirmLeaveModal
 					ref="modalRef"
 					title="Discard draft?"
@@ -65,7 +61,7 @@ export const CustomMessages: Story = {
 
 export const WarningAdmonition: Story = {
 	render: () => ({
-		components: { ConfirmLeaveModal, ButtonStyled },
+		components: { ConfirmLeaveModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ConfirmLeaveModal> | null>(null)
 			const openModal = () => modalRef.value?.prompt()
@@ -73,9 +69,7 @@ export const WarningAdmonition: Story = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="orange">
-					<button @click="openModal">Open Warning Variant</button>
-				</ButtonStyled>
+				<Button type="colored" color="orange" @click="openModal">Open Warning Variant</Button>
 				<ConfirmLeaveModal
 					ref="modalRef"
 					admonition-type="warning"
diff --git a/packages/ui/src/stories/modal/NewModal.stories.ts b/packages/ui/src/stories/modal/NewModal.stories.ts
index b044f7289f..4eb09d7491 100644
--- a/packages/ui/src/stories/modal/NewModal.stories.ts
+++ b/packages/ui/src/stories/modal/NewModal.stories.ts
@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import NewModal from '../../components/modal/NewModal.vue'
 
 const meta = {
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof NewModal>
 
 export const Default: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { NewModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -22,9 +22,7 @@ export const Default: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Open Modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Open Modal</Button>
 				<NewModal ref="modalRef" header="Example Modal">
 					<p>This is the modal content.</p>
 					<p class="text-secondary mt-2">You can put any content here.</p>
@@ -36,7 +34,7 @@ export const Default: Story = {
 
 export const WithActions: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { NewModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -44,19 +42,13 @@ export const WithActions: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Open Modal with Actions</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Open Modal with Actions</Button>
 				<NewModal ref="modalRef" header="Confirm Action">
 					<p>Are you sure you want to proceed with this action?</p>
 					<template #actions>
 						<div class="flex gap-2 justify-end">
-							<ButtonStyled>
-								<button @click="modalRef?.hide()">Cancel</button>
-							</ButtonStyled>
-							<ButtonStyled color="brand">
-								<button @click="modalRef?.hide()">Confirm</button>
-							</ButtonStyled>
+							<Button @click="modalRef?.hide()">Cancel</Button>
+							<Button type="colored" color="brand" @click="modalRef?.hide()">Confirm</Button>
 						</div>
 					</template>
 				</NewModal>
@@ -67,7 +59,7 @@ export const WithActions: Story = {
 
 export const DangerFade: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { NewModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -75,19 +67,13 @@ export const DangerFade: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="red">
-					<button @click="openModal">Open Danger Modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="red" @click="openModal">Open Danger Modal</Button>
 				<NewModal ref="modalRef" header="Delete Item" fade="danger">
 					<p>Are you sure you want to delete this item? This action cannot be undone.</p>
 					<template #actions>
 						<div class="flex gap-2 justify-end">
-							<ButtonStyled>
-								<button @click="modalRef?.hide()">Cancel</button>
-							</ButtonStyled>
-							<ButtonStyled color="red">
-								<button @click="modalRef?.hide()">Delete</button>
-							</ButtonStyled>
+							<Button @click="modalRef?.hide()">Cancel</Button>
+							<Button type="colored" color="red" @click="modalRef?.hide()">Delete</Button>
 						</div>
 					</template>
 				</NewModal>
@@ -98,7 +84,7 @@ export const DangerFade: Story = {
 
 export const WarningFade: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { NewModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -106,19 +92,13 @@ export const WarningFade: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="orange">
-					<button @click="openModal">Open Warning Modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="orange" @click="openModal">Open Warning Modal</Button>
 				<NewModal ref="modalRef" header="Warning" fade="warning">
 					<p>This action may have unintended consequences. Please review before proceeding.</p>
 					<template #actions>
 						<div class="flex gap-2 justify-end">
-							<ButtonStyled>
-								<button @click="modalRef?.hide()">Cancel</button>
-							</ButtonStyled>
-							<ButtonStyled color="orange">
-								<button @click="modalRef?.hide()">Proceed</button>
-							</ButtonStyled>
+							<Button @click="modalRef?.hide()">Cancel</Button>
+							<Button type="colored" color="orange" @click="modalRef?.hide()">Proceed</Button>
 						</div>
 					</template>
 				</NewModal>
@@ -129,7 +109,7 @@ export const WarningFade: Story = {
 
 export const Scrollable: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { NewModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -137,9 +117,7 @@ export const Scrollable: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Open Scrollable Modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Open Scrollable Modal</Button>
 				<NewModal ref="modalRef" header="Scrollable Content" scrollable max-content-height="300px">
 					<div class="space-y-4">
 						<p v-for="i in 20" :key="i">
@@ -148,9 +126,7 @@ export const Scrollable: Story = {
 					</div>
 					<template #actions>
 						<div class="flex gap-2 justify-end">
-							<ButtonStyled color="brand">
-								<button @click="modalRef?.hide()">Close</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" @click="modalRef?.hide()">Close</Button>
 						</div>
 					</template>
 				</NewModal>
@@ -161,7 +137,7 @@ export const Scrollable: Story = {
 
 export const MergedHeader: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { NewModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -169,9 +145,7 @@ export const MergedHeader: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Open Modal (Merged Header)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Open Modal (Merged Header)</Button>
 				<NewModal ref="modalRef" hide-header merge-header>
 					<div class="text-center py-8">
 						<h2 class="text-xl font-bold mb-4">Custom Header Area</h2>
@@ -185,7 +159,7 @@ export const MergedHeader: Story = {
 
 export const NotClosable: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { NewModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -193,17 +167,13 @@ export const NotClosable: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Open Non-Closable Modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Open Non-Closable Modal</Button>
 				<NewModal ref="modalRef" header="Processing..." :closable="false" :close-on-esc="false" :close-on-click-outside="false">
 					<p>This modal cannot be closed by clicking outside or pressing escape.</p>
 					<p class="text-secondary mt-2">Only the action button can close it.</p>
 					<template #actions>
 						<div class="flex justify-end">
-							<ButtonStyled color="brand">
-								<button @click="modalRef?.hide()">I understand, close</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" @click="modalRef?.hide()">I understand, close</Button>
 						</div>
 					</template>
 				</NewModal>
@@ -214,7 +184,7 @@ export const NotClosable: Story = {
 
 export const NoPadding: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { NewModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
 			const openModal = () => modalRef.value?.show()
@@ -222,16 +192,12 @@ export const NoPadding: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Open Modal (No Padding)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Open Modal (No Padding)</Button>
 				<NewModal ref="modalRef" header="No Padding Modal" no-padding>
 					<p>This modal has no default padding on the content area.</p>
 					<template #actions>
 						<div class="flex gap-2 justify-end p-6 pt-0">
-							<ButtonStyled color="brand">
-								<button @click="modalRef?.hide()">Close</button>
-							</ButtonStyled>
+							<Button type="colored" color="brand" @click="modalRef?.hide()">Close</Button>
 						</div>
 					</template>
 				</NewModal>
diff --git a/packages/ui/src/stories/modal/ShareModal.stories.ts b/packages/ui/src/stories/modal/ShareModal.stories.ts
index 10b07701f4..28c81af2ae 100644
--- a/packages/ui/src/stories/modal/ShareModal.stories.ts
+++ b/packages/ui/src/stories/modal/ShareModal.stories.ts
@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import ShareModal from '../../components/modal/ShareModal.vue'
 
 const meta = {
@@ -20,7 +20,7 @@ export const LinkShare: Story = {
 		link: true,
 	},
 	render: (args) => ({
-		components: { ShareModal, ButtonStyled },
+		components: { ShareModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ShareModal> | null>(null)
 			const openModal = () => {
@@ -30,9 +30,7 @@ export const LinkShare: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Open Link Share Modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Open Link Share Modal</Button>
 				<ShareModal ref="modalRef" v-bind="args" />
 			</div>
 		`,
@@ -47,7 +45,7 @@ export const TextShare: Story = {
 		link: false,
 	},
 	render: (args) => ({
-		components: { ShareModal, ButtonStyled },
+		components: { ShareModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ShareModal> | null>(null)
 			const openModal = () => {
@@ -57,9 +55,7 @@ export const TextShare: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="openModal">Open Text Share Modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Open Text Share Modal</Button>
 				<ShareModal ref="modalRef" v-bind="args" />
 			</div>
 		`,
diff --git a/packages/ui/src/stories/modal/TabbedModal.stories.ts b/packages/ui/src/stories/modal/TabbedModal.stories.ts
index aee894f212..5d85e192ef 100644
--- a/packages/ui/src/stories/modal/TabbedModal.stories.ts
+++ b/packages/ui/src/stories/modal/TabbedModal.stories.ts
@@ -14,7 +14,7 @@ import {
 import type { StoryObj } from '@storybook/vue3-vite'
 import { defineComponent, h, ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import UnsavedChangesPopup from '../../components/base/UnsavedChangesPopup.vue'
 import TabbedModal from '../../components/modal/TabbedModal.vue'
 
@@ -42,7 +42,7 @@ export default meta
 
 export const Default: StoryObj = {
 	render: () => ({
-		components: { TabbedModal, ButtonStyled },
+		components: { TabbedModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
 			const tabs = [
@@ -66,9 +66,7 @@ export const Default: StoryObj = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show()">Open Tabbed Modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show()">Open Tabbed Modal</Button>
 				<TabbedModal ref="modalRef" header="Settings" :tabs="tabs" />
 			</div>
 		`,
@@ -77,7 +75,7 @@ export const Default: StoryObj = {
 
 export const WithTitleSlot: StoryObj = {
 	render: () => ({
-		components: { TabbedModal, ButtonStyled, SettingsIcon },
+		components: { TabbedModal, SettingsIcon, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
 			const tabs = [
@@ -96,9 +94,7 @@ export const WithTitleSlot: StoryObj = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show()">Open with Title Slot</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show()">Open with Title Slot</Button>
 				<TabbedModal ref="modalRef" :tabs="tabs">
 					<template #title>
 						<span class="flex items-center gap-2 text-lg font-extrabold text-contrast">
@@ -113,7 +109,7 @@ export const WithTitleSlot: StoryObj = {
 
 export const WithFooter: StoryObj = {
 	render: () => ({
-		components: { TabbedModal, ButtonStyled },
+		components: { TabbedModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
 			const tabs = [
@@ -137,9 +133,7 @@ export const WithFooter: StoryObj = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show()">Open with Footer</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show()">Open with Footer</Button>
 				<TabbedModal ref="modalRef" header="Settings" :tabs="tabs">
 					<template #footer>
 						<div class="mt-auto text-secondary text-sm">
@@ -155,7 +149,7 @@ export const WithFooter: StoryObj = {
 
 export const WithFloatingActionBar: StoryObj = {
 	render: () => ({
-		components: { TabbedModal, ButtonStyled, UnsavedChangesPopup },
+		components: { TabbedModal, UnsavedChangesPopup, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
 			const dirty = ref(true)
@@ -170,9 +164,7 @@ export const WithFloatingActionBar: StoryObj = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="dirty = true; modalRef?.show()">Open with Floating Action Bar</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="dirty = true; modalRef?.show()">Open with Floating Action Bar</Button>
 				<TabbedModal
 					ref="modalRef"
 					header="Settings"
@@ -196,7 +188,7 @@ export const WithFloatingActionBar: StoryObj = {
 
 export const WithBadge: StoryObj = {
 	render: () => ({
-		components: { TabbedModal, ButtonStyled },
+		components: { TabbedModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
 			const tabs = [
@@ -221,9 +213,7 @@ export const WithBadge: StoryObj = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show()">Open with Badge</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show()">Open with Badge</Button>
 				<TabbedModal ref="modalRef" header="Settings" :tabs="tabs" />
 			</div>
 		`,
@@ -232,7 +222,7 @@ export const WithBadge: StoryObj = {
 
 export const HiddenTabs: StoryObj = {
 	render: () => ({
-		components: { TabbedModal, ButtonStyled },
+		components: { TabbedModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
 			const tabs = [
@@ -257,9 +247,7 @@ export const HiddenTabs: StoryObj = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show()">Open with Hidden Tab</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show()">Open with Hidden Tab</Button>
 				<TabbedModal ref="modalRef" header="Settings" :tabs="tabs" />
 			</div>
 		`,
@@ -268,7 +256,7 @@ export const HiddenTabs: StoryObj = {
 
 export const ManyTabs: StoryObj = {
 	render: () => ({
-		components: { TabbedModal, ButtonStyled },
+		components: { TabbedModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
 			const tabs = [
@@ -331,9 +319,7 @@ export const ManyTabs: StoryObj = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show()">Open with Many Tabs</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show()">Open with Many Tabs</Button>
 				<TabbedModal ref="modalRef" header="Settings" :tabs="tabs" />
 			</div>
 		`,
@@ -342,7 +328,7 @@ export const ManyTabs: StoryObj = {
 
 export const ScrollableContent: StoryObj = {
 	render: () => ({
-		components: { TabbedModal, ButtonStyled },
+		components: { TabbedModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof TabbedModal> | null>(null)
 			const tabs = [
@@ -361,9 +347,7 @@ export const ScrollableContent: StoryObj = {
 		},
 		template: /* html */ `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show()">Open with Scrollable Content</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show()">Open with Scrollable Content</Button>
 				<TabbedModal ref="modalRef" header="Scrollable Demo" :tabs="tabs" />
 			</div>
 		`,
diff --git a/packages/ui/src/stories/modal/UnknownFileWarningModal.stories.ts b/packages/ui/src/stories/modal/UnknownFileWarningModal.stories.ts
index 902de288bc..8ec6c6085a 100644
--- a/packages/ui/src/stories/modal/UnknownFileWarningModal.stories.ts
+++ b/packages/ui/src/stories/modal/UnknownFileWarningModal.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import UnknownFileWarningModal from '../../components/modal/UnknownFileWarningModal.vue'
 
 const meta = {
@@ -17,15 +17,13 @@ type Story = StoryObj<typeof meta>
 
 export const Modpack: Story = {
 	render: () => ({
-		components: { ButtonStyled, UnknownFileWarningModal },
+		components: { UnknownFileWarningModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof UnknownFileWarningModal> | null>(null)
 			return { modalRef }
 		},
 		template: /* html */ `
-			<ButtonStyled color="brand">
-				<button @click="modalRef?.show()">Open modpack warning</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" @click="modalRef?.show()">Open modpack warning</Button>
 			<UnknownFileWarningModal
 				ref="modalRef"
 				mode="modpack"
@@ -45,15 +43,13 @@ export const Modpack: Story = {
 
 export const Mod: Story = {
 	render: () => ({
-		components: { ButtonStyled, UnknownFileWarningModal },
+		components: { UnknownFileWarningModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof UnknownFileWarningModal> | null>(null)
 			return { modalRef }
 		},
 		template: /* html */ `
-			<ButtonStyled color="brand">
-				<button @click="modalRef?.show()">Open file warning</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" @click="modalRef?.show()">Open file warning</Button>
 			<UnknownFileWarningModal
 				ref="modalRef"
 				mode="mod"
diff --git a/packages/ui/src/stories/modal/UpdateToPlayModal.stories.ts b/packages/ui/src/stories/modal/UpdateToPlayModal.stories.ts
index adb4af7c4b..46c81ab712 100644
--- a/packages/ui/src/stories/modal/UpdateToPlayModal.stories.ts
+++ b/packages/ui/src/stories/modal/UpdateToPlayModal.stories.ts
@@ -2,7 +2,7 @@ import { DownloadIcon } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import ContentDiffModal from '../../layouts/shared/installation-settings/components/ContentDiffModal.vue'
 import type { ContentDiffItem } from '../../layouts/shared/installation-settings/types'
 
@@ -66,15 +66,13 @@ const diffs: ContentDiffItem[] = [
 
 export const ExternalFiles: Story = {
 	render: () => ({
-		components: { ButtonStyled, ContentDiffModal },
+		components: { ContentDiffModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof ContentDiffModal> | null>(null)
 			return { diffs, DownloadIcon, modalRef }
 		},
 		template: /* html */ `
-			<ButtonStyled color="brand">
-				<button @click="modalRef?.show()">Open update warning</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" @click="modalRef?.show()">Open update warning</Button>
 			<ContentDiffModal
 				ref="modalRef"
 				header="Update to play"
diff --git a/packages/ui/src/stories/modal/UploadProgressModal.stories.ts b/packages/ui/src/stories/modal/UploadProgressModal.stories.ts
index 5f82830156..5f59705576 100644
--- a/packages/ui/src/stories/modal/UploadProgressModal.stories.ts
+++ b/packages/ui/src/stories/modal/UploadProgressModal.stories.ts
@@ -2,7 +2,7 @@ import type { UploadHandle, UploadProgress } from '@modrinth/api-client'
 import type { StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import UploadProgressModal from '../../components/modal/UploadProgressModal.vue'
 
 const meta = {
@@ -52,7 +52,7 @@ function createMockUploadHandle(totalBytes: number, durationMs: number): UploadH
 
 export const Default: Story = {
 	render: () => ({
-		components: { UploadProgressModal, ButtonStyled },
+		components: { UploadProgressModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof UploadProgressModal> | null>(null)
 			const startUpload = () => {
@@ -63,9 +63,7 @@ export const Default: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="startUpload">Upload 50MB file (3s)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="startUpload">Upload 50MB file (3s)</Button>
 				<UploadProgressModal ref="modalRef" />
 			</div>
 		`,
@@ -74,7 +72,7 @@ export const Default: Story = {
 
 export const LargeFile: Story = {
 	render: () => ({
-		components: { UploadProgressModal, ButtonStyled },
+		components: { UploadProgressModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof UploadProgressModal> | null>(null)
 			const startUpload = () => {
@@ -85,9 +83,7 @@ export const LargeFile: Story = {
 		},
 		template: `
 			<div>
-				<ButtonStyled color="brand">
-					<button @click="startUpload">Upload 500MB file (8s)</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="startUpload">Upload 500MB file (8s)</Button>
 				<UploadProgressModal ref="modalRef" />
 			</div>
 		`,
diff --git a/packages/ui/src/stories/nav/NotificationPanel.stories.ts b/packages/ui/src/stories/nav/NotificationPanel.stories.ts
index 0f0f865d8c..e4a29fda5f 100644
--- a/packages/ui/src/stories/nav/NotificationPanel.stories.ts
+++ b/packages/ui/src/stories/nav/NotificationPanel.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import NotificationPanel from '../../components/nav/NotificationPanel.vue'
 import { injectNotificationManager } from '../../providers'
 
@@ -13,7 +13,7 @@ export default meta
 
 export const Default: StoryObj = {
 	render: () => ({
-		components: { NotificationPanel, ButtonStyled },
+		components: { NotificationPanel, Button },
 		setup() {
 			const notificationManager = injectNotificationManager()
 
@@ -87,24 +87,12 @@ export const Default: StoryObj = {
 		template: /* html */ `
 			<div>
 				<div class="flex flex-wrap gap-2">
-					<ButtonStyled color="green">
-						<button @click="showSuccess">Success</button>
-					</ButtonStyled>
-					<ButtonStyled color="red">
-						<button @click="showError">Error</button>
-					</ButtonStyled>
-					<ButtonStyled color="orange">
-						<button @click="showWarning">Warning</button>
-					</ButtonStyled>
-					<ButtonStyled color="blue">
-						<button @click="showInfo">Info</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="showActions">Actions</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="clearAll">Clear All</button>
-					</ButtonStyled>
+					<Button type="colored" color="green" @click="showSuccess">Success</Button>
+					<Button type="colored" color="red" @click="showError">Error</Button>
+					<Button type="colored" color="orange" @click="showWarning">Warning</Button>
+					<Button type="colored" color="blue" @click="showInfo">Info</Button>
+					<Button @click="showActions">Actions</Button>
+					<Button @click="clearAll">Clear All</Button>
 				</div>
 				<NotificationPanel />
 			</div>
@@ -114,7 +102,7 @@ export const Default: StoryObj = {
 
 export const LeftSide: StoryObj = {
 	render: () => ({
-		components: { NotificationPanel, ButtonStyled },
+		components: { NotificationPanel, Button },
 		setup() {
 			const notificationManager = injectNotificationManager()
 			notificationManager.setNotificationLocation('left')
@@ -161,21 +149,11 @@ export const LeftSide: StoryObj = {
 		template: /* html */ `
 			<div>
 				<div class="flex flex-wrap gap-2">
-					<ButtonStyled color="green">
-						<button @click="showSuccess">Success</button>
-					</ButtonStyled>
-					<ButtonStyled color="red">
-						<button @click="showError">Error</button>
-					</ButtonStyled>
-					<ButtonStyled color="orange">
-						<button @click="showWarning">Warning</button>
-					</ButtonStyled>
-					<ButtonStyled color="blue">
-						<button @click="showInfo">Info</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="clearAll">Clear All</button>
-					</ButtonStyled>
+					<Button type="colored" color="green" @click="showSuccess">Success</Button>
+					<Button type="colored" color="red" @click="showError">Error</Button>
+					<Button type="colored" color="orange" @click="showWarning">Warning</Button>
+					<Button type="colored" color="blue" @click="showInfo">Info</Button>
+					<Button @click="clearAll">Clear All</Button>
 				</div>
 				<NotificationPanel />
 			</div>
diff --git a/packages/ui/src/stories/nav/PopupNotificationPanel.stories.ts b/packages/ui/src/stories/nav/PopupNotificationPanel.stories.ts
index b75607a006..ee0ecf4db3 100644
--- a/packages/ui/src/stories/nav/PopupNotificationPanel.stories.ts
+++ b/packages/ui/src/stories/nav/PopupNotificationPanel.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import PopupNotificationPanel from '../../components/nav/PopupNotificationPanel.vue'
 import { injectPopupNotificationManager } from '../../providers'
 
@@ -13,7 +13,7 @@ export default meta
 
 export const Default: StoryObj = {
 	render: () => ({
-		components: { PopupNotificationPanel, ButtonStyled },
+		components: { PopupNotificationPanel, Button },
 		setup() {
 			const popupManager = injectPopupNotificationManager()
 
@@ -209,39 +209,17 @@ export const Default: StoryObj = {
 		template: /* html */ `
 			<div>
 				<div class="flex flex-wrap gap-2">
-					<ButtonStyled color="green">
-						<button @click="showSuccess">Install Complete</button>
-					</ButtonStyled>
-					<ButtonStyled color="red">
-						<button @click="showError">Download Failed</button>
-					</ButtonStyled>
-					<ButtonStyled color="orange">
-						<button @click="showWarning">Update Available (Permanent)</button>
-					</ButtonStyled>
-					<ButtonStyled color="blue">
-						<button @click="showInfo">Download Complete</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="showNoButtons">No Buttons</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="showPermanent">Permanent</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="showBlocking">Blocking</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="showWaitingProgress">Waiting Progress</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="showDeterminateProgress">Determinate Progress</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="showGroupedDownloads">Grouped Downloads</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="clearAll">Clear All</button>
-					</ButtonStyled>
+					<Button type="colored" color="green" @click="showSuccess">Install Complete</Button>
+					<Button type="colored" color="red" @click="showError">Download Failed</Button>
+					<Button type="colored" color="orange" @click="showWarning">Update Available (Permanent)</Button>
+					<Button type="colored" color="blue" @click="showInfo">Download Complete</Button>
+					<Button @click="showNoButtons">No Buttons</Button>
+					<Button @click="showPermanent">Permanent</Button>
+					<Button @click="showBlocking">Blocking</Button>
+					<Button @click="showWaitingProgress">Waiting Progress</Button>
+					<Button @click="showDeterminateProgress">Determinate Progress</Button>
+					<Button @click="showGroupedDownloads">Grouped Downloads</Button>
+					<Button @click="clearAll">Clear All</Button>
 				</div>
 				<PopupNotificationPanel />
 			</div>
diff --git a/packages/ui/src/stories/project/ProjectPageVersions.stories.ts b/packages/ui/src/stories/project/ProjectPageVersions.stories.ts
index ec35f531fb..2acf5ab2bc 100644
--- a/packages/ui/src/stories/project/ProjectPageVersions.stories.ts
+++ b/packages/ui/src/stories/project/ProjectPageVersions.stories.ts
@@ -3,7 +3,7 @@ import { DownloadIcon, MoreVerticalIcon } from '@modrinth/assets'
 import type { GameVersionTag, Version } from '@modrinth/utils'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { ButtonLink, IconButton } from '../../components/base/buttons'
 import ProjectPageVersions from '../../components/project/ProjectPageVersions.vue'
 
 type StoryVersion = Version & {
@@ -148,28 +148,24 @@ const meta = {
 		versionLink: (version: Version) => `https://modrinth.com/mod/sodium/version/${version.id}`,
 	},
 	render: (args) => ({
-		components: { ButtonStyled, DownloadIcon, MoreVerticalIcon, ProjectPageVersions },
+		components: { DownloadIcon, MoreVerticalIcon, ProjectPageVersions, ButtonLink, IconButton },
 		setup() {
 			return { args }
 		},
 		template: /* html */ `
 			<ProjectPageVersions v-bind="args">
 				<template #actions="{ version }">
-					<ButtonStyled circular type="transparent">
-						<a
+					<ButtonLink type="quiet"
 							v-tooltip="'Download'"
 							:href="version.files[0]?.url"
 							:download="version.files[0]?.filename"
 							aria-label="Download"
-						>
-							<DownloadIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular type="transparent">
-						<button v-tooltip="'More options'" aria-label="More options">
-							<MoreVerticalIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+						 class="!w-9 !px-0 !rounded-full">
+						<DownloadIcon aria-hidden="true" />
+					</ButtonLink>
+					<IconButton type="quiet" label="More options" v-tooltip="'More options'" aria-label="More options">
+						<MoreVerticalIcon aria-hidden="true" />
+					</IconButton>
 				</template>
 			</ProjectPageVersions>
 		`,
diff --git a/packages/ui/src/stories/servers/CreationFlowModal.stories.ts b/packages/ui/src/stories/servers/CreationFlowModal.stories.ts
index a3007db595..4082fc134a 100644
--- a/packages/ui/src/stories/servers/CreationFlowModal.stories.ts
+++ b/packages/ui/src/stories/servers/CreationFlowModal.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import type { CreationFlowContextValue } from '../../components/flows/creation-flow-modal/creation-flow-context'
 import CreationFlowModal from '../../components/flows/creation-flow-modal/index.vue'
 
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof meta>
 export const CreateWorld: Story = {
 	name: 'Create World (Hosting)',
 	render: () => ({
-		components: { CreationFlowModal, ButtonStyled },
+		components: { CreationFlowModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
 			const lastEvent = ref('')
@@ -36,9 +36,7 @@ export const CreateWorld: Story = {
 		},
 		template: /*html*/ `
 			<div class="flex flex-col gap-4 items-center">
-				<ButtonStyled color="brand">
-					<button @click="openModal">Create World</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Create World</Button>
 				<p v-if="lastEvent" class="text-sm text-secondary mt-2">Last event: {{ lastEvent }}</p>
 				<CreationFlowModal
 					ref="modalRef"
@@ -60,7 +58,7 @@ export const CreateWorld: Story = {
 export const ServerOnboarding: Story = {
 	name: 'Server Setup (Legacy) (Hosting)',
 	render: () => ({
-		components: { CreationFlowModal, ButtonStyled },
+		components: { CreationFlowModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
 			const lastEvent = ref('')
@@ -73,9 +71,7 @@ export const ServerOnboarding: Story = {
 		},
 		template: /*html*/ `
 			<div class="flex flex-col gap-4 items-center">
-				<ButtonStyled color="brand">
-					<button @click="openModal">Set Up Server</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Set Up Server</Button>
 				<p v-if="lastEvent" class="text-sm text-secondary mt-2">Last event: {{ lastEvent }}</p>
 				<CreationFlowModal
 					ref="modalRef"
@@ -97,7 +93,7 @@ export const ServerOnboarding: Story = {
 export const Instance: Story = {
 	name: 'Create Instance (App)',
 	render: () => ({
-		components: { CreationFlowModal, ButtonStyled },
+		components: { CreationFlowModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
 			const lastEvent = ref('')
@@ -110,9 +106,7 @@ export const Instance: Story = {
 		},
 		template: /*html*/ `
 			<div class="flex flex-col gap-4 items-center">
-				<ButtonStyled color="brand">
-					<button @click="openModal">Create Instance</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="openModal">Create Instance</Button>
 				<p v-if="lastEvent" class="text-sm text-secondary mt-2">Last event: {{ lastEvent }}</p>
 				<CreationFlowModal
 					ref="modalRef"
diff --git a/packages/ui/src/stories/servers/GrantAccessModal.stories.ts b/packages/ui/src/stories/servers/GrantAccessModal.stories.ts
index af99dfc773..997f10f8be 100644
--- a/packages/ui/src/stories/servers/GrantAccessModal.stories.ts
+++ b/packages/ui/src/stories/servers/GrantAccessModal.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import GrantAccessModal from '../../components/servers/access/GrantAccessModal.vue'
 import type {
 	GrantServerAccessPayload,
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	render: () => ({
-		components: { ButtonStyled, GrantAccessModal },
+		components: { GrantAccessModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof GrantAccessModal> | null>(null)
 			const lastAddedUser = ref('')
@@ -49,9 +49,7 @@ export const Default: Story = {
 		},
 		template: /* html */ `
 			<div class="flex flex-col items-center gap-4">
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show($event)">Add user</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show($event)">Add user</Button>
 				<p v-if="lastAddedUser" class="m-0 text-sm text-secondary">Last added: {{ lastAddedUser }}</p>
 				<GrantAccessModal ref="modalRef" :search-users="searchUsers" @grant="handleGrant" />
 			</div>
@@ -61,7 +59,7 @@ export const Default: Story = {
 
 export const ExistingMember: Story = {
 	render: () => ({
-		components: { ButtonStyled, GrantAccessModal },
+		components: { GrantAccessModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof GrantAccessModal> | null>(null)
 			const users = [
@@ -88,9 +86,7 @@ export const ExistingMember: Story = {
 		},
 		template: /* html */ `
 			<div class="flex flex-col items-center gap-4">
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show($event)">Add existing user</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show($event)">Add existing user</Button>
 				<GrantAccessModal ref="modalRef" :members="members" :search-users="searchUsers" />
 			</div>
 		`,
diff --git a/packages/ui/src/stories/servers/RemoveAccessModal.stories.ts b/packages/ui/src/stories/servers/RemoveAccessModal.stories.ts
index 6b81a8495d..ee0834ac09 100644
--- a/packages/ui/src/stories/servers/RemoveAccessModal.stories.ts
+++ b/packages/ui/src/stories/servers/RemoveAccessModal.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import RemoveAccessModal from '../../components/servers/access/RemoveAccessModal.vue'
 
 const meta = {
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	render: () => ({
-		components: { ButtonStyled, RemoveAccessModal },
+		components: { RemoveAccessModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof RemoveAccessModal> | null>(null)
 			const removed = ref(false)
@@ -28,9 +28,7 @@ export const Default: Story = {
 		},
 		template: /* html */ `
 			<div class="flex flex-col items-center gap-4">
-				<ButtonStyled color="red">
-					<button @click="modalRef?.show()">Remove user</button>
-				</ButtonStyled>
+				<Button type="colored" color="red" @click="modalRef?.show()">Remove user</Button>
 				<p v-if="removed" class="m-0 text-sm text-secondary">User removed</p>
 				<RemoveAccessModal
 					ref="modalRef"
@@ -46,7 +44,7 @@ export const Default: Story = {
 
 export const CancelInvite: Story = {
 	render: () => ({
-		components: { ButtonStyled, RemoveAccessModal },
+		components: { RemoveAccessModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof RemoveAccessModal> | null>(null)
 			const cancelled = ref(false)
@@ -57,9 +55,7 @@ export const CancelInvite: Story = {
 		},
 		template: /* html */ `
 			<div class="flex flex-col items-center gap-4">
-				<ButtonStyled color="red">
-					<button @click="modalRef?.show()">Cancel invite</button>
-				</ButtonStyled>
+				<Button type="colored" color="red" @click="modalRef?.show()">Cancel invite</Button>
 				<p v-if="cancelled" class="m-0 text-sm text-secondary">Invite cancelled</p>
 				<RemoveAccessModal
 					ref="modalRef"
diff --git a/packages/ui/src/stories/servers/ServerPanelAdmonitionCopyDraft.stories.ts b/packages/ui/src/stories/servers/ServerPanelAdmonitionCopyDraft.stories.ts
index 6ec76ee2c2..af8f324669 100644
--- a/packages/ui/src/stories/servers/ServerPanelAdmonitionCopyDraft.stories.ts
+++ b/packages/ui/src/stories/servers/ServerPanelAdmonitionCopyDraft.stories.ts
@@ -2,7 +2,7 @@ import { RotateCounterClockwiseIcon } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import Admonition from '../../components/base/Admonition.vue'
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 
 type AdmonitionType = 'info' | 'warning' | 'critical' | 'success'
 type ActionType = 'Cancel' | 'Retry' | 'Dismiss'
@@ -191,7 +191,7 @@ const sections: CopySection[] = [
 
 export const AllCopy: Story = {
 	render: () => ({
-		components: { Admonition, ButtonStyled, RotateCounterClockwiseIcon },
+		components: { Admonition, RotateCounterClockwiseIcon, Button },
 		setup() {
 			return { sections }
 		},
@@ -221,19 +221,11 @@ export const AllCopy: Story = {
 									"
 									#top-right-actions
 								>
-									<ButtonStyled v-if="item.action === 'Cancel'" type="outlined" color="blue">
-										<button class="!border" type="button">Cancel</button>
-									</ButtonStyled>
-									<ButtonStyled
-										v-else
-										type="outlined"
-										color="red"
-									>
-										<button class="!border" type="button">
-											<RotateCounterClockwiseIcon class="size-5" />
-											Retry
-										</button>
-									</ButtonStyled>
+									<Button type="outlined" v-if="item.action === 'Cancel'" class="!border !text-blue [&>svg]:!text-blue !shadow-[inset_0_0_0_1px_var(--color-blue)]" native-type="button">Cancel</Button>
+									<Button type="outlined" v-else class="!border !text-red [&>svg]:!text-red !shadow-[inset_0_0_0_1px_var(--color-red)]" native-type="button">
+										<RotateCounterClockwiseIcon class="size-5" />
+										Retry
+									</Button>
 								</template>
 							</Admonition>
 						</div>
@@ -246,7 +238,7 @@ export const AllCopy: Story = {
 
 export const TitleTreatmentExperiment: Story = {
 	render: () => ({
-		components: { Admonition, ButtonStyled, RotateCounterClockwiseIcon },
+		components: { Admonition, RotateCounterClockwiseIcon, Button },
 		template: /* html */ `
 			<div style="max-width: 840px;">
 				<Admonition
@@ -256,12 +248,10 @@ export const TitleTreatmentExperiment: Story = {
 				>
 					Something went wrong while creating World backup. Please try again or contact support if the issue continues.
 					<template #top-right-actions>
-						<ButtonStyled type="outlined" color="red">
-							<button class="!border" type="button">
-								<RotateCounterClockwiseIcon class="size-5" />
-								Retry
-							</button>
-						</ButtonStyled>
+						<Button type="outlined" class="!border !text-red [&>svg]:!text-red !shadow-[inset_0_0_0_1px_var(--color-red)]" native-type="button">
+							<RotateCounterClockwiseIcon class="size-5" />
+							Retry
+						</Button>
 					</template>
 				</Admonition>
 			</div>
diff --git a/packages/ui/src/stories/sharing/InvitePlayersModal.stories.ts b/packages/ui/src/stories/sharing/InvitePlayersModal.stories.ts
index ec69a691fa..f454d75cf9 100644
--- a/packages/ui/src/stories/sharing/InvitePlayersModal.stories.ts
+++ b/packages/ui/src/stories/sharing/InvitePlayersModal.stories.ts
@@ -2,7 +2,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button } from '../../components/base/buttons'
 import InvitePlayersModal from '../../components/sharing/invite-players-modal/index.vue'
 import type {
 	InviteLinkSettings,
@@ -98,7 +98,7 @@ function createSearchUsers() {
 
 function createRender(args: Record<string, unknown>) {
 	return {
-		components: { ButtonStyled, InvitePlayersModal },
+		components: { InvitePlayersModal, Button },
 		setup() {
 			const modalRef = ref<InstanceType<typeof InvitePlayersModal> | null>(null)
 			const friends = ref<InvitePlayersUser[]>(createFriends())
@@ -166,9 +166,7 @@ function createRender(args: Record<string, unknown>) {
 		},
 		template: /* html */ `
 			<div class="flex flex-col items-center gap-4">
-				<ButtonStyled color="brand">
-					<button @click="modalRef?.show($event)">Open modal</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" @click="modalRef?.show($event)">Open modal</Button>
 				<p v-if="lastAction" class="m-0 text-sm text-secondary">{{ lastAction }}</p>
 				<InvitePlayersModal
 					ref="modalRef"
diff --git a/packages/ui/src/stories/skin/SkinButton.stories.ts b/packages/ui/src/stories/skin/SkinButton.stories.ts
index 53b71b6204..1a7dfe817a 100644
--- a/packages/ui/src/stories/skin/SkinButton.stories.ts
+++ b/packages/ui/src/stories/skin/SkinButton.stories.ts
@@ -1,7 +1,7 @@
 import { EditIcon, TrashIcon } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { Button, IconButton } from '../../components/base/buttons'
 import SkinButton from '../../components/skin/SkinButton.vue'
 
 const frontImage = `data:image/svg+xml,${encodeURIComponent(`
@@ -62,7 +62,7 @@ export const ActiveUnselected: Story = {
 
 export const WithActions: Story = {
 	render: (args) => ({
-		components: { ButtonStyled, EditIcon, SkinButton, TrashIcon },
+		components: { EditIcon, SkinButton, TrashIcon, Button, IconButton },
 		setup() {
 			return { args }
 		},
@@ -70,16 +70,12 @@ export const WithActions: Story = {
 			<div class="w-[156px]">
 				<SkinButton v-bind="args">
 					<template #overlay-buttons>
-						<ButtonStyled color="brand">
-							<button class="pointer-events-auto">
-								<EditIcon /> Edit
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular color="red">
-							<button class="pointer-events-auto" aria-label="Delete skin">
-								<TrashIcon />
-							</button>
-						</ButtonStyled>
+						<Button type="colored" color="brand" class="pointer-events-auto">
+							<EditIcon /> Edit
+						</Button>
+						<IconButton type="colored" color="red" label="Delete skin" class="pointer-events-auto">
+							<TrashIcon />
+						</IconButton>
 					</template>
 				</SkinButton>
 			</div>
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 541b999cf9..6aeb20c1a9 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -12,6 +12,7 @@ export * from './server-content-installing'
 export * from './server-search'
 export * from './tag-messages'
 export * from './truncate'
+export * from './use-anchored-teleport'
 export * from './version-compatibility'
 export * from './vue-children'
 export * from './webgl/skin-rendering'
diff --git a/packages/ui/src/utils/use-anchored-teleport.ts b/packages/ui/src/utils/use-anchored-teleport.ts
new file mode 100644
index 0000000000..453de58fb6
--- /dev/null
+++ b/packages/ui/src/utils/use-anchored-teleport.ts
@@ -0,0 +1,162 @@
+import type { CSSProperties, Ref } from 'vue'
+import { nextTick, onUnmounted, ref, watch } from 'vue'
+
+export type AnchoredTeleportPlacement =
+	| 'bottom-start'
+	| 'bottom-end'
+	| 'top-start'
+	| 'top-end'
+	| 'right-start'
+	| 'right-end'
+	| 'left-start'
+	| 'left-end'
+export type AnchoredTeleportSide = 'top' | 'right' | 'bottom' | 'left'
+
+const viewportPadding = 8
+const anchorPadding = 18
+const defaultDistance = ref(8)
+
+export function useAnchoredTeleport(
+	trigger: Readonly<Ref<HTMLElement | null>>,
+	panel: Readonly<Ref<HTMLElement | null>>,
+	placement: Readonly<Ref<AnchoredTeleportPlacement>>,
+	distance: Readonly<Ref<number>> = defaultDistance,
+) {
+	const isOpen = ref(false)
+	const panelStyle = ref<CSSProperties>({
+		top: '0px',
+		left: '0px',
+		visibility: 'hidden',
+	})
+	const anchorStyle = ref<CSSProperties>({})
+	const resolvedSide = ref<AnchoredTeleportSide>('bottom')
+
+	let resizeObserver: ResizeObserver | undefined
+
+	function updatePosition() {
+		if (!isOpen.value || !trigger.value || !panel.value) return
+
+		const triggerRect = trigger.value.getBoundingClientRect()
+		const panelRect = panel.value.getBoundingClientRect()
+		const offset = distance.value
+		const alignsEnd = placement.value.endsWith('end')
+		const isHorizontal = placement.value.startsWith('right') || placement.value.startsWith('left')
+		let idealTop: number
+		let idealLeft: number
+
+		if (isHorizontal) {
+			const prefersRight = placement.value.startsWith('right')
+			const spaceRight = window.innerWidth - triggerRect.right - viewportPadding
+			const spaceLeft = triggerRect.left - viewportPadding
+			const opensRight = prefersRight
+				? panelRect.width + offset <= spaceRight || spaceRight > spaceLeft
+				: panelRect.width + offset > spaceLeft && spaceRight > spaceLeft
+
+			resolvedSide.value = opensRight ? 'right' : 'left'
+			idealTop = alignsEnd ? triggerRect.bottom - panelRect.height : triggerRect.top
+			idealLeft = opensRight
+				? triggerRect.right + offset
+				: triggerRect.left - panelRect.width - offset
+		} else {
+			const prefersTop = placement.value.startsWith('top')
+			const spaceBelow = window.innerHeight - triggerRect.bottom - viewportPadding
+			const spaceAbove = triggerRect.top - viewportPadding
+			const opensAbove = prefersTop
+				? panelRect.height + offset <= spaceAbove || spaceAbove > spaceBelow
+				: panelRect.height + offset > spaceBelow && spaceAbove > spaceBelow
+
+			resolvedSide.value = opensAbove ? 'top' : 'bottom'
+			idealTop = opensAbove
+				? triggerRect.top - panelRect.height - offset
+				: triggerRect.bottom + offset
+			idealLeft = alignsEnd ? triggerRect.right - panelRect.width : triggerRect.left
+		}
+
+		const maxTop = Math.max(
+			viewportPadding,
+			window.innerHeight - panelRect.height - viewportPadding,
+		)
+		const maxLeft = Math.max(viewportPadding, window.innerWidth - panelRect.width - viewportPadding)
+		const panelTop = Math.min(Math.max(idealTop, viewportPadding), maxTop)
+		const panelLeft = Math.min(Math.max(idealLeft, viewportPadding), maxLeft)
+
+		panelStyle.value = {
+			top: `${panelTop}px`,
+			left: `${panelLeft}px`,
+			visibility: 'visible',
+		}
+		anchorStyle.value = isHorizontal
+			? {
+					top: `${Math.min(
+						Math.max(triggerRect.top + triggerRect.height / 2 - panelTop, anchorPadding),
+						Math.max(anchorPadding, panelRect.height - anchorPadding),
+					)}px`,
+				}
+			: {
+					left: `${Math.min(
+						Math.max(triggerRect.left + triggerRect.width / 2 - panelLeft, anchorPadding),
+						Math.max(anchorPadding, panelRect.width - anchorPadding),
+					)}px`,
+				}
+	}
+
+	function handlePointerDown(event: PointerEvent) {
+		const target = event.target as Node | null
+		if (!target || trigger.value?.contains(target) || panel.value?.contains(target)) return
+		close()
+	}
+
+	function addListeners() {
+		document.addEventListener('pointerdown', handlePointerDown)
+		window.addEventListener('resize', updatePosition)
+		window.addEventListener('scroll', updatePosition, true)
+
+		resizeObserver = new ResizeObserver(updatePosition)
+		if (trigger.value) resizeObserver.observe(trigger.value)
+		if (panel.value) resizeObserver.observe(panel.value)
+	}
+
+	function removeListeners() {
+		document.removeEventListener('pointerdown', handlePointerDown)
+		window.removeEventListener('resize', updatePosition)
+		window.removeEventListener('scroll', updatePosition, true)
+		resizeObserver?.disconnect()
+		resizeObserver = undefined
+	}
+
+	async function open() {
+		if (isOpen.value) return
+		panelStyle.value = { top: '0px', left: '0px', visibility: 'hidden' }
+		isOpen.value = true
+		await nextTick()
+		updatePosition()
+		addListeners()
+	}
+
+	function close(restoreFocus = false) {
+		if (!isOpen.value) return
+		isOpen.value = false
+		removeListeners()
+		if (restoreFocus) nextTick(() => trigger.value?.focus())
+	}
+
+	watch([placement, distance], updatePosition)
+	watch(panel, () => {
+		if (!isOpen.value) return
+		resizeObserver?.disconnect()
+		if (trigger.value) resizeObserver?.observe(trigger.value)
+		if (panel.value) resizeObserver?.observe(panel.value)
+		updatePosition()
+	})
+
+	onUnmounted(removeListeners)
+
+	return {
+		isOpen,
+		panelStyle,
+		anchorStyle,
+		resolvedSide,
+		open,
+		close,
+	}
+}
diff --git a/standards/README.md b/standards/README.md
index aee6553cc1..080ed1953c 100644
--- a/standards/README.md
+++ b/standards/README.md
@@ -2,4 +2,4 @@
 
 This folder contains technical standards and documentation we use to develop Modrinth. The majority of this has been migrated from our internal documentation.
 
-For contributing guidelines, please refer to [docs.modrinth.com](https://docs.modrinth.com/contributing/getting-started/) — these documents are more for technical reference, not a guide on making pull requests, features, etc.
+For contributing guidelines, please refer to [docs.modrinth.com](https://docs.modrinth.com/contributing/getting-started/) - these documents are more for technical reference, not a guide on making pull requests, features, etc.
diff --git a/standards/frontend/BUTTONS.md b/standards/frontend/BUTTONS.md
new file mode 100644
index 0000000000..b1f71db07c
--- /dev/null
+++ b/standards/frontend/BUTTONS.md
@@ -0,0 +1,375 @@
+# Buttons
+
+Use the button components in `packages/ui/src/components/base/buttons/` for actions,
+navigation, file selection, and button-owned menus. They share the same sizing,
+interaction states, focus treatment, and visual variants.
+
+Do not recreate button styling with raw `<button>` or `<a>` elements. A raw element is
+appropriate only when an interaction has semantics or behaviour that the shared
+components cannot represent.
+
+`ButtonFrame` is an internal styling primitive. Use one of the public components instead
+of importing it directly.
+
+## Choosing a component
+
+| Component                  | Use                                                                                 |
+| -------------------------- | ----------------------------------------------------------------------------------- |
+| `Button`                   | An action, including form submission                                                 |
+| `ButtonLink`               | Navigation to an internal route or external URL                                      |
+| `IconButton`               | An icon-only action                                                                  |
+| `FileButton`               | Opening a file picker, with optional drag-and-drop support                           |
+| `ButtonGroup`              | Visually joining related buttons                                                     |
+| `SplitButton`              | A primary action with an attached overflow menu                                      |
+| `TeleportOverflowMenu`     | An icon button that opens a menu of actions and links                                |
+| `TeleportPopoutMenu`       | A button or icon button that opens an arbitrary panel                                |
+
+Use the component that matches the interaction's semantics. Do not use a click handler
+on `ButtonLink` for an action, and do not perform navigation from a `Button`.
+
+Import public button components from `@modrinth/ui`. Inside `packages/ui`, use the
+corresponding `#ui/components/base/buttons/*` path:
+
+```ts
+import { Button, ButtonLink, IconButton } from '@modrinth/ui'
+```
+
+## Basic usage
+
+Use `Button` for actions. Its native type defaults to `button`, so set
+`native-type="submit"` explicitly when it submits a form.
+
+```vue
+<Button type="colored" @click="save">
+	<SaveIcon aria-hidden="true" />
+	Save changes
+</Button>
+
+<Button native-type="submit" :loading="saveMutation.isPending.value">
+	Save
+</Button>
+```
+
+Use `ButtonLink` for navigation. Pass exactly one of `to` or `href`:
+
+```vue
+<ButtonLink to="/settings">Settings</ButtonLink>
+
+<ButtonLink href="https://example.com" target="_blank" type="outlined">
+	Documentation
+	<ExternalIcon aria-hidden="true" />
+</ButtonLink>
+```
+
+`to` creates a Vue Router link. `href` creates a standard anchor. External links opened
+in a new tab receive `rel="noopener noreferrer"` unless a different `rel` is provided.
+
+Use `IconButton` when the visible icon is the entire button content. The `label` prop is
+required and supplies the button's accessible name:
+
+```vue
+<IconButton label="Open settings" type="quiet" @click="openSettings">
+	<SettingsIcon aria-hidden="true" />
+</IconButton>
+```
+
+Do not replace `label` with a tooltip or rely on the icon to communicate the action.
+User-visible labels, including `IconButton` labels and menu option labels, must use the
+localization system.
+
+## Visual types
+
+All button components use the same four visual types:
+
+| Type       | Use                                                                 |
+| ---------- | ------------------------------------------------------------------- |
+| `base`     | Default neutral actions                                             |
+| `colored`  | The highest-emphasis action in a section                            |
+| `outlined` | Secondary actions that need a visible boundary                      |
+| `quiet`    | Low-emphasis actions in toolbars, cards, and other compact contexts |
+
+`base` is the default. Use `colored` deliberately: a group should normally have only one
+highest-emphasis action.
+
+The available colors are `brand`, `red`, `orange`, `green`, `blue`, `purple`, and
+`medal_promotion`. Color is supported by `colored`, `outlined`, and `quiet`; `base` uses
+its standard neutral treatment. An outlined button without a color uses the standard
+neutral treatment.
+
+```vue
+<Button type="colored" color="brand">Create project</Button>
+<Button type="colored" color="red">Delete project</Button>
+<Button type="outlined">Cancel</Button>
+<Button type="outlined" color="blue">View analytics</Button>
+<Button type="quiet" color="red">Remove</Button>
+```
+
+Quiet buttons support an `interaction` prop when their hover and keyboard-focus
+treatment needs to differ from the default surface fill:
+
+| Interaction | Treatment |
+| ----------- | --------- |
+| `surface` | Uses the standard neutral hover/focus surface. This is the default. |
+| `filled` | Fills with the button's `color` and uses contrast text. |
+| `none` | Keeps the background transparent while retaining the focus ring. |
+
+```vue
+<Button type="quiet" color="brand" interaction="filled">Current page</Button>
+<IconButton type="quiet" interaction="none" label="Open account menu">
+	<AvatarIcon aria-hidden="true" />
+</IconButton>
+```
+
+Use `interaction` to describe behavior rather than passing arbitrary hover colors.
+Resting selected-state backgrounds, such as a current pagination page, remain the
+responsibility of the owning component.
+
+Use red only for destructive or dangerous actions. Do not use color as the only way to
+communicate an action's meaning.
+
+## Sizes
+
+- `sm`: Notifications and popups, usually for icon-only actions.
+- `md`: Modal and card actions that do not appear at the top of a page.
+- `lg`: Actions at the top of a page or subpage, such as beside inputs or filters.
+- `xl`: Header actions.
+
+`md` is the default. Buttons that appear together must use the same size.
+
+Prefer the size prop over overriding height, padding, border radius, font weight, gap, or
+icon dimensions with utility classes. Width and layout utilities such as `w-full` are
+fine when required by the surrounding layout.
+
+```vue
+<Button size="sm">Compact action</Button>
+<Button>Default action</Button>
+<Button size="lg">Prominent action</Button>
+<Button size="xl">Large action</Button>
+```
+
+## States
+
+Use `disabled` when an action is unavailable. Use `loading` while a `Button` or
+`IconButton` action is in progress:
+
+```vue
+<Button
+	type="colored"
+	:loading="createMutation.isPending.value"
+	@click="createMutation.mutate()"
+>
+	Create
+</Button>
+```
+
+`loading` disables the underlying button and sets `aria-busy`. Keep the label stable so
+the action remains understandable while it is running.
+
+Disabled links are made non-navigable and removed from the tab order by `ButtonLink`.
+Do not reimplement disabled-link click handling in consumers.
+
+## Icons and content
+
+Place icons directly inside the component so the shared styles can size and space them:
+
+```vue
+<Button>
+	<DownloadIcon aria-hidden="true" />
+	Download
+</Button>
+
+<Button>
+	Continue
+	<RightArrowIcon aria-hidden="true" />
+</Button>
+```
+
+Icons next to a visible label are decorative and should use `aria-hidden="true"`. Use
+`IconButton` instead of an empty text button for icon-only actions.
+
+Button labels should describe the action directly. Avoid vague labels such as "Yes",
+"OK", or "Submit" when a specific label such as "Delete version" or "Save settings"
+would be clearer.
+
+## File buttons
+
+`FileButton` owns the file input and emits validated files:
+
+```vue
+<FileButton
+	prompt="Select images"
+	accept="image/*"
+	:max-size="MAX_IMAGE_SIZE"
+	multiple
+	@change="handleFiles"
+>
+	<UploadIcon aria-hidden="true" />
+</FileButton>
+```
+
+The `change` event receives a `File[]`. `allow-drop` defaults to `true`; set it to
+`false` when the surrounding interface should not accept dropped files.
+
+Use `FileButton` for a compact file-selection action. Use a dedicated drop area when
+drag-and-drop is the primary interaction or the interface needs previews, progress, or
+more detailed instructions.
+
+## Button groups and split buttons
+
+Use `ButtonGroup` only for closely related controls. Pass a localized `label` when the
+relationship is not already clear from surrounding accessible content:
+
+```vue
+<ButtonGroup label="Pagination">
+	<Button type="outlined">Previous</Button>
+	<Button type="outlined">Next</Button>
+</ButtonGroup>
+```
+
+`ButtonGroup` joins the buttons visually, so its direct children must be components from
+this button system.
+
+Use `SplitButton` when one action is primary and closely related alternatives belong in
+an attached menu:
+
+```vue
+<script setup lang="ts">
+import { PlayIcon, SettingsIcon, TrashIcon } from '@modrinth/assets'
+import type { OverflowMenuOption } from '@modrinth/ui/src/components/base/buttons/types'
+
+const options: OverflowMenuOption[] = [
+	{
+		id: 'settings',
+		label: 'Server settings',
+		icon: SettingsIcon,
+		action: openSettings,
+	},
+	{ type: 'divider' },
+	{
+		id: 'delete',
+		label: 'Delete server',
+		icon: TrashIcon,
+		tone: 'red',
+		action: deleteServer,
+	},
+]
+</script>
+
+<template>
+	<SplitButton
+		menu-label="More server actions"
+		group-label="Server actions"
+		type="colored"
+		:options="options"
+		@click="startServer"
+	>
+		<PlayIcon aria-hidden="true" />
+		Start server
+	</SplitButton>
+</template>
+```
+
+Use `primary-disabled` and `menu-disabled` when only one side is unavailable. Use
+`disabled` when the entire split button is unavailable.
+
+## Overflow menus
+
+`TeleportOverflowMenu` is for a menu of discrete actions and navigation targets. Define
+its options as `OverflowMenuOption[]`:
+
+```ts
+const options: OverflowMenuOption[] = [
+	{
+		id: 'download',
+		label: 'Download',
+		icon: DownloadIcon,
+		action: download,
+	},
+	{
+		id: 'project-page',
+		label: 'Open project page',
+		icon: ExternalIcon,
+		type: 'link',
+		to: projectRoute,
+	},
+	{ type: 'divider' },
+	{
+		id: 'delete',
+		label: 'Delete',
+		icon: TrashIcon,
+		tone: 'red',
+		action: remove,
+	},
+]
+```
+
+Each non-divider option needs a stable, unique `id` and a localized `label`.
+
+The trigger is an `IconButton` by default. Set `icon-only="false"` when the trigger has
+visible text or composite content, such as an avatar and chevron; it will use a normal
+`Button` so intrinsic width, padding, and gaps are preserved.
+
+- Use an action option for behaviour and a link option for navigation.
+- Use `shown: false` to remove an option conditionally.
+- Use `disabled` with a `tooltip` when the user needs to understand why an option is
+  unavailable.
+- Use `remainOpen` only when selecting the option should not dismiss the menu.
+- Use `tone` for semantically colored options. The available tones are `brand`, `red`,
+  `orange`, `green`, `blue`, `purple`, and `medal_promotion`.
+- Use `hoverFilled: true` when a toned option should fill with its tone on hover and
+  focus. Use `hoverFilledOnly: true` to keep the default text color until that state.
+- Use `tone: 'red'` for destructive options.
+- Use dividers sparingly to separate meaningful groups.
+
+The component implements menu keyboard navigation, focus management, typeahead, and
+Escape handling. Consumers should not add competing keyboard or focus behaviour.
+
+Set `hoverable` when a navigation menu should also open on pointer hover. Click, touch,
+and keyboard activation remain available.
+
+## Popout menus
+
+Use `TeleportPopoutMenu` for arbitrary interactive content that belongs to a button,
+such as a compact settings panel. Use `TeleportOverflowMenu` instead when the content is
+only a list of actions or links.
+
+```vue
+<TeleportPopoutMenu label="Configure versions" placement="bottom-start">
+	<template #trigger>
+		<SettingsIcon aria-hidden="true" />
+		Configure
+	</template>
+
+	<template #panel="{ close }">
+		<div class="flex w-72 flex-col gap-4">
+			<StyledInput v-model="versionName" label="Version name" />
+			<Button type="colored" @click="close()">Apply</Button>
+		</div>
+	</template>
+</TeleportPopoutMenu>
+```
+
+Set `icon-only` when the trigger has no visible text; `label` then becomes the trigger's
+accessible name. The panel role defaults to `dialog`; use `panel-role="region"` only
+when the content is non-modal supplementary content.
+
+The panel slot receives `close`, and the component manages initial focus, Escape, and
+focus restoration.
+
+## Legacy components
+
+Do not introduce new uses of the legacy `packages/ui/src/components/base/Button.vue` or
+`ButtonStyled.vue` APIs. When migrating:
+
+| Legacy pattern                  | Replacement                                  |
+| ------------------------------- | -------------------------------------------- |
+| `link` / `external`             | `ButtonLink` with `to`, `href`, and `target` |
+| `action`                        | `@click` on `Button`                         |
+| `icon-only`                     | `IconButton` with `label`                    |
+| `large`                         | `size="lg"` or `size="xl"`                   |
+| `outline`                       | `type="outlined"`                            |
+| `transparent`                   | `type="quiet"`                               |
+| `ButtonStyled` wrapping an element | The matching direct button component      |
+
+Preserve the original element's semantics while migrating. A visual match is not enough
+if a link becomes a button or an icon-only action loses its accessible name.
diff --git a/standards/frontend/MODALS.md b/standards/frontend/MODALS.md
index bfedfc0141..7e5ec2bd4b 100644
--- a/standards/frontend/MODALS.md
+++ b/standards/frontend/MODALS.md
@@ -104,12 +104,8 @@ Renders a bottom action bar below the content area (with `p-4 pt-0` padding). Us
 <NewModal ref="modal" header="Delete Item" fade="danger">
 	<p>This action cannot be undone.</p>
 	<template #actions>
-		<ButtonStyled color="danger">
-			<button @click="handleDelete">Delete</button>
-		</ButtonStyled>
-		<ButtonStyled>
-			<button @click="modal?.hide()">Cancel</button>
-		</ButtonStyled>
+		<Button type="colored" color="red" @click="handleDelete">Delete</Button>
+		<Button @click="modal?.hide()">Cancel</Button>
 	</template>
 </NewModal>
 ```
@@ -274,7 +270,7 @@ export const detailsStageConfig: StageConfigInput<MyModalContext> = {
 | `label`        | Button text             |
 | `icon`         | Icon component          |
 | `iconPosition` | `'before'` or `'after'` |
-| `color`        | ButtonStyled color prop |
+| `color`        | Button color prop       |
 | `disabled`     | Disable the button      |
 | `onClick`      | Click handler           |