Buttons

Buttons are class-based: combine .ziom-btn with a variant (.ziom-btn-primary) and optionally a size. There is no button helper or partial — apply the classes directly to a <button> or <a>.

Variants

HTML

<button class="ziom-btn ziom-btn-primary">Primary</button>
<button class="ziom-btn ziom-btn-secondary">Secondary</button>
<button class="ziom-btn ziom-btn-glass">Glass</button>
<button class="ziom-btn ziom-btn-ghost">Ghost</button>
<button class="ziom-btn ziom-btn-outline">Outline</button>

Semantic

HTML

<button class="ziom-btn ziom-btn-success">Success</button>
<button class="ziom-btn ziom-btn-warning">Warning</button>
<button class="ziom-btn ziom-btn-danger">Danger</button>
<button class="ziom-btn ziom-btn-danger-outline">Danger Outline</button>

Sizes

HTML

<button class="ziom-btn ziom-btn-primary ziom-btn-xs">Extra Small</button>
<button class="ziom-btn ziom-btn-primary ziom-btn-sm">Small</button>
<button class="ziom-btn ziom-btn-primary">Default</button>
<button class="ziom-btn ziom-btn-primary ziom-btn-lg">Large</button>
<button class="ziom-btn ziom-btn-primary ziom-btn-xl">Extra Large</button>

With Icons & Icon-only

HTML

<button class="ziom-btn ziom-btn-primary">
  <i class="ph ph-plus"></i> New
</button>
<button class="ziom-btn ziom-btn-secondary ziom-btn-icon" aria-label="Edit">
  <i class="ph ph-pencil-simple"></i>
</button>
<button class="ziom-btn ziom-btn-ghost ziom-btn-icon ziom-btn-sm" aria-label="Delete">
  <i class="ph ph-trash"></i>
</button>

Pill & Group

HTML

<button class="ziom-btn ziom-btn-primary ziom-btn-pill">Pill Button</button>
<div class="ziom-btn-group">
  <button class="ziom-btn">Left</button>
  <button class="ziom-btn active">Middle</button>
  <button class="ziom-btn">Right</button>
</div>

Disabled

HTML

<button class="ziom-btn ziom-btn-primary" disabled>Disabled</button>
<button class="ziom-btn ziom-btn-secondary" disabled>Disabled</button>