Design System

Buttons

Buttons documentation goes here.

Base classes

HTML
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

Sizes

HTML
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Variants

HTML
<!-- Grassy green -->
<button type="button" class="btn btn-success">Success</button>
<!-- Deep rose -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Honey yellow -->
<button type="button" class="btn btn-warning">Warning</button>

Outline buttons

HTML
<!-- Grassy green -->
<button type="button" class="btn btn-outline-success">Success</button>
<!-- Deep rose -->
<button type="button" class="btn btn-outline-danger">Danger</button>
<!-- Honey yellow -->
<button type="button" class="btn btn-outline-warning">Warning</button>

Close button

HTML
<button type="button" class="btn-close" aria-label="Close"></button>