Loading...

Buttons / Tab

Primary Button

          
    <button class="btn is-primary width-100">조회</button>
    <button class="btn is-primary is-large width-100">저장</button>
        

Secondary Button

Outline Button

추가,첨부 / 하단: 취소 반려 등

          
    <button class="btn is-outline width-100">사진변경</button>
    <button class="btn is-outline width-100"><span class="icon is-plus"></span> 자재추가</button>
    <button class="btn is-outline is-large width-100">취소</button>
        

medium/small

리스트 영역내 버튼

          
    <button type="button" class="btn is-small">열기</button>
    <button type="button" class="btn is-medium">통지</button>
        

Text Button

상세보기
        
    <a class="btn is-arr" href="#">상세보기 <span class="icon is-arr ml-5"></span></a>
      

Icon Single Button

        
    <button class="btn is-icon"><s pan class="icon is-sort"></span></button>
    <button class="btn is-icon"><span class="icon is-search"></span></button>

    <div class="formBtnWrap">
      <div class="formControl">
        <input type="text" placeholder="입력하세요" class="form__input">
        <button class="form__clear">입력된 내용 삭제</button>
      </div>
      <button class="btn is-icon"><span class="icon is-qr"></span></button>
    </div>
      

Tab Button

        
    <div class="tabs">
        <div class="tab__listWrap is-open">
          <ul class="tab__list">
            <li class="tab__item">
              <a class="tab__link is-active" href="#tab-content-1">오더정보</a>
            </li>
            <li class="tab__item">
              <a class="tab__link" href="#tab-content-2">작업계획</a>
            </li>
          </ul>
          <button class="is-btnOpen"></button>
        </div>
      </div>
      

Scroll Top Button

        
    <button type="button" class="moveTopBtn">페이지 상단 이동 버튼</button>