Buttons

버튼을 사용하여 사용자가 수행할 수 있는 작업을 전달하고 페이지와 상호 작용할 수 있도록 합니다.

Filled

<button class="btn btn_sm btn_primary">버튼</button>
소스 코드가 복사되었습니다.
Outlined

<button class="btn btn_sm btn_border">버튼</button>
소스 코드가 복사되었습니다.
Rounded

<button class="btn btn_sm btn_radius btn_primary">버튼</button>
소스 코드가 복사되었습니다.
Icon

<button class="btn btn_sm btn_primary btn_icon"><i class="ico_zoom white ico_24"></i></button> <button class="btn btn_sm btn_border btn_icon"><i class="ico_zoom blue ico_24"></i></button> <button class="btn btn_sm btn_primary btn_radius btn_icon"><i class="ico_zoom white ico_16"></i></button>
소스 코드가 복사되었습니다.
Label Icon

<button class="btn btn_sm btn_primary"><i class="ico_write white ico_16"></i>버튼</button> <button class="btn btn_sm btn_border"><i class="ico_write blue ico_16"></i>버튼</button> <button class="btn btn_sm btn_primary btn_radius"><i class="ico_write white ico_16"></i>버튼</button>
소스 코드가 복사되었습니다.

Hover

<button class="btn btn_sm btn_primary">버튼</button> <button class="btn btn_sm btn_border">버튼</button> <button class="btn btn_sm btn_radius btn_primary">버튼</button> <button class="btn btn_sm btn_primary btn_icon"><i class="ico_zoom white ico_24"></i></button> <button class="btn btn_sm btn_primary"><i class="ico_write white ico_16"></i>버튼</button>
소스 코드가 복사되었습니다.
Disabled

<button class="btn btn_sm btn_disabled">버튼</button> <button class="btn btn_sm btn_border btn_disabled">버튼</button> <button class="btn btn_sm btn_radius btn_disabled">버튼</button> <button class="btn btn_sm btn_icon btn_disabled"><i class="ico_zoom white ico_24"></i></button> <button class="btn btn_sm btn_border btn_icon btn_disabled"><i class="ico_zoom blue ico_24"></i></button> <button class="btn btn_sm btn_radius btn_disabled btn_icon"><i class="ico_zoom white ico_24"></i></button> <button class="btn btn_sm btn_disabled"><i class="ico_write white ico_16"></i>버튼</button> <button class="btn btn_sm btn_border btn_disabled"><i class="ico_write blue ico_16"></i>버튼</button> <button class="btn btn_sm btn_disabled btn_radius"><i class="ico_write white ico_16"></i>버튼</button>
소스 코드가 복사되었습니다.

버튼의 중요도에 따라 사이즈를 적용할 수 있습니다


Size	Description
XSmall	기본 또는 필드 크기 버튼에 대한 세로 공간이 충분하지 않을 때 사용합니다.
Small	버튼이 입력 필드와 쌍을 이룰 때 사용합니다.
Medium	가장 일반적인 버튼 크기입니다. 14px 버튼 텍스트를 사용하세요.
Large	비중이 높은 것을 표현할 때 사용합니다. 16px 본문 텍스트를 사용하세요.
XLarge	버튼이 측면 패널이나 모달과 같은 구성 요소의 가장자리로 쓰일 때 사용합니다.

<button class="btn btn_xs btn_primary">XSmall button = height 32px</button> <button class="btn btn_sm btn_primary">Small button = height 38px</button> <button class="btn btn_md btn_primary">Medium button = height 44px</button> <button class="btn btn_lg btn_primary">Large button = height 50px</button> <button class="btn btn_xl btn_primary">XLarge button = height 56px</button>
소스 코드가 복사되었습니다.

버튼의 강조 수준을 표시하도록 버튼 형식을 지정할 수 있습니다.
2개의 버튼이 있을 경우 중요 버튼은 항상 오른쪽에 위치합니다.

<button class="btn btn_md btn_primary">Primary</button> <button class="btn btn_md btn_primary">Primary:hover</button> <button class="btn btn_md btn_secondary">Secondary</button> <button class="btn btn_md btn_secondary">Secondary:hover</button> <button class="btn btn_md btn_normal">Normal</button> <button class="btn btn_md btn_normal">Normal:hover</button>
소스 코드가 복사되었습니다.
Example 1

<div class="btn_group"> <button class="btn btn_md btn_normal">취소</button> <button class="btn btn_md btn_primary">저장</button> </div>
소스 코드가 복사되었습니다.
Example 2

<div class="btn_group"> <button class="btn btn_md btn_normal">취소</button> <button class="btn btn_md btn_secondary">저장</button> </div>
소스 코드가 복사되었습니다.