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/ModerationProjectNags.vue

@@ -23,11 +23,13 @@
 				</div>
 			</div>
 			<div class="input-group">
-				<ButtonStyled circular>
-					<button :class="{ '[&>svg]:rotate-180': !collapsed }" @click="$emit('toggleCollapsed')">
-						<DropdownIcon class="duration-250 transition-transform ease-in-out" />
-					</button>
-				</ButtonStyled>
+				<IconButton
+					label="Toggle details"
+					:class="{ '[&>svg]:rotate-180': !collapsed }"
+					@click="$emit('toggleCollapsed')"
+				>
+					<DropdownIcon class="duration-250 transition-transform ease-in-out" />
+				</IconButton>
 			</div>
 		</div>
 		<div v-if="!collapsed" class="mt-4 grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-2">
@@ -61,21 +63,19 @@
 					{{ getFormattedMessage(nag.link.title) }}
 					<ChevronRightIcon aria-hidden="true" class="featured-header-chevron" />
 				</NuxtLink>
-				<ButtonStyled
+				<Button
 					v-if="nag.status === 'special-submit-action' && nag.id === 'submit-for-review'"
+					v-tooltip="
+						!canSubmitForReview ? getFormattedMessage(messages.submitChecklistTooltip) : undefined
+					"
+					type="colored"
 					color="orange"
+					:disabled="!canSubmitForReview"
 					@click="submitForReview"
 				>
-					<button
-						v-tooltip="
-							!canSubmitForReview ? getFormattedMessage(messages.submitChecklistTooltip) : undefined
-						"
-						:disabled="!canSubmitForReview"
-					>
-						<SendIcon />
-						{{ getFormattedMessage(messages.submitForReviewButton) }}
-					</button>
-				</ButtonStyled>
+					<SendIcon />
+					{{ getFormattedMessage(messages.submitForReviewButton) }}
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -94,7 +94,8 @@ import {
 } from '@modrinth/assets'
 import type { Nag, NagContext, NagStatus } from '@modrinth/moderation'
 import { nags } from '@modrinth/moderation'
-import { ButtonStyled, defineMessages, type MessageDescriptor, useVIntl } from '@modrinth/ui'
+import { Button, IconButton } from '@modrinth/ui'
+import { defineMessages, type MessageDescriptor, useVIntl } from '@modrinth/ui'
 import type { Component } from 'vue'
 import { computed } from 'vue'