Settings

Mode

Direction

Contrast

Layout

Stretch

Presets

Buttons

Solid Buttons


<div class="flex flex-wrap gap-4 xxl:gap-6">
  <button class="btn-default">Default</button>
  <button class="btn-primary">Primary</button>
  <button class="btn-secondary">Secondary</button>
  <button class="btn-info">Info</button>
  <button class="btn-success">Success</button>
  <button class="btn-warning">Warning</button>
  <button class="btn-error">Error</button>
  <button class="btn-disabled" disabled>Disabled</button>
</div>
                  

Outline Buttons


<div class="flex flex-wrap gap-4 xxl:gap-6">
  <button class="btn-default-outlined">Default</button>
  <button class="btn-primary-outlined">Primary</button>
  <button class="btn-secondary-outlined">Secondary</button>
  <button class="btn-info-outlined">Info</button>
  <button class="btn-success-outlined">Success</button>
  <button class="btn-warning-outlined">Warning</button>
  <button class="btn-error-outlined">Error</button>
  <button class="btn-disabled-outlined" disabled>Disabled</button>
</div>
                  

Subtle Buttons


<div class="flex flex-wrap gap-4 xxl:gap-6">
  <button class="btn-default-soft">Default</button>
  <button class="btn-primary-soft">Primary</button>
  <button class="btn-secondary-soft">Secondary</button>
  <button class="btn-info-soft">Info</button>
  <button class="btn-success-soft">Success</button>
  <button class="btn-warning-soft">Warning</button>
  <button class="btn-error-soft">Error</button>
</div>
                  

Text Buttons


<div class="flex flex-wrap">
  <button class="btn-default-text">Default</button>
  <button class="btn-primary-text">Primary</button>
  <button class="btn-secondary-text">Secondary</button>
  <button class="btn-info-text">Info</button>
  <button class="btn-success-text">Success</button>
  <button class="btn-warning-text">Warning</button>
  <button class="btn-error-text">Error</button>
  <button class="btn-disabled-text" disabled>Disabled</button>
</div>
                  

Button Sizes


<div class="flex flex-wrap items-center gap-4">
  <button class="btn-small">Primary</button>
  <button class="btn-primary">Primary</button>
  <button class="btn-large">Primary</button>
</div>