Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Baris aksi ikon

Untuk beberapa aksi berbobot sama — suka, komentar, bagikan — yang berdiri berdampingan di bawah sebuah pos atau foto.

Tombol dan aksi

Pratinjau langsung

Sumber

<div class="dc-iwrap">
  <p class="dc-iwrap__body">현장 사진 3장을 올렸습니다. 확인 부탁드립니다.</p>
  <div class="dc-irow" role="group" aria-label="게시물 동작">
    <button class="dc-ibtn" type="button" aria-pressed="false">
      <svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.5-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.5 12 20 12 20z" /></svg>
      <span class="dc-sr">좋아요</span>
    </button>
    <button class="dc-ibtn" type="button">
      <svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.3 7.3L4 21l1.7-5.7A8 8 0 1 1 21 12z" /></svg>
      <span class="dc-sr">댓글 쓰기</span>
    </button>
    <button class="dc-ibtn" type="button">
      <svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4m0 0L8 8m4-4 4 4" /><path d="M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4" /></svg>
      <span class="dc-sr">공유</span>
    </button>
    <span class="dc-irow__gap"></span>
    <button class="dc-ibtn" type="button" aria-pressed="false">
      <svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z" /></svg>
      <span class="dc-sr">저장</span>
    </button>
  </div>
</div>
.dc-iwrap {
  padding: var(--dc-4);
  background: var(--dc-surface);
  font-family: var(--dc-font);
}
.dc-iwrap__body {
  margin: 0 0 var(--dc-2);
  font-size: 15px;
  line-height: 1.6;
  color: var(--dc-text);
}
.dc-irow {
  display: flex;
  align-items: center;
  gap: var(--dc-1);
  margin-left: calc(var(--dc-2) * -1);
}
.dc-irow__gap { flex: 1; }
.dc-ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--dc-r-sm);
  background: none;
  color: var(--dc-text-sub);
  cursor: pointer;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-ibtn:hover {
  background: var(--dc-sunken);
  color: var(--dc-text);
}
.dc-ibtn__ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dc-ibtn[aria-pressed="true"] {
  color: var(--dc-brand-text);
}
.dc-ibtn--col {
  flex-direction: column;
  gap: 2px;
  min-width: 56px;
  min-height: 52px;
  padding: var(--dc-1) var(--dc-2);
}
.dc-ibtn__label {
  font-family: var(--dc-font);
  font-size: 11px;
  line-height: 1.2;
}
.dc-topbar {
  display: flex;
  align-items: center;
  gap: var(--dc-1);
  padding: var(--dc-2) var(--dc-2);
  padding-top: calc(var(--dc-2) + var(--dc-safe-top));
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
}
.dc-topbar__title {
  flex: 1;
  margin: 0;
  padding-left: var(--dc-1);
  font-family: var(--dc-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--dc-text);
}

Cara memakainya

  • Maksimal empat dalam satu baris; sisanya pindahkan ke menu lainnya
  • Kumpulkan hanya aksi sebobot; aksi yang sulit dibatalkan jangan di sini
  • Beri label pada ikon yang sering salah dibaca, seperti bagikan dan simpan

Hal yang perlu diwaspadai

  • Setiap tombol ikon saja wajib punya nama dc-sr
  • Area tekan adalah tombolnya, bukan gambarnya: jangan di bawah 44×44px
  • Sebagai bilah atas tetap, tambahkan --dc-safe-top agar judul tidak tertutup notch

Berikutnya