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 96d65902d7.

* 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/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,