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/access/RemoveAccessModal.vue

@@ -62,21 +62,23 @@
 			</div>
 
 			<div class="flex justify-end gap-2 pt-1">
-				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-5" @click="hide">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="orange">
-					<button v-tooltip="removePermissionTooltip" :disabled="!canRemove" @click="confirm">
-						<TrashIcon v-if="modalState.shouldCancel" aria-hidden="true" />
-						<UserXIcon v-else aria-hidden="true" />
-						{{
-							formatMessage(modalState.shouldCancel ? messages.cancelButton : messages.removeButton)
-						}}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" class="!border !border-surface-5" @click="hide">
+					<XIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					v-tooltip="removePermissionTooltip"
+					type="colored"
+					color="orange"
+					:disabled="!canRemove"
+					@click="confirm"
+				>
+					<TrashIcon v-if="modalState.shouldCancel" aria-hidden="true" />
+					<UserXIcon v-else aria-hidden="true" />
+					{{
+						formatMessage(modalState.shouldCancel ? messages.cancelButton : messages.removeButton)
+					}}
+				</Button>
 			</div>
 		</div>
 	</NewModal>
@@ -86,12 +88,13 @@
 import { TrashIcon, UserXIcon, XIcon } from '@modrinth/assets'
 import { computed, ref, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
+
 import { useRelativeTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages } from '../../../utils/common-messages'
 import Admonition from '../../base/Admonition.vue'
 import Avatar from '../../base/Avatar.vue'
-import ButtonStyled from '../../base/ButtonStyled.vue'
 import NewModal from '../../modal/NewModal.vue'
 import type { ServerAccessRole } from './types'