Buttons

Button은 아이콘과 결합된 형태로 사용됩니다.

Type

<script setup lang="ts">
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <btn type="primary-filled" text="primary-filled" />
    <btn type="primary-text" text="primary-text" />
    <btn type="outlined" text="outlined" />
    <btn type="text" text="text" />
    <btn type="error-filled" text="error-filled" />
    <btn type="error-text" text="error-text" />
</template>

disabled

<script setup lang="ts">
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <btn type="primary-filled" text="primary-filled" :disabled="true" />
    <btn type="primary-text" text="primary-text" :disabled="true" />
    <btn type="outlined" text="outlined" :disabled="true" />
    <btn type="text" text="text" :disabled="true" />
    <btn type="error-filled" text="error-filled" :disabled="true" />
    <btn type="error-text" text="error-text" :disabled="true" />
</template>

Size

<script setup lang="ts">
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <btn text="large" size="large" />
    <btn text="medium" size="medium" />
    <btn text="small" size="small" />
    <btn text="mini" size="mini" />
    <btn :leading-icon="ICON_TYPE.check" size="large" />
    <btn :leading-icon="ICON_TYPE.check" size="medium" />
    <btn :leading-icon="ICON_TYPE.check" size="small" />
    <btn :leading-icon="ICON_TYPE.check" size="mini" />
    <btn shape="circle" :leading-icon="ICON_TYPE.check" size="large" />
    <btn shape="circle" :leading-icon="ICON_TYPE.check" size="medium" />
    <btn shape="circle" :leading-icon="ICON_TYPE.check" size="small" />
    <btn shape="circle" :leading-icon="ICON_TYPE.check" size="mini" />
</template>

Without Icon

<script setup lang="ts">
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <btn type="primary-filled" text="primary-filled" />
    <btn type="primary-text" text="primary-text" />
    <btn type="outlined" text="outlined" />
    <btn type="text" text="text" />
    <btn type="error-filled" text="error-filled" />
    <btn type="error-text" text="error-text" />
</template>

With LeadingIcon

<script setup lang="ts">
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <btn
        type="primary-filled"
        :leading-icon="ICON_TYPE.check"
        text="primary-filled"
    />
    <btn
        type="primary-text"
        :leading-icon="ICON_TYPE.check"
        text="primary-text"
    />
    <btn type="outlined" :leading-icon="ICON_TYPE.check" text="outlined" />
    <btn type="text" :leading-icon="ICON_TYPE.check" text="text" />
    <btn
        type="error-filled"
        :leading-icon="ICON_TYPE.check"
        text="error-filled"
    />
    <btn type="error-text" :leading-icon="ICON_TYPE.check" text="error-text" />
</template>

With TrailingIcon

<script setup lang="ts">
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <btn
        type="primary-filled"
        :trailing-icon="ICON_TYPE.check"
        text="primary-filled"
    />
    <btn
        type="primary-text"
        :trailing-icon="ICON_TYPE.check"
        text="primary-text"
    />
    <btn type="outlined" :trailing-icon="ICON_TYPE.check" text="outlined" />
    <btn type="text" :trailing-icon="ICON_TYPE.check" text="text" />
    <btn
        type="error-filled"
        :trailing-icon="ICON_TYPE.check"
        text="error-filled"
    />
    <btn type="error-text" :trailing-icon="ICON_TYPE.check" text="error-text" />
</template>

With LeadingIcon, TrailingIcon

<script setup lang="ts">
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <btn
        type="primary-filled"
        :leading-icon="ICON_TYPE.check"
        :trailing-icon="ICON_TYPE.check"
        text="primary-filled"
    />
    <btn
        type="primary-text"
        :leading-icon="ICON_TYPE.check"
        :trailing-icon="ICON_TYPE.check"
        text="primary-text"
    />
    <btn
        type="outlined"
        :leading-icon="ICON_TYPE.check"
        :trailing-icon="ICON_TYPE.check"
        text="outlined"
    />
    <btn
        type="text"
        :leading-icon="ICON_TYPE.check"
        :trailing-icon="ICON_TYPE.check"
        text="text"
    />
    <btn
        type="error-filled"
        :leading-icon="ICON_TYPE.check"
        :trailing-icon="ICON_TYPE.check"
        text="error-filled"
    />
    <btn
        type="error-text"
        :leading-icon="ICON_TYPE.check"
        :trailing-icon="ICON_TYPE.check"
        text="error-text"
    />
</template>

Icon Only

<script setup lang="ts">
import { Btn, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <btn type="primary-filled" :leading-icon="ICON_TYPE.check" />
    <btn type="primary-text" :leading-icon="ICON_TYPE.check" />
    <btn type="outlined" :leading-icon="ICON_TYPE.check" />
    <btn type="text" :leading-icon="ICON_TYPE.check" />
    <btn type="error-filled" :leading-icon="ICON_TYPE.check" />
    <btn type="error-text" :leading-icon="ICON_TYPE.check" />
    <btn type="primary-filled" :leading-icon="ICON_TYPE.check" shape="circle" />
    <btn type="primary-text" :leading-icon="ICON_TYPE.check" shape="circle" />
    <btn type="outlined" :leading-icon="ICON_TYPE.check" shape="circle" />
    <btn type="text" :leading-icon="ICON_TYPE.check" shape="circle" />
    <btn type="error-filled" :leading-icon="ICON_TYPE.check" shape="circle" />
    <btn type="error-text" :leading-icon="ICON_TYPE.check" shape="circle" />
</template>