2.18 #Components.LikeButton Like Button
Toggle example guides Toggle HTML markup
Przycisk "serduszko" z licznikiem polubień. Animacja pulse po kliknięciu.
Kolor themowany przez --like-btn-color CSS custom property.
Examples
Default styling
.like-btn--light
Wariant na jasne tło (kolor brandu zamiast białego)
Markup: like-btn.html
<div style="display: flex; gap: 40px; align-items: flex-end;">
<div style="position: relative; width: 80px; height: 80px; background: #0f172a; border-radius: 8px;">
<button class="like-btn" data-likes="303" style="position: absolute; bottom: 8px; right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="31" viewBox="0 0 33 31" fill="none"><path d="M16.5 30L2.4 16.7C-1 13.3-0.6 7.6 3.3 4.7C7 2 11.8 3 14.5 5.5L16.5 7.5L18.5 5.5C21.2 3 26 2 29.7 4.7C33.6 7.6 34 13.3 30.6 16.7L16.5 30Z" stroke="currentColor" stroke-width="2"/></svg>
<span class="like-btn__count">303</span>
</button>
</div>
<div style="position: relative; width: 80px; height: 80px; background: #f5f5f1; border-radius: 8px;">
<button class="like-btn like-btn--light" data-likes="42" style="position: absolute; bottom: 8px; right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="31" viewBox="0 0 33 31" fill="none"><path d="M16.5 30L2.4 16.7C-1 13.3-0.6 7.6 3.3 4.7C7 2 11.8 3 14.5 5.5L16.5 7.5L18.5 5.5C21.2 3 26 2 29.7 4.7C33.6 7.6 34 13.3 30.6 16.7L16.5 30Z" stroke="currentColor" stroke-width="2"/></svg>
<span class="like-btn__count">42</span>
</button>
</div>
</div>
Source:
src/scss/components/_like-btn.scss, line 1