Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Swipe actions

For rows people archive or delete over and over — swiping finishes the job without opening the detail screen.

Actions

Live preview

Source

<div class="dc-swipe">
  <ul class="dc-swipe__list">
    <li class="dc-swipe__item">
      <div class="dc-swipe__track">
        <div class="dc-swipe__pane">
          <span class="dc-swipe__name">김민수 주임</span>
          <span class="dc-swipe__desc">오후 2시 현장 점검 가능합니다</span>
        </div>
        <div class="dc-swipe__acts">
          <button class="dc-swipe__act" type="button">보관<span class="dc-sr"> · 김민수 주임 메시지</span></button>
          <button class="dc-swipe__act dc-swipe__act--danger" type="button">삭제<span class="dc-sr"> · 김민수 주임 메시지</span></button>
        </div>
      </div>
    </li>
    <li class="dc-swipe__item">
      <div class="dc-swipe__track">
        <div class="dc-swipe__pane">
          <span class="dc-swipe__name">자재팀</span>
          <span class="dc-swipe__desc">철근 입고 예정일이 하루 늦어집니다</span>
        </div>
        <div class="dc-swipe__acts">
          <button class="dc-swipe__act" type="button">보관<span class="dc-sr"> · 자재팀 메시지</span></button>
          <button class="dc-swipe__act dc-swipe__act--danger" type="button">삭제<span class="dc-sr"> · 자재팀 메시지</span></button>
        </div>
      </div>
    </li>
  </ul>
  <p class="dc-swipe__hint">왼쪽으로 밀면 보관·삭제가 나옵니다. 항목을 열어 같은 동작을 쓸 수도 있습니다.</p>
</div>
.dc-swipe {
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-swipe__list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
}
.dc-swipe__item {
  border-bottom: 1px solid var(--dc-line);
}
.dc-swipe__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.dc-swipe__track::-webkit-scrollbar { display: none; }
.dc-swipe__pane {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: var(--dc-1);
  min-height: 44px;
  padding: var(--dc-3) var(--dc-4);
  scroll-snap-align: start;
  background: var(--dc-surface);
}
.dc-swipe__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--dc-text);
}
.dc-swipe__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dc-text-sub);
}
.dc-swipe__acts {
  display: flex;
  flex: none;
  scroll-snap-align: end;
}
.dc-swipe__act {
  min-width: 72px;
  min-height: 44px;
  border: 0;
  background: var(--dc-sunken);
  color: var(--dc-text);
  font-family: var(--dc-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.dc-swipe__act--danger {
  background: var(--dc-danger);
  color: var(--dc-text-on);
}
.dc-swipe__item--open .dc-swipe__pane {
  flex-basis: calc(100% - 144px);
}
.dc-swipe__hint {
  margin: 0;
  padding: var(--dc-3) var(--dc-4);
  font-size: 12px;
  line-height: 1.6;
  color: var(--dc-text-mute);
}

How to use it

  • Two actions at most; from three on, fingers cannot aim and it gets slower than a menu
  • Put the destructive one furthest out and color it with --dc-danger
  • Swiping is only a shortcut: the same actions must also exist in the row's detail or more menu

Watch out for

  • If swiping is the only path, keyboard and screen-reader users cannot reach the action at all
  • Do not delete instantly — offer Undo for a few seconds
  • Keep the revealed buttons 44px tall so a swipe does not end in a mis-tap

Next