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>

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>