Component

Buttons

Quanta buttons provide consistent, reusable button styles for UI interactions.

<button class="quanta-btn quanta-btn-primary">Primary</button>
<button class="quanta-btn quanta-btn-success">Success</button>
<button class="quanta-btn quanta-btn-danger">Danger</button>
<button class="quanta-btn quanta-btn-warning">Warning</button>
<button class="quanta-btn quanta-btn-info">Info</button>
<button class="quanta-btn quanta-btn-accent">Accent</button>
<button class="quanta-btn quanta-btn-neutral">Neutral</button>

Sizes

Available in sm, md, and lg:

<button class="quanta-btn quanta-btn-sm quanta-btn-primary">Small</button>
<button class="quanta-btn quanta-btn-md quanta-btn-primary">Medium</button>
<button class="quanta-btn quanta-btn-lg quanta-btn-primary">Large</button>

Outline Buttons

Lighter alternative with outlines:

<button class="quanta-btn quanta-btn-outline-primary">Primary</button>
<button class="quanta-btn quanta-btn-outline-success">Success</button>
<button class="quanta-btn quanta-btn-outline-danger">Danger</button>
<button class="quanta-btn quanta-btn-outline-info">Info</button>
<button class="quanta-btn quanta-btn-outline-accent">Accent</button>

Rounded Options

Modify button curvature easily:

<button class="quanta-btn quanta-btn-primary quanta-btn-rounded-sm">sm</button>
<button class="quanta-btn quanta-btn-primary quanta-btn-rounded">default</button>
<button class="quanta-btn quanta-btn-primary quanta-btn-rounded-lg">lg</button>
<button class="quanta-btn quanta-btn-primary quanta-btn-rounded-full">full</button>

Icon Buttons

Use quanta-btn-icon for circular icon buttons:

<button class="quanta-btn quanta-btn-icon quanta-btn-primary">
  <i class="icon-start bi bi-star"></i>
</button>
<button class="quanta-btn quanta-btn-icon quanta-btn-success">
  <i class="icon-start bi bi-check"></i>
</button>