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/stories/project/ProjectPageVersions.stories.ts

@@ -3,7 +3,7 @@ import { DownloadIcon, MoreVerticalIcon } from '@modrinth/assets'
 import type { GameVersionTag, Version } from '@modrinth/utils'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import { ButtonLink, IconButton } from '../../components/base/buttons'
 import ProjectPageVersions from '../../components/project/ProjectPageVersions.vue'
 
 type StoryVersion = Version & {
@@ -148,28 +148,24 @@ const meta = {
 		versionLink: (version: Version) => `https://modrinth.com/mod/sodium/version/${version.id}`,
 	},
 	render: (args) => ({
-		components: { ButtonStyled, DownloadIcon, MoreVerticalIcon, ProjectPageVersions },
+		components: { DownloadIcon, MoreVerticalIcon, ProjectPageVersions, ButtonLink, IconButton },
 		setup() {
 			return { args }
 		},
 		template: /* html */ `
 			<ProjectPageVersions v-bind="args">
 				<template #actions="{ version }">
-					<ButtonStyled circular type="transparent">
-						<a
+					<ButtonLink type="quiet"
 							v-tooltip="'Download'"
 							:href="version.files[0]?.url"
 							:download="version.files[0]?.filename"
 							aria-label="Download"
-						>
-							<DownloadIcon aria-hidden="true" />
-						</a>
-					</ButtonStyled>
-					<ButtonStyled circular type="transparent">
-						<button v-tooltip="'More options'" aria-label="More options">
-							<MoreVerticalIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+						 class="!w-9 !px-0 !rounded-full">
+						<DownloadIcon aria-hidden="true" />
+					</ButtonLink>
+					<IconButton type="quiet" label="More options" v-tooltip="'More options'" aria-label="More options">
+						<MoreVerticalIcon aria-hidden="true" />
+					</IconButton>
 				</template>
 			</ProjectPageVersions>
 		`,