KRDS Vue

버튼 Button ​

버튼은 어떤 기능이나 동작을 실행하거나 기능을 사용하기 위한 상태로 변경하는 요소이다. 사용자가 서비스를 이용하는 과정에서 어떤 행동이 중요한지에 따라 관련된 버튼이 다양한 스타일로 표현된다.

KRDS 가이드

계층 ​

variant로 버튼의 중요도를 표현합니다. 화면의 주요 행동에는 primary를 한 번만 사용합니다.

vue
<script setup lang="ts">
  import { KrdsButton } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
    <KrdsButton variant="primary">버튼 : primary</KrdsButton>
    <KrdsButton variant="secondary">버튼 : secondary</KrdsButton>
    <KrdsButton variant="tertiary">버튼 : tertiary</KrdsButton>
  </div>
</template>

사이즈 ​

vue
<script setup lang="ts">
  import { KrdsButton } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
    <KrdsButton size="xsmall">x-small 버튼</KrdsButton>
    <KrdsButton size="small">small 버튼</KrdsButton>
    <KrdsButton size="medium">medium 버튼</KrdsButton>
    <KrdsButton size="large">large 버튼</KrdsButton>
    <KrdsButton size="xlarge">x-large 버튼</KrdsButton>
  </div>
</template>

아이콘 버튼 ​

텍스트 앞이나 뒤에 아이콘을 둘 수 있습니다. 아이콘 크기는 버튼 크기에 맞춰집니다.

vue
<script setup lang="ts">
  import { KrdsButton } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
    <KrdsButton size="small">small 버튼 <i class="svg-icon ico-sch"></i></KrdsButton>
    <KrdsButton size="medium">medium 버튼 <i class="svg-icon ico-sch"></i></KrdsButton>
    <KrdsButton size="large"><i class="svg-icon ico-sch"></i> large 버튼</KrdsButton>
  </div>
</template>

텍스트 버튼 ​

vue
<script setup lang="ts">
  import { KrdsButton } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
    <KrdsButton size="small" text>텍스트 버튼</KrdsButton>
    <KrdsButton size="small" text>주민등록표초본 <i class="svg-icon ico-angle right"></i></KrdsButton>
    <KrdsButton size="medium" text>검색 <i class="svg-icon ico-sch"></i></KrdsButton>
    <KrdsButton text>파일다운로드 <i class="svg-icon ico-down"></i></KrdsButton>
    <KrdsButton text disabled>필터 <i class="svg-icon ico-filter"></i></KrdsButton>
  </div>
</template>

아이콘만 있는 버튼 ​

보이는 텍스트가 없으므로 sr-only 텍스트로 버튼 이름을 반드시 제공합니다.

vue
<script setup lang="ts">
  import { KrdsButton } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
    <KrdsButton icon>
      <span class="sr-only">검색</span>
      <i class="svg-icon ico-sch"></i>
    </KrdsButton>
    <KrdsButton icon size="medium">
      <span class="sr-only">입력한 비밀번호 보기</span>
      <i class="svg-icon ico-pw-visible"></i>
    </KrdsButton>
    <KrdsButton icon border size="large">
      <span class="sr-only">새로고침</span>
      <i class="svg-icon ico-refresh"></i>
    </KrdsButton>
    <KrdsButton icon border size="large" disabled>
      <span class="sr-only">열기</span>
      <i class="svg-icon ico-angle down"></i>
    </KrdsButton>
  </div>
</template>

KrdsButton ​

Props

이름타입기본값설명
classKrdsClassValue-CSS 클래스
type"button" | "reset" | "submit"'button'버튼 타입
disabledbooleanfalse비활성화 여부
sizeSize-버튼 크기
variantVariant'primary'버튼 변형
iconbooleanfalse아이콘 전용 버튼
borderbooleanfalse테두리 스타일 (아이콘 버튼용)
purebooleanfalsePure 버튼 여부 (가상클래스 상태 시 컬러 유지)
textbooleanfalse텍스트 버튼 스타일

Events

이름인자설명
click[event: MouseEvent]버튼을 클릭했을 때

Slots

이름설명
default버튼 내용