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

Secondary button

For the 'not right now' choice that has to sit next to the primary one.

Actions

Live preview

Source

<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; }

How to use it

  • Use it for reversing actions: cancel, later, back
  • Beside a primary button, keep the eye going to the primary one first
  • No more than two in a row — equal weight makes choosing hard

Watch out for

  • Border must be --dc-line-field; the decorative --dc-line does not read as pressable
  • The quiet variant only works among other controls; alone, nobody sees a button

Next