2.4.2 #Components.Buttons.States Buttons — Stany i linki
Toggle example guides Toggle HTML markup
Stan disabled, oraz użycie jako element <a>.
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 (<a>)</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