← Kitchen Sink로 돌아가기

CheckoutBottomBar

장바구니 하단 고정 체크아웃 바 컴포넌트 데모

정상 상태 (exceedsLimit=)

💡 참고: 아래 데모는 fixed 포지션이므로 페이지 하단에 고정되어 표시됩니다. 스크롤하여 확인하세요.

이 영역은 데모 공간입니다. 실제 컴포넌트는 페이지 하단에 고정되어 있습니다.

<CheckoutBottomBar totalPrice="146.57" currency="US$" exceedsLimit=> <Fragment slot="warningMessage"> To ensure secure payment and smooth delivery,<br /> please place orders under $1,000. (Current: 1221 USD). </Fragment> </CheckoutBottomBar>
실제 페이지에서 확인하기 →

한도 초과 상태 (exceedsLimit=true)

⚠️ 특징:
  • 경고 메시지가 표시됨 (warningMessage 슬롯)
  • 버튼이 disabled 상태가 됨
  • 경고 메시지 스타일: text-accent-strong-03 (빨간색), text-right 정렬

이 영역은 데모 공간입니다. 실제 컴포넌트는 페이지 하단에 고정되어 있습니다.

<CheckoutBottomBar totalPrice="1,221.00" currency="US$" exceedsLimit=true> <Fragment slot="warningMessage"> To ensure secure payment and smooth delivery,<br /> please place orders under $1,000. (Current: 1221 USD). </Fragment> </CheckoutBottomBar>

Props

Prop Type Default Description
totalPrice string - 총 주문 금액
currency string 'US$' 통화 표시
beforeTaxLabel string 'Taxes not included' 세금 미포함 라벨
exceedsLimit boolean false 한도 초과 여부 (true 시 경고 메시지 표시, 버튼 disabled)
buttonText string 'Go to Checkout' 버튼 텍스트

Slots

warningMessage

한도 초과 시 표시할 경고 메시지. exceedsLimit=true일 때만 표시됩니다.

action

기본 버튼 대신 커스텀 액션 버튼을 사용할 때 사용합니다. 제공하지 않으면 기본 버튼이 표시됩니다.

Taxes not included
Total Price
US$146.57
Taxes not included
Total Price
US$1,221.00