Buttons

  • 가이드 되어 있는 버튼 이외의 스타일은 사용하지 않습니다
  • 각 버튼의 설명을 숙지하고 목적에 맞게 사용하도록 합니다.
  • 버튼의 순서를 숙지하여 지켜 일관된 UI를 제공하도록 합니다.

Primary Button

Button 순서와 간격

  • 버튼의 순서를 반드시 지켜주세요! 버튼 순서는 좌측기준으로 Icon버튼→ Custom버튼→ CRUD Line버튼→ Confirm버튼 순으로 정렬합니다.
  • 버튼간 간격은 3px이며, Custom과 CRUD버튼은 구분을 위해 10px의 간격을 줍니다.

Default Custom Button

  • 커스텀 버튼 (Icon/CRUD 버튼을 제외한 모든 텍스트 버튼)

Icon Button

  • 엑셀다운로드, 엑셀업로드, 인쇄 버튼
          
    <div class="d-flex align-items-center">
      <button class="btn is-primary">Custom Button</button>
      <button class="btn is-primary is-hover">Custom Button</button>
      <button class="btn is-primary" disabled>Custom Button</button>
    </div>

    <div class="d-flex align-items-center">
      <button class="btn is-primary"><span class="icon is-excel"></span> 엑셀업로드</button>
      <button class="btn is-primary is-hover"><span class="icon is-excel"></span> 엑셀업로드</button>
      <button class="btn is-primary" disabled><span class="icon is-excel"></span> 엑셀업로드</button>
      <button class="btn is-primary"><span class="icon is-print"></span> 인쇄</button>
      <button class="btn is-primary is-hover"><span class="icon is-print"></span> 인쇄</button>
      <button class="btn is-primary" disabled><span class="icon is-print"></span> 인쇄</button>
    </div>

Grid CRUD Button

  • Line : 그리드 추가, 수정, 삭제, 취소 버튼

Confirm Button

  • 저장, 완료 등의 최종 키액션 등에 사용하는 버튼입니다.
  • 가급적 한 화면에 한 번만 사용하도록 합니다.
          
    <div class="d-flex align-items-center">
      <button class="btn is-outline">Line Button</button>
      <button class="btn is-outline is-hover">Line Button</button>
      <button class="btn is-outline" disabled>Line Button</button>
    </div>

    <div class="d-flex align-items-center">
      <button class="btn is-confirm">Confirm Button</button>
      <button class="btn is-confirm is-hover">Confirm Button</button>
      <button class="btn is-confirm" disabled>Confirm Button</button>
    </div>

Detail Button

Search Button

  • 상단 조회조건 박스에 있는 고정형 버튼
  • Height : 32px, Padding : 6px, 15px
  • Radius : 4px

Shuffle Button

  • 그리드와 상세내용 상하, 좌우 이동시 사용
  • Width, Height : 32 x 32 px
  • Radius : 4px
          
    <div class="d-flex align-items-center">
      <button class="btn is-search"><span class="icon is-search"></span>조회</button>
      <button class="btn is-search is-hover"><span class="icon is-search"></span>조회</button>
      <button class="btn is-search" disabled><span class="icon is-search"></span>조회</button>
    </div>

    <div class="d-flex align-items-center">
      <button class="btn is-shuffle"><span class="icon is-arrTop"></span></button>
      <button class="btn is-shuffle"><span class="icon is-arrBottom"></span></button>
      <button class="btn is-shuffle"><span class="icon is-arrLeft"></span></button>
      <button class="btn is-shuffle"><span class="icon is-arrRight"></span></button>

      <button class="btn is-shuffle is-hover"><span class="icon is-arrTop"></span><button>
      <button class="btn is-shuffle is-hover"><span class="icon is-arrBottom"></span><button>
      <button class="btn is-shuffle is-hover"><span class="icon is-arrLeft"></span><button>
      <button class="btn is-shuffle is-hover"><span class="icon is-arrRight"></span><button>

      <button class="btn is-shuffle" disabled><span class="icon is-arrTop"></span></button>
      <button class="btn is-shuffle" disabled><span class="icon is-arrBottom"></span></button>
      <button class="btn is-shuffle" disabled><span class="icon is-arrLeft"></span></button>
      <button class="btn is-shuffle" disabled><span class="icon is-arrRight"></span></button>
    </div>

Icon Button_Single

  • 그리드와 디테일 영역 내에 단독으로 사용

Help Button

  • 보조설명을 위한 도움말 버튼으로 마우스 호버 시 툴팁 제공
도움말
도움말
도움말

Favorites Button

  • 토글 형식의 즐겨찾기 버튼
          
    <div class="d-flex align-items-center">
      <button class="btn is-icon"><span class="icon is-search"></span></button>
      <button class="btn is-icon is-hover"><span class="icon is-search"></span></button>
      <button class="btn is-icon" disabled><span class="icon is-search"></span></button>


      <button class="btn is-icon"><span class="icon is-sort"></span></button>
      <button class="btn is-icon is-hover"><span class="icon is-sort"></span></button>
      <button class="btn is-icon" disabled><span class="icon is-sort"></span></button>

      <button class="btn is-icon"><span class="icon is-link"></span></button>
      <button class="btn is-icon is-hover"><span class="icon is-link"></span></button>
      <button class="btn is-icon" disabled><span class="icon is-link"></span></button>
    </div>

    <div class="helpBtn">
      <button class="btn is-help"></button>
      <span class="helpBtn__content" style="width: 4.4rem;">도움말</span>
    </div>
    <div class="helpBtn">
      <button class="btn is-help is-hover"></button>
      <span class="helpBtn__content" style="width: 4.4rem;">도움말</span>
    </div>
    <div class="helpBtn">
      <button class="btn is-help" disabled></button>
      <span class="helpBtn__content" style="width: 4.4rem;">도움말</span>
    </div>

    <label class="favBtn">
      <input class="favBtn__checkbox" type="checkbox">
      <span class="favBtn__style"></span>
      <span class="favBtn__content" style="width: 5.5rem">즐겨찾기</span>
    </label>
    <label class="favBtn">
      <input class="favBtn__checkbox" type="checkbox" checked="">
      <span class="favBtn__style"></span>
      <span class="favBtn__content" style="width: 5.5rem">즐겨찾기</span>
    </label>
    <label class="favBtn">
      <input class="favBtn__checkbox" type="checkbox" disabled>
      <span class="favBtn__style"></span>
      <span class="favBtn__content" style="width: 5.5rem">즐겨찾기</span>
    </label>

Popup Button

  • Modal Popup 하단 우측 고정버튼
  • Alert 형 Popup 중앙 배치 버튼
  • Height : 32px, Padding : 6px, 25px
  • Radius : 4px
          
    <div class="d-flex align-items-center">
      <button class="btn is-popupBlack">확인</button>
      <button class="btn is-popupBlack is-hover">확인</button>
      <button class="btn is-popupBlack" disabled>확인</button>
    </div>
    <div class="d-flex align-items-center">
      <button class="btn is-popupWhite">취소</button>
      <button class="btn is-popupWhite is-hover">취소</button>
      <button class="btn is-popupWhite" disabled>취소</button>
    </div>