Camel2.0 — Dokumentacja komponentów UI

<div style="display: flex; flex-direction: column; gap: 24px;">
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Positive — Rozmiary</h4>
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
      <button class="btn btn-positive btn-sm">Small</button>
      <button class="btn btn-positive">Medium (default)</button>
      <button class="btn btn-positive btn-lg">Large</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Negative — Rozmiary</h4>
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
      <button class="btn btn-negative btn-sm">Small</button>
      <button class="btn btn-negative">Medium (default)</button>
      <button class="btn btn-negative btn-lg">Large</button>
    </div>
  </div>
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Secondary Positive — Rozmiary</h4>
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
      <button class="btn btn-secondary-positive btn-sm">Small</button>
      <button class="btn btn-secondary-positive">Medium</button>
      <button class="btn btn-secondary-positive btn-lg">Large</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Secondary Negative — Rozmiary</h4>
    <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
      <button class="btn btn-secondary-negative btn-sm">Small</button>
      <button class="btn btn-secondary-negative">Medium</button>
      <button class="btn btn-secondary-negative btn-lg">Large</button>
    </div>
  </div>
</div>