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

Floating action button

For the one thing people come to a list to do — start a new entry — kept floating above the content as they scroll.

Actions

Live preview

Source

<div class="dc-fabstage">
  <ul class="dc-fabstage__list">
    <li class="dc-fabstage__row">현장 점검 일지</li>
    <li class="dc-fabstage__row">자재 입고 확인</li>
    <li class="dc-fabstage__row">안전 교육 기록</li>
  </ul>
  <button class="dc-fab" type="button">
    <svg class="dc-fab__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
    <span class="dc-sr">새 기록 쓰기</span>
  </button>
</div>
.dc-fabstage {
  position: relative;
  min-height: 360px;
  background: var(--dc-bg);
  font-family: var(--dc-font);
  overflow: hidden;
}
.dc-fabstage__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dc-fabstage__row {
  padding: var(--dc-4);
  border-bottom: 1px solid var(--dc-line);
  background: var(--dc-surface);
  font-size: 15px;
  color: var(--dc-text);
}
.dc-fab {
  position: absolute;
  right: var(--dc-4);
  bottom: calc(var(--dc-4) + var(--dc-safe-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand);
  color: var(--dc-text-on);
  box-shadow: var(--dc-sh-3);
  cursor: pointer;
  transition: background var(--dc-fast), transform var(--dc-fast);
}
.dc-fab:hover { background: var(--dc-brand-hi); }
.dc-fab:active { transform: scale(.96); }
.dc-fab__ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.dc-fab--wide {
  width: auto;
  min-width: 56px;
  padding: 0 var(--dc-5);
  gap: var(--dc-2);
  border-radius: var(--dc-r-full);
}
.dc-fab__label {
  font-family: var(--dc-font);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.dc-fab--above {
  bottom: calc(64px + var(--dc-4) + var(--dc-safe-bottom));
}
.dc-fabstage__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding-bottom: var(--dc-safe-bottom);
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
}
.dc-fabstage__tab {
  flex: 1;
  min-height: 56px;
  border: 0;
  background: none;
  color: var(--dc-text-sub);
  font-family: var(--dc-font);
  font-size: 12px;
  cursor: pointer;
}
.dc-fabstage__tab[aria-current="page"] {
  color: var(--dc-brand-text);
  font-weight: 600;
}

How to use it

  • One per screen; if you need two, they belong in a bottom bar instead
  • Reserve it for the most frequent action, usually creating a new item
  • Use the labelled wide form when an icon alone would not read clearly

Watch out for

  • An icon-only button needs a dc-sr name, or screen readers announce just “button”
  • With a bottom tab bar, lift the button by the bar's height so it never covers the last row

Next