사이트맵

Button 순서와 간격

버튼의 순서를 반드시 지켜주세요! 저장버튼은 .is-fillBtn로 항상 우측에 위치합니다
버튼간 간격은 4px이며, Custom과 CRUD버튼은 구분을 위해 8px의 간격을 줍니다.

Confirm

저장, 등록, 승인, 신청, 조회 등의 최종 키 액션에 사용하는 버튼으로 한 화면에 한 번만 사용하는 것을 권장합니다.
Fill : 저장, 등록, 승인
저장 disabled

CRUD

데이터의 추가(생성), 수정, 삭제, 취소, 요청, 반려 등의 기능을 수행하는 버튼입니다.
추가 disabled

Custom

커스터마이징이 가능한 모든 텍스트 버튼입니다. (confirm, CRUD , 아이콘+텍스트 버튼 제외)
커스텀 버튼 disabled

필수입력 버튼

필수입력 버튼 disabled

Icon + Text

엑셀 다운로드/업로드, 인쇄, 메일전송 등 데이터를 다른 형식이나 장치로 전송하는 기능을 수행하는 버튼입니다.

문서 다운로드

엑셀 엑셀

업로드/가져오기

엑셀 엑셀

새창열기

새창열기 새창열기

인쇄

인쇄 인쇄

메일전송

메일전송 메일전송

목록/ Back

목록 목록

편집

편집 편집

옵션

옵션 옵션

설정

설정 설정

(중간)저장

계산결과 저장 계산결과 저장

이력

이력 이력

종료

종료 종료

태그추가

Tag 추가 Tag 추가

잠금풀기

UNLOCK UNLOCK

복사

COPY COPY

새로고침

새로고침 새로고침

캘린더

캘린더 캘린더

그리드

그리드 그리드

트리

트리 트리

비표준 아이콘

INSP INSP

TI TI

PI PI

PDT PDT

원도 원도

VI VI

CML CML

CUI CUI

Icon Single

아이콘 싱글 버튼은 아이콘만으로 기능을 표현하는 버튼으로, 필요에 따라 hover 시 텍스트 툴팁이 제공될 수 있습니다.


Shuffle Button

그리드와 상세내용 상하, 좌우 이동시 사용합니다.
이전, 다음 / 텍스트를 포함한 이동 버튼

Tooltips

도움말
설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
도움말
설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트

Simple Tooltips

설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트
설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트 설명 텍스트

Popup-CRUD

모달 팝업 하단에 배치되며, 다른 버튼과 좌우/상하 여백 값이 상이하므로 모달팝업 하단에서만 사용해야 합니다.

Switch

화면의 성격에 따라 선택적으로 노출되는 옵션 버튼입니다.

is-showBtn

Link

링크 버튼은 특정 페이지나 콘텐츠가 열리거나 이동할 수 있도록 하는 버튼으로 텍스트에 underline 을 포함하여 제공합니다.
텍스트형 링크 버튼

Switch

버튼레벨에서 사용할 수 있는 스위치