클래스로 구분하여 상황에 맞는 버튼을 사용합니다.

<button type="button" class="xe-btn">default</button>
<button type="button" class="xe-btn xe-btn-primary">primary</button>
<button type="button" class="xe-btn xe-btn-secondary">secondary</button>
<button type="button" class="xe-btn xe-btn-success">success</button>
<button type="button" class="xe-btn xe-btn-positive">positive</button>
<button type="button" class="xe-btn xe-btn-warning">warning</button>
<button type="button" class="xe-btn xe-btn-danger">danger</button>
<button type="button" class="xe-btn xe-btn-fail">fail</button>
<button type="button" class="xe-btn xe-btn-link">link</button>

<a>, <button>, <input> 서로 다른 요소에서도 같은 스타일로 보여지게 됩니다.

<a href="#" class="xe-btn">Link</a>
<button type="button" class="xe-btn">button</button>
<input class="xe-btn" type="button" value="Input">
<input class="xe-btn" type="submit" value="Submit">

.xe-btn-xs, .xe-btn-sm, .xe-btn-lg 클래스에 따라 버튼 크기를 조절할 수 있습니다.

<button type="button" class="xe-btn xe-btn-primary xe-btn-xs">Extra small</button>
<button type="button" class="xe-btn xe-btn-primary xe-btn-sm">Small</button>
<button type="button" class="xe-btn xe-btn-primary">Default</button>
<button type="button" class="xe-btn xe-btn-primary xe-btn-lg">Large</button>

.xe-btn-block 클래스를 추가하여 꽉찬 너비의 버튼을 만듭니다.

<button type="button" class="xe-btn xe-btn-primary xe-btn-block">xe-btn-block</button>
<button type="button" class="xe-btn xe-btn-secondary xe-btn-block">xe-btn-block</button>

.*-outline 클래스 통해 BG 없어 border로만 이루어져 있는 버튼 스타일을 사용할 수 있습니다.

<button type="button" class="xe-btn xe-btn-primary-outline">primary</button>
<button type="button" class="xe-btn xe-btn-success-outline">success</button>
<button type="button" class="xe-btn xe-btn-positive-outline">positive</button>
<button type="button" class="xe-btn xe-btn-warning-outline">warning</button>
<button type="button" class="xe-btn xe-btn-danger-outline">danger</button>
<button type="button" class="xe-btn xe-btn-fail-outline">fail</button>

on/off를 명확히 표현하기 위해 토글 버튼을 사용합니다.

<div class="xe-btn-toggle">
    <label>
        <span class="xe-sr-only">toggle</span>
        <input type="checkbox" checked="">
        <span class="toggle"></span>
    </label>
</div>
<div class="xe-btn-toggle">
    <label>
        <span class="xe-sr-only">toggle</span>
        <input type="checkbox">
        <span class="toggle"></span>
    </label>
</div>

.active 클래스를 추가하여 활성화 상태를 표시합니다.

<button type="button" class="xe-btn xe-btn-primary active">primary</button>
<button type="button" class="xe-btn xe-btn-secondary active">primary</button>

:disabled attribute 또는 .disabled 클래스 통해 비활성화 상태를 표시합니다.

<button type="button" class="xe-btn xe-btn-primary" disabled="">button:disabled</button>
<button type="button" class="xe-btn xe-btn-secondary" disabled="">button:disabled</button>
<div class="xe-btn-toggle">
    <label>
        <span class="xe-sr-only">toggle</span>
        <input type="checkbox" checked="" disabled="">
        <span class="toggle"></span>
    </label>
</div>
<button type="button" class="xe-btn xe-btn-secondary" disabled="">button:disabled</button>
<div class="xe-btn-toggle">
    <label>
        <span class="xe-sr-only">toggle</span>
        <input type="checkbox" disabled="">
        <span class="toggle"></span>
    </label>
</div>

<a> 요소는 :disabled 를 지원하지 않아 .disabled 클래스로 적용해야 합니다.

<a href="#" class="xe-btn xe-btn-primary disabled">a.disabled</a>
<a href="#" class="xe-btn xe-btn-secondary disabled">a.disabled</a>

부모에 .xe-btn-group 추가 시 버튼들을 하나의 그룹핑된 스타일로 보여지게 됩니다.

<div class="xe-btn-group xe-btn-group-lg">
    <button type="button" class="xe-btn">Left</button>
    <button type="button" class="xe-btn">Middle</button>
    <button type="button" class="xe-btn">Right</button>
</div>
<div class="xe-btn-group">
    <button type="button" class="xe-btn">Left</button>
    <button type="button" class="xe-btn">Middle</button>
    <button type="button" class="xe-btn">Right</button>
</div>
<div class="xe-btn-group xe-btn-group-sm">
    <button type="button" class="xe-btn">Left</button>
    <button type="button" class="xe-btn">Middle</button>
    <button type="button" class="xe-btn">Right</button>
</div>
<div class="xe-btn-group xe-btn-group-xs">
    <button type="button" class="xe-btn">Left</button>
    <button type="button" class="xe-btn">Middle</button>
    <button type="button" class="xe-btn">Right</button>
</div>