Button
Default / Hover / Disabled — Hover 는 :hover 로 자동, 비활성은 disabled 속성.
Primary
.btn.btn-primary · 높이 50
<button type="button" class="btn btn-primary">Text</button>
<!-- 비활성 -->
<button type="button" class="btn btn-primary" disabled>Text</button>
Default
Hover
Disabled
Secondary
.btn.btn-secondary · 높이 50
<button type="button" class="btn btn-secondary">Text</button>
<button type="button" class="btn btn-secondary" disabled>Text</button>
Default
Hover
Disabled
Basic_Line / Basic_Fill / Basic_Tertiary
.btn-line / .btn-fill / .btn-tertiary · 높이 44
<button type="button" class="btn btn-line">Text</button>
<button type="button" class="btn btn-fill">Text</button>
<button type="button" class="btn btn-tertiary">Text</button>
<!-- 비활성: disabled 속성 -->
Line
Line · Hover
Line · Disabled
Fill
Fill · Hover
Fill · Disabled
Tertiary
Tertiary · Hover
Tertiary · Disabled
Basic_Round
.btn.btn-round · 아이콘 + 텍스트
<button type="button" class="btn btn-round">
<i class="ico ico-user"></i> Text
</button>
Default
Hover
Disabled
Filter — Search / Excel
.btn.btn-filter.btn-filter--search / --excel · 44×44
<button type="button" class="btn btn-filter btn-filter--search">
<i class="ico ico-search ico-20"></i>
</button>
<button type="button" class="btn btn-filter btn-filter--excel">
<img class="ico-img" src="/img/icons/other/excel.svg" alt="">
</button>
Search
Search · Hover
Search · Disabled
Excel
Excel · Hover
Excel · Disabled
Small / Text / Text + Img
.btn-sm / .btn-text / .btn-text(+아이콘)
<button type="button" class="btn btn-sm">Text</button>
<button type="button" class="btn btn-text">Text Btn</button>
<button type="button" class="btn btn-text">
<i class="ico ico-file"></i> Text Btn
</button>
Small
Small · Hover
Small · Disabled
Text
Text · Hover
Text · Disabled
Text + Img
Text + Img · Disabled
Basic_Light
.btn-light · 흰 배경 + N-400 테두리 + 아이콘 (알약형 .btn-round 와
별개)
<button type="button" class="btn btn-light">
<i class="ico ico-user"></i>Text
</button>
Normal
Hover
Disabled
Text_Line
.btn-text-line · 항상 밑줄 텍스트 버튼 (.btn-text 는 hover 때만 밑줄)
<button type="button" class="btn btn-text-line">Text Btn</button>
Normal
Hover
Disabled
Delete
.btn-line.btn-del · 표/폼의 '삭제' 액션 (에러색 라인형)
<button type="button" class="btn btn-line btn-del">삭제</button>
<!-- 표 안 작은 삭제 -->
<button type="button" class="btn btn-line btn-sm btn-del">삭제</button>
Default
Hover
Disabled
Small