Docs 레이아웃 메뉴바 메인구성 자동박스 신형 자동박스(v2) Color Picker 웹 접근성 본고딕 UI/UX SEO 폰트설정 Plugins 아이콘(NDfont) Slick Tabs Sticky 전국지도 Swiper Validate Codemirror Custom Scroll Foundation 버튼 체크박스/라디오 스위치 레이블 패널 알림
Defalut button Basic Secondary Success Warning Alert Pink White Gray standard Basic Secondary Success Warning Alert Pink White Gray <!-- primary --> <button type="button" class="button">Basic</button> <button type="button" class="button standard">Basic</button> <!-- secondary --> <button type="button" class="button secondary">Secondary</button> <button type="button" class="button standard secondary">Secondary</button> <!-- success --> <button type="button" class="button success">Success</button> <button type="button" class="button standard success">Success</button> <!-- warning --> <button type="button" class="button warning">Warning</button> <button type="button" class="button standard warning">Warning</button> <!-- alert --> <button type="button" class="button alert">Alert</button> <button type="button" class="button standard alert">Alert</button> <!-- pink --> <button type="button" class="button nd-pink">Pink</button> <button type="button" class="button standard nd-pink">Pink</button> <!-- white --> <button type="button" class="button nd-white">White</button> <button type="button" class="button standard nd-white">White</button> <!-- gray --> <button type="button" class="button nd-gray">Gray</button> <button type="button" class="button standard nd-gray">Gray</button> Group Basic Secondary Success Warning Alert Pink White Gray <div class="button-group"> <button type="button" class="button">Basic</button> <button type="button" class="button secondary">Secondary</button> <button type="button" class="button success">Success</button> <button type="button" class="button warning">Warning</button> <button type="button" class="button alert">Alert</button> <button type="button" class="button nd-pink">Pink</button> <button type="button" class="button nd-white">White</button> <button type="button" class="button nd-gray">Gray</button> </div> Hollow Basic Secondary Success Warning Alert Pink Gray <button type="button" class="hollow button">Basic</button> <button type="button" class="hollow button secondary">Secondary</button> <button type="button" class="hollow button success">Success</button> <button type="button" class="hollow button warning">Warning</button> <button type="button" class="hollow button alert">Alert</button> <button type="button" class="hollow button nd-pink">Pink</button> <button type="button" class="hollow button nd-gray">Gray</button> Sizes Tiny Small Defalut Large Expanded <button type="button" class="button tiny">Button</button> <button type="button" class="button small">Button</button> <button type="button" class="button">Button</button> <button type="button" class="button large">Button</button> <button type="button" class="button expanded">Button</button> Dropdown Tiny Dropdown Small Dropdown Default Dropdown Large Dropdown Expanded Dropdown <button class="tiny dropdown button">Dropdown Button</button> <button class="small dropdown button">Dropdown Button</button> <button class="dropdown button">Dropdown Button</button> <button class="large dropdown button">Dropdown Button</button> <button class="expanded dropdown button">Dropdown Button</button> Close <button class="button" type="button"> <span class="show-for-sr">Close</span> <span aria-hidden="true"><i class="fa fa-times"></i></span> </button>
Defalut button Basic Secondary Success Warning Alert Pink White Gray standard Basic Secondary Success Warning Alert Pink White Gray <!-- primary --> <button type="button" class="button">Basic</button> <button type="button" class="button standard">Basic</button> <!-- secondary --> <button type="button" class="button secondary">Secondary</button> <button type="button" class="button standard secondary">Secondary</button> <!-- success --> <button type="button" class="button success">Success</button> <button type="button" class="button standard success">Success</button> <!-- warning --> <button type="button" class="button warning">Warning</button> <button type="button" class="button standard warning">Warning</button> <!-- alert --> <button type="button" class="button alert">Alert</button> <button type="button" class="button standard alert">Alert</button> <!-- pink --> <button type="button" class="button nd-pink">Pink</button> <button type="button" class="button standard nd-pink">Pink</button> <!-- white --> <button type="button" class="button nd-white">White</button> <button type="button" class="button standard nd-white">White</button> <!-- gray --> <button type="button" class="button nd-gray">Gray</button> <button type="button" class="button standard nd-gray">Gray</button>
Group Basic Secondary Success Warning Alert Pink White Gray <div class="button-group"> <button type="button" class="button">Basic</button> <button type="button" class="button secondary">Secondary</button> <button type="button" class="button success">Success</button> <button type="button" class="button warning">Warning</button> <button type="button" class="button alert">Alert</button> <button type="button" class="button nd-pink">Pink</button> <button type="button" class="button nd-white">White</button> <button type="button" class="button nd-gray">Gray</button> </div>
Hollow Basic Secondary Success Warning Alert Pink Gray <button type="button" class="hollow button">Basic</button> <button type="button" class="hollow button secondary">Secondary</button> <button type="button" class="hollow button success">Success</button> <button type="button" class="hollow button warning">Warning</button> <button type="button" class="hollow button alert">Alert</button> <button type="button" class="hollow button nd-pink">Pink</button> <button type="button" class="hollow button nd-gray">Gray</button>
Sizes Tiny Small Defalut Large Expanded <button type="button" class="button tiny">Button</button> <button type="button" class="button small">Button</button> <button type="button" class="button">Button</button> <button type="button" class="button large">Button</button> <button type="button" class="button expanded">Button</button>
Dropdown Tiny Dropdown Small Dropdown Default Dropdown Large Dropdown Expanded Dropdown <button class="tiny dropdown button">Dropdown Button</button> <button class="small dropdown button">Dropdown Button</button> <button class="dropdown button">Dropdown Button</button> <button class="large dropdown button">Dropdown Button</button> <button class="expanded dropdown button">Dropdown Button</button>
Close <button class="button" type="button"> <span class="show-for-sr">Close</span> <span aria-hidden="true"><i class="fa fa-times"></i></span> </button>
