보조 버튼

주 버튼 옆에서 '지금은 하지 않기'를 고를 수 있게 해 주는 조각.

실제 미리보기

출처

HTML CSS

<button type="button" class="dc-sbtn">취소</button>

.dc-sbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-2);
  min-height: 44px; padding: 0 var(--dc-5);
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: var(--dc-font); font-size: 15px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-sbtn:hover,
.dc-sbtn.is-hover { background: var(--dc-sunken); border-color: var(--dc-text-sub); }
.dc-sbtn[disabled] {
  background: var(--dc-sunken); color: var(--dc-text-mute);
  border-color: var(--dc-line); cursor: not-allowed;
}
.dc-sbtn--quiet { background: transparent; border-color: transparent; color: var(--dc-brand-text); }
.dc-sbtn--quiet:hover { background: var(--dc-brand-soft); border-color: transparent; }
.dc-sbtn__icon { width: 18px; height: 18px; flex: none; }

이렇게 씁니다

취소·나중에·뒤로처럼 되돌리는 동작에 쓴다
주 버튼과 나란히 둘 때는 시선이 주 버튼에 먼저 가게 둔다
한 줄에 보조 버튼을 셋 이상 늘어놓지 않는다 — 무게가 같아 고르기 어려워진다

주의할 점

테두리는 --dc-line-field 를 쓴다 — 장식선(--dc-line)은 눌리는 것처럼 보이지 않는다
조용한 변형은 주변에 누를 것이 많을 때만. 혼자 있으면 버튼인지 모른다

다음에 볼 것