BottomCTA

화면 하단의 한두 개 핵심 행동을 owned Button으로 구성하고 fixed·safe-area·공간 보존을 일관되게 처리합니다.

예제

사용해야 할 때

결제, 신청, 저장처럼 화면의 다음 단계를 결정하는 핵심 행동을 콘텐츠 하단에서 지속적으로 제공할 때 사용합니다. 주 행동 하나는 Single, 보조 행동과 주 행동의 조합은 Double layout으로 자동 결정됩니다.

사용하지 말아야 할 때

본문 안의 국소 행동이나 세 개 이상의 병렬 선택에는 사용하지 않습니다. fixed BottomCTA를 BottomSheet 안에 중첩하지 말고 BottomSheet의 footer slot을 사용합니다. delayed show, hide-on-scroll, keyboard-following accessory는 제공하지 않습니다.

구조

중립적인 outer div 안에 panel과 action grid가 있습니다. primaryAction과 선택적 secondaryAction은 정확한 owned Button element만 허용하며 clone 과정에서 size="large", width="full"만 강제합니다. variant, loading, disabled, form 속성, handler, accessible copy와 원래 Button ref는 유지됩니다.

크기와 변형

공개 size prop은 없습니다. action은 Button large 높이와 full width를 사용합니다. secondary가 없으면 Single, 있으면 secondary → primary 순서의 Double입니다. background="none"은 panel surface만 제거하고 focus와 pointer geometry는 유지합니다.

상태와 동작

기본은 문서 흐름의 static 상태입니다. fixed는 portal 없이 panel만 viewport 하단에 고정합니다. 기본 takeSpace=true는 ResizeObserver로 실제 panel 높이를 측정한 spacer를 만들어 긴 label, zoom, orientation 변경에도 마지막 콘텐츠가 가려지지 않게 합니다. 공간을 별도로 관리하는 shell에서만 takeSpace=false를 사용합니다.

반응형 동작

Double action은 같은 폭의 두 열이며 각각 min-inline-size: 0과 overflow-wrap: anywhere로 320px과 200% text zoom에서 재배치됩니다. horizontal safe area와 하단 env(safe-area-inset-bottom), 상위 scope의 --hds-safe-area-bottom, space/16 fallback을 함께 존중합니다.

접근성

outer div에 불필요한 landmark나 group role을 만들지 않습니다. Double은 secondary를 primary보다 먼저 DOM, 시각, tab 순서에 배치합니다. 실제 native Button의 disabled, loading, accessible name, Enter·Space 동작과 focus-visible 표현을 그대로 사용하며 forced colors에서도 action 경계와 focus를 유지합니다.

React 예제

import { BottomCTA, Button } from '@hds/react';
import '@hds/react/styles.css';

export function CheckoutActions() {
  return (
    <BottomCTA
      fixed
      primaryAction={<Button form="checkout" type="submit">결제하기</Button>}
      secondaryAction={<Button onClick={goBack} variant="weak">이전</Button>}
    />
  );
}

API

사용 토큰

• geometry: size/control/large, space/0, space/4, space/12, space/16, radius/md
• typography: font/family/sans, font/size/body-lg, font/weight/semibold, font/line-height/body-lg
• surface와 action: color/bg/surface, primary·weak action colors, border colors, color/focus/ring

Figma

04.20 BottomCTA page의 BottomCTA component set은 Layout Single/Double × Background Default/None = 4 variants를 제공합니다. Primary label과 Secondary label은 TEXT property이고 각 master는 owned large Fill·Weak Button을 유지합니다. fixed, takeSpace, safe-area는 시각 axis가 아닌 code behavior입니다.

지원 상태