Button に文字列以外も入れられるようにする

[TwoSquirrels]

現在の各種 Button の実装だと、中身に文字列以外 (アイコンなど) を入れることができません。

traO-Judge-frontend/src/components/Controls/PrimaryButton.vue

Lines 1 to 22 in 3e3d9d4

	<script setup lang="ts">
	const { disabled = false } = defineProps<{
	disabled?: boolean
	text: string
	padding?: string
	}>()
	const emit = defineEmits(['click'])
	function onClick() {
	emit('click')
	}
	</script>
	<template>
	<button
	:disabled="disabled"
	class="fontstyle-ui-control-strong inline-block h-9 rounded border border-brand-primary bg-brand-primary px-6 text-white enabled:hover:border-brand-secondary enabled:hover:bg-brand-secondary disabled:opacity-50"
	:style="{ paddingLeft: padding, paddingRight: padding }"
	@click="onClick"
	>
	{{ text }}
	</button>
	</template>

text を props で受け取る代わりに slot を用いることで中身の自由度を上げられ、汎用性を向上できます。