Tombol ikon
Untuk aksi yang maknanya sudah jelas tanpa kata, di tempat yang tak punya ruang.
Pratinjau langsung
Sumber
<button type="button" class="dc-ibtn" aria-pressed="false">
<svg class="dc-ibtn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<path d="M12 20C9 18 5 15 5 11a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4-4 7-7 9z"></path>
</svg>
<span class="dc-sr">관심 목록에 담기</span>
</button>.dc-ibtn {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text-sub);
transition: background var(--dc-fast), color var(--dc-fast), border-color var(--dc-fast);
}
.dc-ibtn:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-ibtn[aria-pressed="true"] {
background: var(--dc-brand-soft); border-color: var(--dc-brand); color: var(--dc-brand-text);
}
.dc-ibtn[aria-pressed="true"] .dc-ibtn__icon { fill: currentColor; }
.dc-ibtn[disabled] {
background: var(--dc-sunken); color: var(--dc-text-mute);
border-color: var(--dc-line); cursor: not-allowed;
}
.dc-ibtn__icon { width: 20px; height: 20px; }
.dc-ibtn--quiet { background: transparent; border-color: transparent; }
.dc-ibtn--quiet:hover { background: var(--dc-sunken); }
.dc-ibtn--solid {
background: var(--dc-brand); border-color: var(--dc-brand); color: var(--dc-text-on);
}
.dc-ibtn--solid:hover { background: var(--dc-brand-hi); color: var(--dc-text-on); }
.dc-ibtn--badge { position: relative; }
.dc-ibtn__dot {
position: absolute; top: 7px; right: 7px;
width: 8px; height: 8px; border-radius: var(--dc-r-full);
background: var(--dc-danger);
box-shadow: 0 0 0 2px var(--dc-surface);
}Cara memakainya
- Hanya untuk ikon yang sudah mapan: tutup, cari, notifikasi, lainnya
- Ikon boleh 20px, tetapi area tekan tetap 44×44px
- Kalau statusnya menetap, nyatakan dengan aria-pressed
Hal yang perlu diwaspadai
- Selalu sertakan nama di dc-sr — tanpa itu pembaca layar hanya menyebut 'tombol'
- Jangan mengajarkan makna baru melalui ikon; satu kata lebih cepat