JenniferSoft Design Docs

Appearance

Buttons ​

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

Type ​

vue
<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>

Props ​

Prop타입필수기본값설명
type'primary-filled' | 'primary-text' | 'outlined' | 'text' | 'error-filled' | 'error-text'-'primary-filled'버튼 스타일 유형
shape'rect' | 'circle'-'rect'버튼 모양
textstring--버튼 라벨 텍스트
leadingIconIconTypes--선행 아이콘
trailingIconIconTypes--후행 아이콘
size'mini' | 'small' | 'medium' | 'large'--버튼 크기
disabledboolean-false비활성화 여부

disabled ​

vue
<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 ​

vue
<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 ​

vue
<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 ​

vue
<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 ​

vue
<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 ​

vue
<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 ​

vue
<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>