Footer

페이지 끝의 시트입니다. contentinfo 랜드마크인 실제 <footer>를 렌더링하며, 표면과 거터, 그리고 바를 화면 아래에 고정할지를 정합니다. 안에 들어가는 내용은 직접 넣습니다.

import { Footer } from 'neba';

<Footer>© 2026 Neba</Footer>;

Props

Prop	타입	기본값	설명
children	ReactNode	—	안에 들어가는 모든 것. 링크 열, 저작권 줄, 로고, 컴포넌트가 짐작할 수 없는 것들이라 자리를 나누지 않습니다
position공통	'static' | 'sticky' | 'fixed'	'static'	Header와 반대되는 기본값. 푸터는 스크롤해서 닿는 문서의 끝입니다. sticky와 fixed는 손에 닿아 있어야 하는 바용
variant공통	'solid' | 'outline' | 'text'	'outline'	면의 무게. 바는 색으로 물들지 않습니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	거터와 위아래 여백. Box에서처럼 시트의 크기입니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 0은 그림자 없음
divider	boolean	true	위 가장자리의 헤어라인. 위에는 내용이 있고 아래에는 아무것도 없는 유일한 시트이므로, 이 선이 문서가 끝났다고 말하는 전부입니다
maxWidth	NebaMeasure | Partial<Record<NebaBreakpoint, NebaMeasure>>	'none'	시트는 창을 가로지른 채, 안쪽 내용만 이 폭으로 묶어 가운데 놓습니다. Container와 같은 사다리이고, 직접 쓴 길이와 breakpoint별 map도 같은 방식으로 받습니다
padded	boolean	true	거터와 위아래 여백
label	string	—	랜드마크의 이름. 한 페이지에 footer가 둘 이상일 때
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<div />}). Base UI의 render prop 그대로

<footer>의 native 속성은 그대로 전달됩니다. 다만 color와 title은 예외입니다. 공통 축은 prop 규칙에서 설명합니다.

자리를 나누지 않는다는 점이 Header와 다릅니다. footer의 내용은 어떤 사이트에서는 네 개의 열이고 다음 사이트에서는 한 줄이라, 배치를 미리 정해 두면 절반의 사이트가 그것과 싸우게 됩니다.

예시

position

기본값은 static으로 Header와 반대입니다. footer는 스크롤해서 닿는 문서의 끝이기 때문입니다. sticky는 창 아래에 붙이고, fixed는 흐름에서 빼냅니다. PageLayout 안에서는 그 높이만큼 자리가 비워지므로 마지막 문단 위에 겹치지 않습니다.

variant

세 가지 무게는 다른 곳에서와 같은 뜻입니다. 시트는 color로 물들지 않습니다.

import { Footer, Typography } from 'neba';

export default function FooterVariant() {
  return (
    <div className="flex w-full flex-col gap-4">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <Footer key={variant} variant={variant} className="rounded-(--neba-radius-md)">
          <Typography level="caption" color="secondary">
            variant=&quot;{variant}&quot;
          </Typography>
        </Footer>
      ))}
    </div>
  );
}

maxWidth

시트는 창을 가로지른 채, 안쪽 내용만 이 폭으로 묶어 가운데에 놓습니다. Container와 같은 사다리이고, 직접 쓴 길이와 breakpoint별 map도 같은 방식으로 받습니다.

import { Footer, Typography } from 'neba';

export default function FooterMeasure() {
  return (
    <Footer maxWidth="sm" className="rounded-(--neba-radius-md)">
      <Typography level="caption" color="secondary">
        The sheet spans the window; the content is held to 40rem and centred.
      </Typography>
    </Footer>
  );
}

divider · padded

divider는 위 가장자리에 헤어라인을 그리며 기본값은 켜짐입니다. footer는 위에는 내용이 있고 아래에는 아무것도 없는 유일한 시트라, 이 선이 문서가 끝났다고 말하는 전부입니다. padded={false}는 여백을 직접 다루는 footer를 위해 거터를 없앱니다.

접근성

• <footer>를 렌더링하며, <article>이나 <section> 안이 아니라면 contentinfo 랜드마크입니다.
• 한 페이지에 <footer>가 둘 이상이면 label을 주세요.
• 링크 열이 잔글씨가 아니라 탐색이라면 직접 <nav>로 묶으세요.