Components - Button

comment

  • 기본 클래스: 모든 버튼은 ui-button 클래스를 필수로 사용
  • 크기 옵션: ui-button--small (height: 32px, font-size: 12px), 기본 (height: 36px, min-width: 53px, font-size: 14px), ui-button--medium (min-width: 78px), ui-button--large (height: 44px, min-width: 108px, font-size: 16px)
  • 스타일 옵션: ui-button--primary (주요 액션), ui-button--secondary (보조 액션)
  • 고정 너비: ui-button--fix 클래스를 추가하여 고정 너비 버튼으로 사용 가능
  • 비활성화: disabled 속성을 추가하여 버튼 비활성화
  • JavaScript: 별도의 JavaScript 초기화 불필요, 기본 button 요소의 동작 그대로 사용
button - default

HTML 구조

<button type="button" class="ui-button ui-button--primary">조회</button>
<button type="button" class="ui-button ui-button--secondary">삭제</button>
<button type="button" class="ui-button ui-button--primary" disabled>조회</button>
<button type="button" class="ui-button ui-button--secondary" disabled>삭제</button>
button - small

HTML 구조

<button type="button" class="ui-button ui-button--small ui-button--primary">적용</button>
<button type="button" class="ui-button ui-button--small ui-button--secondary">취소</button>
<button type="button" class="ui-button ui-button--small ui-button--primary" disabled>적용</button>
<button type="button" class="ui-button ui-button--small ui-button--secondary" disabled>취소</button>
button - Medium

HTML 구조

<button type="button" class="ui-button ui-button--medium ui-button--primary">적용</button>
<button type="button" class="ui-button ui-button--medium ui-button--secondary">적용</button>
<button type="button" class="ui-button ui-button--medium ui-button--primary" disabled>적용</button>
<button type="button" class="ui-button ui-button--medium ui-button--secondary" disabled>적용</button>
button - Large

HTML 구조

<button type="button" class="ui-button ui-button--large ui-button--primary">다음</button>
<button type="button" class="ui-button ui-button--large ui-button--secondary">취소</button>
<button type="button" class="ui-button ui-button--large ui-button--primary" disabled>다음</button>
<button type="button" class="ui-button ui-button--large ui-button--secondary" disabled>취소</button>
button - fix(반응형)

HTML 구조

<button type="button" class="ui-button ui-button--large ui-button--fix ui-button--primary">다음</button>
<button type="button" class="ui-button ui-button--large ui-button--fix ui-button--secondary">취소</button>
<button type="button" class="ui-button ui-button--large ui-button--fix ui-button--primary" disabled>다음</button>
<button type="button" class="ui-button ui-button--large ui-button--fix ui-button--secondary" disabled>취소</button>
button - text

HTML 구조

<button type="button" class="ui-button-text ui-button-text--primary">상세 설정</button>