Button

Buttons in various variants and sizes

Basic Usage

HTML
<button class="bl-btn bl-btn-primary">Primary Button</button>

Variants

HTML
<button class="bl-btn bl-btn-primary">Primary</button>
<button class="bl-btn bl-btn-secondary">Secondary</button>
<button class="bl-btn bl-btn-outline">Outline</button>
<button class="bl-btn bl-btn-ghost">Ghost</button>
<button class="bl-btn bl-btn-link">Link</button>

Semantic Variants

HTML
<button class="bl-btn bl-btn-success">Success</button>
<button class="bl-btn bl-btn-warning">Warning</button>
<button class="bl-btn bl-btn-error">Error</button>
<button class="bl-btn bl-btn-info">Info</button>

Sizes

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

Block Button

HTML
<button class="bl-btn bl-btn-primary bl-btn-block">Block Button</button>

Disabled State

HTML
<button class="bl-btn bl-btn-primary" disabled>Disabled</button>
<button class="bl-btn bl-btn-secondary bl-disabled">Disabled Class</button>