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