Button: add text + icon props

components/YButton.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    variant?: string
     type?: HTMLButtonElement['type']
+    text?: string
+    variant?: string
+    icon?: string
     block?: boolean
   }>(),
   {
-    variant: 'primary',
     type: 'button',
+    text: undefined,
+    variant: 'primary',
+    icon: undefined,
     block: false,
   },
 )
@@ -23,6 +27,9 @@ const variantClass = computed(() => {
 
 <template>
   <button class="btn" :class="[variantClass, { 'btn-block': block }]">
-    <slot name="default" />
+    <slot name="default">
+      <Icon v-if="icon" :name="icon" size="1.5em" aria-hidden="true" />
+      {{ text }}
+    </slot>
   </button>
 </template>

pages/login.vue

@@ -63,9 +63,7 @@ const schema = {
         />
       </FormField>
 
-      <YButton type="submit" block>
-        {{ t('login') }}
-      </YButton>
+      <YButton :text="t('login')" type="submit" block />
     </BaseForm>
   </main>
 </template>