Camel2.0 — Dokumentacja komponentów UI

Example

Positive — Stany

Negative — Stany

Secondary Positive — Stany

Secondary Negative — Stany

Jako linki (<a>)

Markup: buttons--states.html
<div style="display: flex; flex-direction: column; gap: 24px;">
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Positive — Stany</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-positive">Default</button>
      <button class="btn btn-positive" disabled>Disabled</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Negative — Stany</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-negative">Default</button>
      <button class="btn btn-negative" disabled>Disabled</button>
    </div>
  </div>
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Secondary Positive — Stany</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-secondary-positive">Default</button>
      <button class="btn btn-secondary-positive" disabled>Disabled</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 — Stany</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-secondary-negative">Default</button>
      <button class="btn btn-secondary-negative" disabled>Disabled</button>
    </div>
  </div>
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Jako linki (&lt;a&gt;)</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <a href="#" class="btn btn-positive">Positive Link</a>
      <a href="#" class="btn btn-secondary-positive">Secondary Link</a>
    </div>
  </div>
</div>
Source: src/scss/components/_buttons.scss, line 28