Button: add text + icon props

This commit is contained in:
axolotle 2023-07-25 22:46:38 +02:00
parent 85c787f428
commit 9b37078d79
2 changed files with 11 additions and 6 deletions

View file

@ -1,13 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
variant?: string
type?: HTMLButtonElement['type'] type?: HTMLButtonElement['type']
text?: string
variant?: string
icon?: string
block?: boolean block?: boolean
}>(), }>(),
{ {
variant: 'primary',
type: 'button', type: 'button',
text: undefined,
variant: 'primary',
icon: undefined,
block: false, block: false,
}, },
) )
@ -23,6 +27,9 @@ const variantClass = computed(() => {
<template> <template>
<button class="btn" :class="[variantClass, { 'btn-block': block }]"> <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> </button>
</template> </template>

View file

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