Button
Button variation(타입별)
a tag로 변경해서 사용할 경우
href값 안 넣을 때 사용
href값 넣을 때 사용
기본형
구조 미삽입
구조 삽입

[Type(1) default] type="1"
[Type(1) default:disabled] type="1"
[Type(2) secondary] type="2"
[Type(2) secondary:disabled] type="2"
[Type(3) tertiary] type="3"
[Type(3) tertiary:disabled] type="3"
icon 형태 Button

- leftIcon, rightIcon속성에 svg 경로를 넣은 클래스를 지정한다.

- icon.scss 파일 내부에 아이콘 에셋을 불러오는 클래스를 생성하여 사용

icon 위치 적용 예시
icon 타입별 케이스 - type1
icon 타입별 케이스 - type2
icon 타입별 케이스 - type3
새창열림 openWindowSvg pdfSvg pdfSvg docSvg
disabled지만, 컬러값 유지되는 Button
Card 타입 내, selected Case 때 사용
Link Button
기본구조
링크
링크
새창열림
기본구조 - 구조 삽입 예시
i tag span tag
기본구조 - 구조 삽입 예시 - a tag는 inline 요소
i tag
span tag
더보기 버튼
바로가기 버튼
.short_cut
기본링크 새창열림 링크 팝업 버튼 기본링크 별도의 제공 팝업이 없이 role button 처리 시 사용
.short_cut - box
최근 계산 내역

.price_btn
1천만원
.new_open
우리 아이 동물번호 찾기
우리 아이 동물번호 찾기
우리 아이 동물번호 찾기
.prev_btn
기본링크
바로가기 버튼 - 아이콘 유형
보험계약대출 체결•이행을 위한 개인(신용)정보 처리 상세 동의서 차량 손해도 보장받을 수 있는 특약
반려동물 의료비 한도 안내
바로 대출가능한 금액 (2025.02.20 기준)
1,500,000원
아이콘 들어간 버튼 유형



아이콘만 있는 버튼
default : disabled :

바로가기 버튼 - 아이콘 유형 - 갤러리에서 사용 - 위치는 설정 및 aria-label은 각각 필요에 의해 세부 조정
사이즈 색상별 정의 - 32 * 32

사이즈 색상별 정의 - 40 * 40

linkButton - 스타일 미정의 상태 - 구조는 사용
크기별 정의 예시 - 추후 업데이트 예정
a tag a tag a tag a tag
첨부파일
a tag a tag a tag 서류접수내역파일명이노출됩니다 a tag 서류접수내역파일명이노출됩니다 서류접수내역파일명이노출됩니다
Grouping Botton (.btn_area) - 스타일 미정의 상태 - 구조는 사용
row (Defalut)
row (.btn_area.ty2)
row (.btn_area.ty3)
row (.btn_area.basic)
row (.btn_area.between)
row (.btn_area.end)
column (.btn_area.center)
column (.btn_area.column)
더보기 (paging)
더보기 (no-paging)
펼치기/접기