Button
사용자 액션을 트리거하는 버튼 컴포넌트입니다.
기본 유형
btn_filled · btn_outline · btn_ghost · btn_text 네 가지 기본 스킨을 제공합니다.
<!-- Filled Primary · Filled Default … -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary">
<span class="btn_label">Filled Primary</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Filled Default</span>
</button>
<button type="button" class="btn btn_outline color_primary">
<span class="btn_label">Outline</span>
</button>
<button type="button" class="btn btn_ghost">
<span class="btn_label">Ghost</span>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">Text</span>
</button>
</div>
<!-- Success · Warning · Danger · Outline Danger -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_success">
<span class="btn_label">Success</span>
</button>
<button type="button" class="btn btn_filled color_warning">
<span class="btn_label">Warning</span>
</button>
<button type="button" class="btn btn_filled color_danger">
<span class="btn_label">Danger</span>
</button>
<button type="button" class="btn btn_outline color_danger">
<span class="btn_label">Outline Danger</span>
</button>
<button type="button" class="btn btn_text color_danger">
<span class="btn_label">Text Danger</span>
</button>
</div>셀렉트 박스형
btn_select 클래스로 셀렉트 박스처럼 표시합니다. btn_select-text는 배경·테두리 없는 텍스트 형태입니다. 드롭다운·팝오버 트리거로 사용하며 aria-haspopup과 aria-expanded를 지정합니다.
<!-- 서울특별시 · 옵션을 선택하세요 · 카테고리 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_select" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">서울특별시</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select btn_select-placeholder" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">옵션을 선택하세요</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select is-open" aria-haspopup="listbox" aria-expanded="true">
<span class="btn_label">카테고리</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
</div>
<!-- Small · Medium · Large · 비활성 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_select btn_sm" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">Small</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">Medium</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select btn_lg" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">Large</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select" disabled aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">비활성</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select is-error" aria-haspopup="listbox" aria-expanded="false" aria-invalid="true">
<span class="btn_label">필수 선택</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
</div>
<!-- 전체 너비 셀렉트 트리거 -->
<button type="button" class="btn btn_select btn_block" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">전체 너비 셀렉트 트리거</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<!-- 최신순 · 정렬 기준 · 필터 · Small -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_select btn_select-text" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">최신순</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select btn_select-text btn_select-placeholder" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">정렬 기준</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select btn_select-text is-open" aria-haspopup="listbox" aria-expanded="true">
<span class="btn_label">필터</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select btn_select-text btn_sm" aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">Small</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<button type="button" class="btn btn_select btn_select-text" disabled aria-haspopup="listbox" aria-expanded="false">
<span class="btn_label">비활성</span>
<svg class="btn_select-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
</div>텍스트 버튼
btn_text 계열 스킨으로 배경·테두리 없이 표시합니다. primary, muted, danger 등 색상 변형과 아이콘·크기·상태 조합을 지원합니다.
<!-- Primary · Muted · Danger · Success -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">Primary</span>
</button>
<button type="button" class="btn btn_text color_primary color_muted">
<span class="btn_label">Muted</span>
</button>
<button type="button" class="btn btn_text color_primary color_danger">
<span class="btn_label">Danger</span>
</button>
<button type="button" class="btn btn_text color_primary color_success">
<span class="btn_label">Success</span>
</button>
<button type="button" class="btn btn_text color_primary color_warning">
<span class="btn_label">Warning</span>
</button>
</div>
<!-- 삭제 · 완료 · 주의 · 자세히 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_text color_primary color_danger">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M3 6h18"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>
<span class="btn_label">삭제</span>
</button>
<button type="button" class="btn btn_text color_primary color_success">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<path d="M22 4 12 14.01l-3-3"/>
</svg>
<span class="btn_label">완료</span>
</button>
<button type="button" class="btn btn_text color_primary color_warning">
<span class="btn_label">주의</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<path d="M12 9v4M12 17h.01"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary color_muted">
<span class="btn_label">자세히</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</div>
<!-- 더 보기 · 링크 복사 · 취소 · 건너뛰기 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">더 보기</span>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">링크 복사</span>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">취소</span>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">건너뛰기</span>
</button>
</div>
<!-- 추가 · 다운로드 · 링크 열기 · 설정 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_text color_primary">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">추가</span>
</button>
<button type="button" class="btn btn_text color_primary">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
<span class="btn_label">다운로드</span>
</button>
<button type="button" class="btn btn_text color_primary">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
<polyline points="15 3 21 3 21 9"/>
<line x1="10" y1="14" x2="21" y2="3"/>
</svg>
<span class="btn_label">링크 열기</span>
</button>
<button type="button" class="btn btn_text color_primary">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="3"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
<span class="btn_label">설정</span>
</button>
</div>
<!-- 다음 · 전체 보기 · 삭제 · 새로고침 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">다음</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">전체 보기</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">삭제</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M3 6h18"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">새로고침</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 12a9 9 0 1 1-2.64-6.36"/>
<path d="M21 3v6h-6"/>
</svg>
</button>
</div>
<!-- Small · Medium · Large · 추가 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_text color_primary btn_sm">
<span class="btn_label">Small</span>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">Medium</span>
</button>
<button type="button" class="btn btn_text color_primary btn_lg">
<span class="btn_label">Large</span>
</button>
<button type="button" class="btn btn_text color_primary btn_sm">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">추가</span>
</button>
<button type="button" class="btn btn_text color_primary btn_lg">
<span class="btn_label">다음</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</div>
<!-- 비활성 · 비활성 · is-disabled -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_text color_primary btn_icon-only" aria-label="검색">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.3-4.3"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary btn_icon-only" aria-label="편집">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 20h9"/>
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary btn_icon-only btn_sm" aria-label="닫기">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M18 6 6 18M6 6l12 12"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary" disabled>
<span class="btn_label">비활성</span>
</button>
<button type="button" class="btn btn_text color_primary" disabled>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
<span class="btn_label">비활성</span>
</button>
<button type="button" class="btn btn_text color_primary is-disabled" aria-disabled="true">
<span class="btn_label">is-disabled</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</div>
<!-- 전체 너비 텍스트 버튼 -->
<button type="button" class="btn btn_text color_primary btn_block">
<span class="btn_label">전체 너비 텍스트 버튼</span>
</button>아이콘 + 텍스트
아이콘과 함께 사용하는 텍스트도 btn_label 클래스로 감쌉니다.
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">추가</span>
</button>
<button type="button" class="btn btn_filled color_default">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
<span class="btn_label">다운로드</span>
</button>
<button type="button" class="btn btn_outline color_primary">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">새 항목</span>
</button>
</div>아이콘 + 텍스트 (세로)
btn_vertical 클래스로 아이콘을 위·텍스트를 아래에 배치합니다. 하단 탭·퀵 액션 등에 사용합니다.
<!-- 홈 · 검색 · 마이 · 추가 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
<span class="btn_label">홈</span>
</button>
<button type="button" class="btn btn_filled color_default btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.3-4.3"/>
</svg>
<span class="btn_label">검색</span>
</button>
<button type="button" class="btn btn_ghost btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
<span class="btn_label">마이</span>
</button>
<button type="button" class="btn btn_text color_primary btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">추가</span>
</button>
<button type="button" class="btn btn_outline color_primary btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
<span class="btn_label">다운로드</span>
</button>
</div>
<!-- 추가 · 추가 · 추가 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary btn_vertical btn_sm">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">추가</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">추가</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_vertical btn_lg">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">추가</span>
</button>
</div>
<!-- 가이드 · 즐겨찾기 · 삭제 · 저장 중 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_default btn_vertical btn_round">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/>
</svg>
<span class="btn_label">가이드</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_vertical btn_round">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>
<span class="btn_label">즐겨찾기</span>
</button>
<button type="button" class="btn btn_ghost btn_vertical" disabled>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M3 6h18"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>
<span class="btn_label">삭제</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_vertical is-loading" aria-busy="true">
<span class="btn_spinner" aria-hidden="true">
</span>
<span class="btn_label">저장 중</span>
</button>
</div>아이콘 + 텍스트 (세로) · 균등 배분
btn_vertical과 btn_row-equal을 함께 사용하면 부모 100% 너비에서 버튼을 균등 분배합니다. 하단 탭 바 등에 사용합니다.
<div class="btn_row-equal" role="toolbar" aria-label="하단 탭 바">
<button type="button" class="btn btn_text color_primary btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
<span class="btn_label">홈</span>
</button>
<button type="button" class="btn btn_text color_primary btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="3" y="3" width="7" height="7"/>
<rect x="14" y="3" width="7" height="7"/>
<rect x="14" y="14" width="7" height="7"/>
<rect x="3" y="14" width="7" height="7"/>
</svg>
<span class="btn_label">카테고리</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="9" cy="21" r="1"/>
<circle cx="20" cy="21" r="1"/>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
</svg>
<span class="btn_label">장바구니</span>
</button>
<button type="button" class="btn btn_text color_primary btn_vertical">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
<span class="btn_label">마이</span>
</button>
</div>텍스트 + 아이콘
텍스트를 앞에 두고 아이콘을 뒤에 배치합니다. 텍스트는 btn_label로 감쌉니다.
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary">
<span class="btn_label">다음</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">자세히 보기</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
<polyline points="15 3 21 3 21 9"/>
<line x1="10" y1="14" x2="21" y2="3"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">링크 이동</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</div>아이콘 버튼
텍스트 없이 아이콘만 표시합니다. btn_icon-only와 함께 사용하며, 접근성을 위해 aria-label을 반드시 지정합니다.
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary btn_icon-only" aria-label="추가">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_default btn_icon-only" aria-label="설정">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="3"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</button>
<button type="button" class="btn btn_ghost btn_icon-only" aria-label="검색">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.3-4.3"/>
</svg>
</button>
<button type="button" class="btn btn_outline color_primary btn_icon-only" aria-label="편집">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 20h9"/>
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_danger btn_icon-only" aria-label="삭제">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M3 6h18"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_primary btn_icon-only" disabled aria-label="추가">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
</button>
</div>아이콘 버튼 크기
btn_sm, medium, btn_lg 세 가지 크기를 지원합니다.
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary btn_icon-only btn_sm" aria-label="추가 (small)">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_primary btn_icon-only" aria-label="추가 (medium)">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_primary btn_icon-only btn_lg" aria-label="추가 (large)">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_default btn_icon-only btn_sm" aria-label="다운로드 (small)">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_default btn_icon-only" aria-label="다운로드 (medium)">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_default btn_icon-only btn_lg" aria-label="다운로드 (large)">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</button>
</div>색상 변형
상황에 맞는 색상 변형을 사용합니다.
<!-- Success -->
<button type="button" class="btn btn_filled color_success">
<span class="btn_label">Success</span>
</button>
<!-- Danger -->
<button type="button" class="btn btn_filled color_danger">
<span class="btn_label">Danger</span>
</button>
<!-- Warning -->
<button type="button" class="btn btn_filled color_warning">
<span class="btn_label">Warning</span>
</button>
<!-- Outline -->
<button type="button" class="btn btn_outline color_primary">
<span class="btn_label">Outline</span>
</button>크기
small, medium, large 세 가지 크기를 지원합니다.
<!-- Small -->
<button type="button" class="btn btn_filled color_primary btn_sm">
<span class="btn_label">Small</span>
</button>
<!-- Medium -->
<button type="button" class="btn btn_filled color_primary">
<span class="btn_label">Medium</span>
</button>
<!-- Large -->
<button type="button" class="btn btn_filled color_primary btn_lg">
<span class="btn_label">Large</span>
</button>라운드
btn_round 클래스로 pill(캡슐) 형태의 둥근 모서리를 적용합니다. btn_icon-only와 조합하면 원형 아이콘 버튼이 됩니다.
<!-- Primary · Default · Ghost · Outline -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary btn_round">
<span class="btn_label">Primary</span>
</button>
<button type="button" class="btn btn_filled color_default btn_round">
<span class="btn_label">Default</span>
</button>
<button type="button" class="btn btn_ghost btn_round">
<span class="btn_label">Ghost</span>
</button>
<button type="button" class="btn btn_outline color_primary btn_round">
<span class="btn_label">Outline</span>
</button>
<button type="button" class="btn btn_filled color_success btn_round">
<span class="btn_label">Success</span>
</button>
<button type="button" class="btn btn_filled color_danger btn_round">
<span class="btn_label">Danger</span>
</button>
</div>
<!-- Small · Medium · Large -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary btn_round btn_sm">
<span class="btn_label">Small</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_round">
<span class="btn_label">Medium</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_round btn_lg">
<span class="btn_label">Large</span>
</button>
</div>
<!-- 추가 · 다음 · 더 보기 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary btn_round">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
<span class="btn_label">추가</span>
</button>
<button type="button" class="btn btn_filled color_default btn_round">
<span class="btn_label">다음</span>
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
<button type="button" class="btn btn_text color_primary btn_round">
<span class="btn_label">더 보기</span>
</button>
</div>
<!-- 추가 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary btn_round btn_icon-only" aria-label="추가">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_default btn_round btn_icon-only" aria-label="설정">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="3"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</button>
<button type="button" class="btn btn_outline color_primary btn_round btn_icon-only btn_sm" aria-label="검색">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.3-4.3"/>
</svg>
</button>
<button type="button" class="btn btn_filled color_danger btn_round btn_icon-only btn_lg" aria-label="삭제">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M3 6h18"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>
</button>
</div>
<!-- 라운드 버튼 그룹 -->
<div class="btn_group btn_group-round btn_group-fit" role="group" aria-label="라운드 버튼 그룹">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">일</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">주</span>
</button>
<button type="button" class="btn btn_filled color_primary">
<span class="btn_label">월</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">년</span>
</button>
</div>너비
부모 영역 기준으로 너비를 조절합니다. btn_block은 가로 전체, btn_row-equal은 부모 100% 너비에서 버튼을 균등 분배, btn_grow는 비율 분배, btn_fit은 콘텐츠 너비를 유지합니다.
<!-- 전체 너비 버튼 -->
<button type="button" class="btn btn_filled color_primary btn_block">
<span class="btn_label">전체 너비 버튼</span>
</button>
<!-- 취소 · 확인 -->
<div class="btn_row-equal">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">취소</span>
</button>
<button type="button" class="btn btn_filled color_primary">
<span class="btn_label">확인</span>
</button>
</div>
<!-- 취소 · 확인 -->
<div class="btn_row">
<button type="button" class="btn btn_filled color_default btn_grow">
<span class="btn_label">취소</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_grow">
<span class="btn_label">확인</span>
</button>
</div>
<!-- 옵션 A · 옵션 B · 옵션 C -->
<div class="btn_row">
<button type="button" class="btn btn_filled color_default btn_grow">
<span class="btn_label">옵션 A</span>
</button>
<button type="button" class="btn btn_filled color_default btn_grow">
<span class="btn_label">옵션 B</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_grow">
<span class="btn_label">옵션 C</span>
</button>
</div>
<!-- 뒤로 · 취소 · 저장 -->
<div class="btn_row btn_row-start">
<button type="button" class="btn btn_ghost btn_fit">
<span class="btn_label">뒤로</span>
</button>
<button type="button" class="btn btn_filled color_default btn_fit">
<span class="btn_label">취소</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_fit">
<span class="btn_label">저장</span>
</button>
</div>
<!-- 뒤로 · 취소 · 저장 -->
<div class="btn_row btn_row-end">
<button type="button" class="btn btn_ghost btn_fit">
<span class="btn_label">뒤로</span>
</button>
<button type="button" class="btn btn_filled color_default btn_fit">
<span class="btn_label">취소</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_fit">
<span class="btn_label">저장</span>
</button>
</div>
<!-- 뒤로 · 임시 저장 · 제출 -->
<div class="btn_row">
<button type="button" class="btn btn_ghost btn_fit">
<span class="btn_label">뒤로</span>
</button>
<button type="button" class="btn btn_filled color_default btn_grow">
<span class="btn_label">임시 저장</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_grow">
<span class="btn_label">제출</span>
</button>
</div>
<!-- 본문 영역 · 확인 -->
<div class="btn_row">
<button type="button" class="btn btn_filled color_default btn_grow">
<span class="btn_label">본문 영역</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_fit">
<span class="btn_label">확인</span>
</button>
</div>
<!-- 2배 너비 · 1배 너비 -->
<div class="btn_row">
<button type="button" class="btn btn_filled color_default btn_grow-2">
<span class="btn_label">2배 너비</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_grow">
<span class="btn_label">1배 너비</span>
</button>
</div>
<!-- 전체 너비 다운로드 -->
<button type="button" class="btn btn_filled color_primary btn_block">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
<span class="btn_label">전체 너비 다운로드</span>
</button>상태
disabled, is-disabled, is-loading 상태를 표현합니다. 비활성은 스킨별로, 로딩은 텍스트·아이콘 버튼 모두 적용할 수 있습니다.
<!-- Primary · Default · Outline · Ghost -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary" disabled>
<span class="btn_label">Primary</span>
</button>
<button type="button" class="btn btn_filled color_default" disabled>
<span class="btn_label">Default</span>
</button>
<button type="button" class="btn btn_outline color_primary" disabled>
<span class="btn_label">Outline</span>
</button>
<button type="button" class="btn btn_ghost" disabled>
<span class="btn_label">Ghost</span>
</button>
<button type="button" class="btn btn_text color_primary" disabled>
<span class="btn_label">Text</span>
</button>
<button type="button" class="btn btn_filled color_danger" disabled>
<span class="btn_label">Danger</span>
</button>
</div>
<!-- is-disabled · is-disabled · is-disabled -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary is-disabled" aria-disabled="true">
<span class="btn_label">is-disabled</span>
</button>
<button type="button" class="btn btn_filled color_default is-disabled" aria-disabled="true">
<span class="btn_label">is-disabled</span>
</button>
<button type="button" class="btn btn_outline color_primary is-disabled" aria-disabled="true">
<span class="btn_label">is-disabled</span>
</button>
</div>
<!-- 저장 중 · 처리 중 · 업로드 중 -->
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary is-loading" aria-busy="true">
<span class="btn_spinner" aria-hidden="true">
</span>
<span class="btn_label">저장 중</span>
</button>
<button type="button" class="btn btn_filled color_default is-loading" aria-busy="true">
<span class="btn_spinner" aria-hidden="true">
</span>
<span class="btn_label">처리 중</span>
</button>
<button type="button" class="btn btn_outline color_primary is-loading" aria-busy="true">
<span class="btn_spinner" aria-hidden="true">
</span>
<span class="btn_label">업로드 중</span>
</button>
<button type="button" class="btn btn_filled color_primary btn_icon-only is-loading" aria-busy="true" aria-label="저장 중">
<span class="btn_spinner" aria-hidden="true">
</span>
</button>
</div>
<!-- 전체 너비 로딩 -->
<button type="button" class="btn btn_filled color_primary btn_block is-loading" aria-busy="true">
<span class="btn_spinner" aria-hidden="true">
</span>
<span class="btn_label">전체 너비 로딩</span>
</button>버튼 그룹
가로·세로 방향으로 버튼을 묶습니다. btn_group-fit은 콘텐츠 크기 맞춤, btn_group-block은 전체 너비 균등 분배, btn_group-align-start·center·end로 그룹 정렬을 지정합니다.
<!-- 가로 버튼 그룹 small 좌측 -->
<div class="btn_group btn_group-fit btn_group-align-start" role="group" aria-label="가로 버튼 그룹 small 좌측">
<button type="button" class="btn btn_filled color_default btn_sm">
<span class="btn_label">Left</span>
</button>
<button type="button" class="btn btn_filled color_default btn_sm">
<span class="btn_label">Middle</span>
</button>
<button type="button" class="btn btn_filled color_default btn_sm">
<span class="btn_label">Right</span>
</button>
</div>
<!-- 가로 버튼 그룹 medium 좌측 -->
<div class="btn_group btn_group-fit btn_group-align-start" role="group" aria-label="가로 버튼 그룹 medium 좌측">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Left</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Middle</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Right</span>
</button>
</div>
<!-- 가로 버튼 그룹 large 좌측 -->
<div class="btn_group btn_group-fit btn_group-align-start" role="group" aria-label="가로 버튼 그룹 large 좌측">
<button type="button" class="btn btn_filled color_default btn_lg">
<span class="btn_label">Left</span>
</button>
<button type="button" class="btn btn_filled color_default btn_lg">
<span class="btn_label">Middle</span>
</button>
<button type="button" class="btn btn_filled color_default btn_lg">
<span class="btn_label">Right</span>
</button>
</div>
<!-- 가로 버튼 그룹 medium 가운데 -->
<div class="btn_group btn_group-fit btn_group-align-center" role="group" aria-label="가로 버튼 그룹 medium 가운데">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Left</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Middle</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Right</span>
</button>
</div>
<!-- 가로 버튼 그룹 medium 우측 -->
<div class="btn_group btn_group-fit btn_group-align-end" role="group" aria-label="가로 버튼 그룹 medium 우측">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Left</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Middle</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Right</span>
</button>
</div>
<!-- 가로 버튼 그룹 전체 너비 -->
<div class="btn_group btn_group-block" role="group" aria-label="가로 버튼 그룹 전체 너비">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Left</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Middle</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">Right</span>
</button>
</div>
<!-- 세로 버튼 그룹 고정 너비 좌측 -->
<div class="btn_group btn_group-vertical btn_group-fit btn_group-align-start" role="group" aria-label="세로 버튼 그룹 고정 너비 좌측">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">상단</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">중간</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">하단</span>
</button>
</div>
<!-- 세로 버튼 그룹 고정 너비 가운데 -->
<div class="btn_group btn_group-vertical btn_group-fit btn_group-align-center" role="group" aria-label="세로 버튼 그룹 고정 너비 가운데">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">상단</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">중간</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">하단</span>
</button>
</div>
<!-- 세로 버튼 그룹 고정 너비 우측 -->
<div class="btn_group btn_group-vertical btn_group-fit btn_group-align-end" role="group" aria-label="세로 버튼 그룹 고정 너비 우측">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">상단</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">중간</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">하단</span>
</button>
</div>
<!-- 세로 버튼 그룹 전체 너비 -->
<div class="btn_group btn_group-vertical btn_group-block" role="group" aria-label="세로 버튼 그룹 전체 너비">
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">상단</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">중간</span>
</button>
<button type="button" class="btn btn_filled color_default">
<span class="btn_label">하단</span>
</button>
</div>
<!-- 로그인 · 회원가입 -->
<div class="btn_stack">
<button type="button" class="btn btn_filled color_primary btn_block">
<span class="btn_label">로그인</span>
</button>
<button type="button" class="btn btn_filled color_default btn_block">
<span class="btn_label">회원가입</span>
</button>
</div>
<!-- 결제하기 · 쿠폰 적용 -->
<div class="btn_stack">
<button type="button" class="btn btn_filled color_primary btn_block">
<span class="btn_label">결제하기</span>
</button>
<button type="button" class="btn btn_text color_primary">
<span class="btn_label">쿠폰 적용</span>
</button>
</div>
<!-- 다운로드 -->
<div class="btn_stack">
<button type="button" class="btn btn_filled color_primary btn_block">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
<span class="btn_label">다운로드</span>
</button>
<p class="btn_stack-text">최신 버전 v2.0 · <a href="#">릴리스 노트</a>
</p>
</div>루트 태그
tag prop으로 button · a · div를 선택합니다. div와 href 없는 a는 role만으로 Tab 초점이 이동하지 않으므로 tabindex=0을 자동 부여합니다.
<div class="btn_row btn_row-wrap">
<button type="button" class="btn btn_filled color_primary">
<span class="btn_label">button</span>
</button>
<a href="getting-started.html" class="btn btn_outline color_primary">
<span class="btn_label">a + href</span>
</a>
<div class="btn btn_ghost" role="button" tabindex="0">
<span class="btn_label">div → role=button</span>
</div>
<a class="btn btn_text color_primary" role="link" tabindex="0">
<span class="btn_label">a, role=link</span>
</a>
</div>클래스 · 속성
Nuxt와 Next 컴포넌트가 렌더하는 OOCSS 클래스와 접근성 속성입니다. HTML에서는 아래 항목을 직접 조합합니다.
| 클래스 · 속성 | 설명 |
|---|---|
btn | 루트 구조 클래스 |
btn_filled · btn_outline · btn_ghost · btn_text | 기본 스킨 |
btn_select · btn_select-text | 셀렉트 박스형·텍스트형 트리거 |
btn_sm · btn_lg | 크기 변형 |
btn_round | pill(캡슐) 모서리 |
btn_vertical · btn_icon-only | 세로 배치·아이콘 전용 버튼 |
btn_block · btn_grow · btn_grow-2 · btn_fit | 너비 레이아웃 |
icon · btn_label · btn_spinner | 버튼 내부 파트 |
btn_row · btn_group · btn_stack | 버튼 묶음 컨테이너 |
is-disabled · is-loading · is-open · is-error | 상태 클래스 |
color_primary · color_default · color_success · color_warning · color_danger · color_muted | 스킨과 조합하는 색상 유틸리티 |
disabled · aria-disabled | 네이티브·커스텀 비활성 상태. 커스텀 태그는 Tab 순서와 이벤트도 함께 차단 |
aria-label | 아이콘 전용 버튼의 접근 가능한 이름 |
aria-busy | 로딩 상태 전달 |
aria-haspopup · aria-expanded · aria-invalid | 셀렉트·팝오버 트리거 상태 전달 |
role · tabindex | div 또는 href 없는 a를 인터랙티브 요소로 사용할 때 지정 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" · data-no-ripple | 해당 요소 또는 하위 전체의 클릭 파장 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--btn-padding-y · --btn-padding-x · --btn-font-size | 0.5rem · 1rem · var(--text-size-base) | 기본(md) 패딩·타이포 |
--btn-padding-y-sm · --btn-padding-x-sm · --btn-font-size-sm | 0.3rem · 0.75rem · var(--text-size-sm) | sm 크기 |
--btn-padding-y-lg · --btn-padding-x-lg · --btn-font-size-lg | 0.65rem · 1.25rem · var(--text-size-lg) | lg 크기 |
--btn-font-weight · --btn-font-weight-normal · --btn-line-height | 600 · 400 · 1.4 | 타이포 두께·줄높이 |
--btn-border-width · --btn-gap | 1px · var(--space-sm) | 테두리·내부 간격 |
--btn-icon-size · --btn-icon-size-md · --btn-icon-size-lg · --btn-icon-size-xl | 1em · 1.125em · 1.25em · 1.375em | 아이콘 크기 |
--btn-icon-only-padding · --btn-icon-only-padding-sm · --btn-icon-only-padding-lg | 0.5rem · 0.35rem · 0.65rem | 아이콘만 버튼 패딩 |
--btn-vertical-min-width · --btn-vertical-min-width-sm · --btn-vertical-min-width-lg | 4.5rem · 3.75rem · 5.25rem | 세로 배치 최소 너비 |
--btn-vertical-padding-y · --btn-vertical-padding-x | 0.65rem · 0.75rem | 세로 배치 패딩(md) |
--btn-vertical-padding-y-sm · --btn-vertical-padding-x-sm | 0.5rem · 0.6rem | 세로 배치 패딩(sm) |
--btn-vertical-padding-y-lg · --btn-vertical-padding-x-lg | 0.85rem · 0.9rem | 세로 배치 패딩(lg) |
--btn-vertical-label-size · --btn-vertical-label-size-sm · --btn-vertical-label-size-lg | var(--text-size-sm) · var(--text-size-xs) · var(--text-size-base) | 세로 배치 라벨 크기 |
--btn-vertical-label-weight · --btn-vertical-label-line-height | 500 · 1.25 | 세로 배치 라벨 두께·줄높이 |
--btn-select-min-width · --btn-select-max-width | 10rem · 320px | 셀렉트 트리거 너비 |
--btn-select-padding-right · --btn-select-padding-right-sm · --btn-select-padding-right-lg | 0.65rem · 0.5rem · 0.85rem | 셀렉트 캐럿 여백 |
--btn-select-text-padding-x · --btn-select-text-padding-right | 0.5rem · 0.35rem | 텍스트형 셀렉트 패딩 |
--btn-select-text-padding-x-sm · --btn-select-text-padding-right-sm | 0.35rem · 0.25rem | 텍스트형 셀렉트 패딩(sm) |
--btn-select-text-padding-x-lg · --btn-select-text-padding-right-lg | 0.65rem · 0.45rem | 텍스트형 셀렉트 패딩(lg) |
--btn-spinner-size · --btn-spinner-border · --btn-spinner-duration | 1em · 2px · 0.6s | 로딩 스피너 |
--btn-stack-text-size · --btn-stack-text-line-height | var(--text-size-sm) · 1.5 | 스택 하단 안내 텍스트 |
--btn-group-overlap | -1px | 그룹 버튼 테두리 겹침 |