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