KRDS Angular

버튼 Button ​

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

KRDS 가이드

계층 ​

기본 <button>에 krdsButton을 붙입니다. type, disabled, 폼 제출은 기본 버튼 그대로 동작합니다. variant로 버튼의 중요도를 표현하고, 화면의 주요 행동에는 primary를 한 번만 사용합니다.

ts
import { Component } from '@angular/core'
import { KrdsButton } from '@krds.ui/angular'

@Component({
  selector: 'demo-button-hierarchy',
  imports: [KrdsButton],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
      <button krdsButton variant="primary">버튼 : primary</button>
      <button krdsButton variant="secondary">버튼 : secondary</button>
      <button krdsButton variant="tertiary">버튼 : tertiary</button>
    </div>
  `
})
export default class ButtonHierarchy {}

사이즈 ​

ts
import { Component } from '@angular/core'
import { KrdsButton } from '@krds.ui/angular'

@Component({
  selector: 'demo-button-sizes',
  imports: [KrdsButton],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
      <button krdsButton size="xsmall">x-small 버튼</button>
      <button krdsButton size="small">small 버튼</button>
      <button krdsButton size="medium">medium 버튼</button>
      <button krdsButton size="large">large 버튼</button>
      <button krdsButton size="xlarge">x-large 버튼</button>
    </div>
  `
})
export default class ButtonSizes {}

아이콘 버튼 ​

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

ts
import { Component } from '@angular/core'
import { KrdsButton } from '@krds.ui/angular'

@Component({
  selector: 'demo-button-with-icon',
  imports: [KrdsButton],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
      <button krdsButton size="small">small 버튼 <i class="svg-icon ico-sch" aria-hidden="true"></i></button>
      <button krdsButton size="medium">medium 버튼 <i class="svg-icon ico-sch" aria-hidden="true"></i></button>
      <button krdsButton size="large"><i class="svg-icon ico-sch" aria-hidden="true"></i> large 버튼</button>
    </div>
  `
})
export default class ButtonWithIcon {}

텍스트 버튼 ​

ts
import { Component } from '@angular/core'
import { KrdsButton } from '@krds.ui/angular'

@Component({
  selector: 'demo-button-text',
  imports: [KrdsButton],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
      <button krdsButton size="small" text>텍스트 버튼</button>
      <button krdsButton size="small" text>주민등록표초본 <i class="svg-icon ico-angle right" aria-hidden="true"></i></button>
      <button krdsButton size="medium" text>검색 <i class="svg-icon ico-sch" aria-hidden="true"></i></button>
      <button krdsButton text>파일다운로드 <i class="svg-icon ico-down" aria-hidden="true"></i></button>
      <button krdsButton text disabled>필터 <i class="svg-icon ico-filter" aria-hidden="true"></i></button>
    </div>
  `
})
export default class ButtonText {}

아이콘만 있는 버튼 ​

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

ts
import { Component } from '@angular/core'
import { KrdsButton } from '@krds.ui/angular'

@Component({
  selector: 'demo-button-icon-only',
  imports: [KrdsButton],
  template: `
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
      <button krdsButton icon>
        <span class="sr-only">검색</span>
        <i class="svg-icon ico-sch" aria-hidden="true"></i>
      </button>
      <button krdsButton icon size="medium">
        <span class="sr-only">입력한 비밀번호 보기</span>
        <i class="svg-icon ico-pw-visible" aria-hidden="true"></i>
      </button>
      <button krdsButton icon border size="large">
        <span class="sr-only">새로고침</span>
        <i class="svg-icon ico-refresh" aria-hidden="true"></i>
      </button>
      <button krdsButton icon border size="large" disabled>
        <span class="sr-only">열기</span>
        <i class="svg-icon ico-angle down" aria-hidden="true"></i>
      </button>
    </div>
  `
})
export default class ButtonIconOnly {}

버튼 묶음 ​

여러 버튼을 나란히 둘 때는 KRDS 클래스 btn-group으로 감쌉니다. 따로 컴포넌트가 없습니다.

html
<div class="btn-group">
  <button krdsButton variant="secondary">취소</button>
  <button krdsButton>확인</button>
</div>

KrdsButton ​

선택자 button[krdsButton]

Inputs

이름타입기본값설명
variant'primary' | 'secondary' | 'tertiary''primary'버튼 변형
size'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'-버튼 크기
iconbooleanfalse아이콘 전용 버튼
borderbooleanfalse테두리 스타일 (아이콘 버튼용)
purebooleanfalsePure 버튼 여부 (가상클래스 상태 시 컬러 유지)
textbooleanfalse텍스트 버튼 스타일