Camel2.0 — Dokumentacja komponentów UI

2.4 #Components.Buttons Buttons

Przyciski akcji w systemie Camel. Pięć wariantów kolorystycznych, trzy rozmiary (sm/md/lg). Full-width poniżej breakpoint-lg. Działają na <button> i <a>.

Examples

Default styling

Positive

Negative

.btn-primary

Primary (niebieskie tło Camel Blue, biały tekst)

Positive

Negative

.btn-positive

Pozytywny (białe tło, ciemny tekst)

Positive

Negative

.btn-negative

Negatywny (żółte tło Camel Yellow, ciemny tekst)

Positive

Negative

.btn-secondary-positive

Outline pozytywny (border brand, przezroczyste tło)

Positive

Negative

.btn-secondary-negative

Outline negatywny (border biały — na ciemne tło)

Positive

Negative

:disabled

Stan wyłączony (szary, cursor not-allowed)

Positive

Negative

Markup: buttons.html

<div style="display: flex; flex-direction: column; gap: 24px;">
  <div>
    <h4 style="margin-bottom: 12px; color: #666; font-size: 13px;">Positive</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-positive [modifier class]">Button</button>
    </div>
  </div>
  <div style="background-color: #0f172a; padding: 20px; border-radius: 8px;">
    <h4 style="margin-bottom: 12px; color: #999; font-size: 13px;">Negative</h4>
    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
      <button class="btn btn-negative [modifier class]">Button</button>
    </div>
  </div>
</div>

Source: src/scss/components/_buttons.scss, line 1