Buttons

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

Primary Button

Button 순서와 간격

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

Default Custom Button

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

Icon Button

엑셀다운로드, 엑셀업로드, 인쇄 버튼


	// Import
	import { Button } from '@/components/TheButton.jsx'

	// Default Custom Button
	<Button
		className="is-primary"
		btnName="Custom Button"
	/>
	<Button
		className="is-primary is-hover"
		btnName="Custom Button"
	/>
	<Button
		className="is-primary"
		btnName="Custom Button"
		disabled={true}
	/>

	// Icon Custom Button
	<Button
		btntype="iconBtn"
		className="is-primary"
		btnName="엑셀업로드"
		iconClassName="is-excel"
	/>
	<Button
		btntype="iconBtn"
		className="is-primary is-hover"
		btnName="엑셀업로드"
		iconClassName="is-excel"
	/>
	<Button
		btntype="iconBtn"
		className="is-primary"
		btnName="엑셀업로드"
		iconClassName="is-excel"
		disabled={true}
	/>
	<Button
		btntype="iconBtn"
		className="is-primary"
		btnName="인쇄"
		iconClassName="is-print"
	/>
	<Button
		btntype="iconBtn"
		className="is-primary is-hover"
		btnName="인쇄"
		iconClassName="is-print"
	/>
	<Button
		btntype="iconBtn"
		className="is-primary"
		btnName="인쇄"
		iconClassName="is-print"
		disabled={true}
	/>

Grid CRUD Button

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

Confirm Button

저장, 완료 등의 최종 키액션 등에 사용하는 버튼입니다.
가급적 한 화면에 한 번만 사용하도록 합니다.


	// Import
	import { Button } from '@/components/TheButton.jsx'

	// Grid CRUD Button
	<Button
		className="is-outline"
		btnName="Line Button"
	/>
	<Button
		className="is-outline is-hover"
		btnName="Line Button"
	/>
	<Button
		className="is-outline"
		btnName="Line Button"
		disabled={true}
	/>

	// Confirm Button
	<Button
		className="is-confirm"
		btnName="Line Button"
	/>
	<Button
		className="is-confirm is-hover"
		btnName="Line Button"
	/>
	<Button
		className="is-confirm"
		btnName="Line Button"
		disabled={true}
	/>

Detail Button

Search Button

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

Shuffle Button

그리드와 상세내용 상하, 좌우 이동시 사용
Width, Height : 32 x 32 px
Radius : 4px


	// Import
	import { Button } from '@/components/TheButton.jsx'

	// Search Button
	<Button
		btntype="iconBtn"
		className="is-search"
		btnName="조회"
		iconClassName="is-search"
	/>
	<Button
		btntype="iconBtn"
		className="is-search is-hover"
		btnName="조회"
		iconClassName="is-search"
	/>
	<Button
		btntype="iconBtn"
		className="is-search"
		btnName="조회"
		iconClassName="is-search"
		disabled={true}
	/>

	// Shuffle Button
	<Button
		btntype="iconBtn"
		className="is-shuffle"
		iconClassName="is-arrTop"
	/>
	<Button
		btntype="iconBtn"
		className="is-shuffle"
		iconClassName="is-arrBottom"
	/>
	<Button
		btntype="iconBtn"
		className="is-shuffle"
		iconClassName="is-arrLeft"
	/>
	<Button
		btntype="iconBtn"
		className="is-shuffle"
		iconClassName="is-arrRight"
	/>

Icon Button_Single

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


	// Import
	import { Button } from '@/components/TheButton.jsx'

	// Single Icon Button
	<Button
		btntype="iconBtn"
		className="is-icon"
		iconClassName="is-search"
	/>
	<Button
		btntype="iconBtn"
		className="is-icon is-hover"
		iconClassName="is-search"
	/>
	<Button
		btntype="iconBtn"
		className="is-icon"
		iconClassName="is-search"
		disabled={true}
	/>

	// Help Button
	<Button
		btntype="iconBtn"
		className="is-icon"
		iconClassName="is-sort"
	/>
	<Button
		btntype="iconBtn"
		className="is-icon is-hover"
		iconClassName="is-sort"
	/>
	<Button
		btntype="iconBtn"
		className="is-icon"
		iconClassName="is-sort"
		disabled={true}
	/>

	// Fav Button
	<Button
		btntype="iconBtn"
		className="is-icon"
		iconClassName="is-link"
	/>
	<Button
		btntype="iconBtn"
		className="is-icon is-hover"
		iconClassName="is-link"
	/>
	<Button
		btntype="iconBtn"
		className="is-icon"
		iconClassName="is-link"
		disabled={true}
	/>

Popup Button

Modal Popup 하단 우측 고정버튼
Alert 형 Popup 중앙 배치 버튼
Height : 32px, Padding : 6px, 25px
Radius : 4px


	// Import
	import { Button } from '@/components/TheButton.jsx'
	
	// Popup Black
	<Button
		className="is-popupBlack"
		btnName="확인"
	/>
	<Button
		className="is-popupBlack is-hover"
		btnName="확인"
	/>
	<Button
		className="is-popupBlack"
		btnName="확인"
		disabled={true}
	/>

	// Popup White
	<Button 
		className="is-popupWhite"
		btnName="취소"
	/>
	<Button
		className="is-popupWhite is-hover"
		btnName="취소"
	/>
	<Button
		className="is-popupWhite"
		btnName="취소"
		disabled={true}
	/>