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