버튼 가이드

  • 버튼의 클래스는 'jt-btn__(단어)'형태로 명명하며 마지막 단어란에는 버튼의 주 키워드를 사용합니다.

    예) jt-btn__basic, jt-btn__underline, jt-btn__icon ...
  • 타입은 'jt-btn--type-01'부터 시작하며 베리언츠가 추가될 때마다 숫자를 1씩 증가시킵니다.

    예) jt-btn--type-01, jt-btn--type-02, jt-btn--type-03 ...
  • 크기는 사용빈도가 가장 높은 버튼을 기본으로 셋팅하며, 추가적인 크기가 필요할 경우 'jt-btn--(사이즈명)' 클래스를 추가하여 사용합니다.

    예) jt-btn--small, jt-btn--large ...
  • 아이콘을 사용하는 형태의 버튼의 경우 아이콘 교체가 쉽도록 'jt-btn--icon-(단어)' 클래스를 추가하여 스타일을 지정합니다.

    예) jt-btn--icon-newtab, jt-btn--icon-download ...