Buttons

Solid Buttons

기본 액션에 사용. 모든 의미별 색상 지원.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

Outline Buttons

보조 액션 또는 강조가 덜한 액션

<button class="btn btn-outline-primary">Primary</button>

Sizes

btn-sm, 기본, btn-lg 3가지 크기

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>

Buttons with Icons

Bootstrap Icons (bi-*) 와 함께 사용

<button class="btn btn-primary">
    <i class="bi bi-plus-lg me-1"></i>새로 만들기
</button>

Block / Full-width

d-grid 컨테이너로 전체 너비 버튼

<div class="d-grid gap-2">
    <button class="btn btn-primary">Block Button</button>
</div>

Social Buttons (custom)

CSS 커스텀 프로퍼티로 색상 동적 주입

<a class="btn btn-outline-social" style="--social-color: #1877F2;">
    <i class="bi bi-facebook"></i>Facebook
</a>

States

비활성, 로딩, 활성 상태